Fix tx autoscroll

Simple mode redesign w/ sticky button
Simplified acceleration mode for mobile
2024-04-08 08:50:12 +00:00 · 2024-04-08 08:05:22 +00:00 · 2024-04-08 04:58:56 +00:00 · 2024-04-08 11:41:54 +09:00 · 2024-04-07 21:42:36 +08:00 · 2024-04-07 21:20:42 +08:00
92 changed files with 17785 additions and 6315 deletions
--- a/backend/README.md
+++ b/backend/README.md
@@ -103,7 +103,7 @@ In particular, make sure:
 - the correct Bitcoin Core RPC credentials are specified in `CORE_RPC`
 - the correct `BACKEND` is specified in `MEMPOOL`:
  - "electrum" if you're using [romanz/electrs](https://github.com/romanz/electrs) or [cculianu/Fulcrum](https://github.com/cculianu/Fulcrum)
-  - "esplora" if you're using [Blockstream/electrs](https://github.com/Blockstream/electrs)
+  - "esplora" if you're using [mempool/electrs](https://github.com/mempool/electrs)
  - "none" if you're not using any Electrum Server

 ### 6. Run Mempool Backend
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -23,7 +23,7 @@
        "rust-gbt": "file:./rust-gbt",
        "socks-proxy-agent": "~7.0.0",
        "typescript": "~4.9.3",
-        "ws": "~8.13.0"
+        "ws": "~8.16.0"
      },
      "devDependencies": {
        "@babel/code-frame": "^7.18.6",
@@ -32,7 +32,7 @@
        "@types/crypto-js": "^4.1.1",
        "@types/express": "^4.17.17",
        "@types/jest": "^29.5.0",
-        "@types/ws": "~8.5.5",
+        "@types/ws": "~8.5.10",
        "@typescript-eslint/eslint-plugin": "^5.55.0",
        "@typescript-eslint/parser": "^5.55.0",
        "eslint": "^8.36.0",
@@ -1858,9 +1858,9 @@
      "dev": true
    },
    "node_modules/@types/ws": {
-      "version": "8.5.5",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
-      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
      "dev": true,
      "dependencies": {
        "@types/node": "*"
@@ -7690,9 +7690,9 @@
      }
    },
    "node_modules/ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
      "engines": {
        "node": ">=10.0.0"
      },
@@ -9198,9 +9198,9 @@
      "dev": true
    },
    "@types/ws": {
-      "version": "8.5.5",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
-      "integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
      "dev": true,
      "requires": {
        "@types/node": "*"
@@ -13424,9 +13424,9 @@
      }
    },
    "ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
      "requires": {}
    },
    "y18n": {
--- a/backend/package.json
+++ b/backend/package.json
@@ -52,7 +52,7 @@
    "redis": "^4.6.6",
    "socks-proxy-agent": "~7.0.0",
    "typescript": "~4.9.3",
-    "ws": "~8.13.0"
+    "ws": "~8.16.0"
  },
  "devDependencies": {
    "@babel/code-frame": "^7.18.6",
@@ -61,7 +61,7 @@
    "@types/crypto-js": "^4.1.1",
    "@types/express": "^4.17.17",
    "@types/jest": "^29.5.0",
-    "@types/ws": "~8.5.5",
+    "@types/ws": "~8.5.10",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "eslint": "^8.36.0",
--- a/backend/src/api/about.routes.ts
+++ b/backend/src/api/about.routes.ts
@@ -0,0 +1,87 @@
+import { Application } from "express";
+import config from "../config";
+import axios from "axios";
+import logger from "../logger";
+
+class AboutRoutes {
+  public initRoutes(app: Application) {
+    app
+      .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/donations`, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'donations/images/:id', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/donations/images/${req.params.id}`, {
+            responseType: 'stream', timeout: 10000
+          });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'contributors', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/contributors`, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'contributors/images/:id', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/contributors/images/${req.params.id}`, {
+            responseType: 'stream', timeout: 10000
+          });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'translators', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/translators`, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'translators/images/:id', async (req, res) => {
+        try {
+          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/translators/images/${req.params.id}`, {
+            responseType: 'stream', timeout: 10000
+          });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/sponsors', async (req, res) => {
+        const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
+        try {
+          const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          logger.err(`Unable to fetch sponsors from ${url}. ${e}`, 'About Page');
+          res.status(500).end();
+        }
+      })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/account/images/:username', async (req, res) => {
+        const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
+        try {
+          const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
+          response.data.pipe(res);
+        } catch (e) {
+          logger.err(`Unable to fetch sponsor profile image from ${url}. ${e}`, 'About Page');
+          res.status(500).end();
+        }
+      })
+    ;
+  }
+}
+
+export default new AboutRoutes();
--- a/backend/src/api/acceleration/acceleration.routes.ts
+++ b/backend/src/api/acceleration/acceleration.routes.ts
@@ -0,0 +1,75 @@
+import { Application, Request, Response } from "express";
+import config from "../../config";
+import axios from "axios";
+import logger from "../../logger";
+
+class AccelerationRoutes {
+  private tag = 'Accelerator';
+
+  public initRoutes(app: Application) {
+    app
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/accelerator/accelerations', this.$getAcceleratorAccelerations.bind(this))
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/accelerator/accelerations/history', this.$getAcceleratorAccelerationsHistory.bind(this))
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/accelerator/accelerations/history/aggregated', this.$getAcceleratorAccelerationsHistoryAggregated.bind(this))
+      .get(config.MEMPOOL.API_URL_PREFIX + 'services/accelerator/accelerations/stats', this.$getAcceleratorAccelerationsStats.bind(this))
+    ;
+  }
+
+  private async $getAcceleratorAccelerations(req: Request, res: Response) {
+    const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
+    try {
+      const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
+      for (const key in response.headers) {
+        res.setHeader(key, response.headers[key]); 
+      }      
+      response.data.pipe(res);
+    } catch (e) {
+      logger.err(`Unable to get current accelerations from ${url} in $getAcceleratorAccelerations(), ${e}`, this.tag);
+      res.status(500).end();
+    }
+  }
+
+  private async $getAcceleratorAccelerationsHistory(req: Request, res: Response) {
+    const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
+    try {
+      const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
+      for (const key in response.headers) {
+        res.setHeader(key, response.headers[key]); 
+      }      
+      response.data.pipe(res);
+    } catch (e) {
+      logger.err(`Unable to get acceleration history from ${url} in $getAcceleratorAccelerationsHistory(), ${e}`, this.tag);
+      res.status(500).end();
+    }
+  }
+
+  private async $getAcceleratorAccelerationsHistoryAggregated(req: Request, res: Response) {
+    const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
+    try {
+      const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
+      for (const key in response.headers) {
+        res.setHeader(key, response.headers[key]); 
+      }      
+      response.data.pipe(res);
+    } catch (e) {
+      logger.err(`Unable to get aggregated acceleration history from ${url} in $getAcceleratorAccelerationsHistoryAggregated(), ${e}`, this.tag);
+      res.status(500).end();
+    }
+  }
+
+  private async $getAcceleratorAccelerationsStats(req: Request, res: Response) {
+    const url = `${config.MEMPOOL_SERVICES.API}/${req.originalUrl.replace('/api/v1/services/', '')}`;
+    try {
+      const response = await axios.get(url, { responseType: 'stream', timeout: 10000 });
+      for (const key in response.headers) {
+        res.setHeader(key, response.headers[key]); 
+      }      
+      response.data.pipe(res);
+    } catch (e) {
+      logger.err(`Unable to get acceleration stats from ${url} in $getAcceleratorAccelerationsStats(), ${e}`, this.tag);
+      res.status(500).end();
+    }
+  }
+}
+
+export default new AccelerationRoutes();
--- a/backend/src/api/acceleration/acceleration.ts
+++ b/backend/src/api/acceleration/acceleration.ts
@@ -1,6 +1,6 @@
-import logger from '../logger';
-import { MempoolTransactionExtended } from '../mempool.interfaces';
-import { IEsploraApi } from './bitcoin/esplora-api.interface';
+import logger from '../../logger';
+import { MempoolTransactionExtended } from '../../mempool.interfaces';
+import { IEsploraApi } from '../bitcoin/esplora-api.interface';

 const BLOCK_WEIGHT_UNITS = 4_000_000;
 const BLOCK_SIGOPS = 80_000;
--- a/backend/src/api/bitcoin/bitcoin.routes.ts
+++ b/backend/src/api/bitcoin/bitcoin.routes.ts
@@ -37,60 +37,6 @@ class BitcoinRoutes {
      .get(config.MEMPOOL.API_URL_PREFIX + 'replacements', this.getRbfReplacements)
      .get(config.MEMPOOL.API_URL_PREFIX + 'fullrbf/replacements', this.getFullRbfReplacements)
      .post(config.MEMPOOL.API_URL_PREFIX + 'tx/push', this.$postTransactionForm)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/donations`, { responseType: 'stream', timeout: 10000 });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'donations/images/:id', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/donations/images/${req.params.id}`, {
-            responseType: 'stream', timeout: 10000
-          });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'contributors', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/contributors`, { responseType: 'stream', timeout: 10000 });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'contributors/images/:id', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/contributors/images/${req.params.id}`, {
-            responseType: 'stream', timeout: 10000
-          });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'translators', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/translators`, { responseType: 'stream', timeout: 10000 });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
-      .get(config.MEMPOOL.API_URL_PREFIX + 'translators/images/:id', async (req, res) => {
-        try {
-          const response = await axios.get(`${config.EXTERNAL_DATA_SERVER.MEMPOOL_API}/translators/images/${req.params.id}`, {
-            responseType: 'stream', timeout: 10000
-          });
-          response.data.pipe(res);
-        } catch (e) {
-          res.status(500).end();
-        }
-      })
      .get(config.MEMPOOL.API_URL_PREFIX + 'blocks', this.getBlocks.bind(this))
      .get(config.MEMPOOL.API_URL_PREFIX + 'blocks/:height', this.getBlocks.bind(this))
      .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash', this.getBlock)
--- a/backend/src/api/common.ts
+++ b/backend/src/api/common.ts
@@ -373,6 +373,21 @@ export class Common {
    ].includes(pubkey);
  }

+  static isInscription(vin, flags): bigint {
+    // in taproot, if the last witness item begins with 0x50, it's an annex
+    const hasAnnex = vin.witness?.[vin.witness.length - 1].startsWith('50');
+    // script spends have more than one witness item, not counting the annex (if present)
+    if (vin.witness.length > (hasAnnex ? 2 : 1)) {
+      // the script itself is the second-to-last witness item, not counting the annex
+      const asm = vin.inner_witnessscript_asm || transactionUtils.convertScriptSigAsm(vin.witness[vin.witness.length - (hasAnnex ? 3 : 2)]);
+      // inscriptions smuggle data within an 'OP_0 OP_IF ... OP_ENDIF' envelope
+      if (asm?.includes('OP_0 OP_IF')) {
+        flags |= TransactionFlags.inscription;
+      }
+    }
+    return flags;
+  }
+
  static getTransactionFlags(tx: TransactionExtended): number {
    let flags = tx.flags ? BigInt(tx.flags) : 0n;

@@ -409,30 +424,31 @@ export class Common {
      if (vin.sequence < 0xfffffffe) {
        rbf = true;
      }
-      switch (vin.prevout?.scriptpubkey_type) {
-        case 'p2pk': flags |= TransactionFlags.p2pk; break;
-        case 'multisig': flags |= TransactionFlags.p2ms; break;
-        case 'p2pkh': flags |= TransactionFlags.p2pkh; break;
-        case 'p2sh': flags |= TransactionFlags.p2sh; break;
-        case 'v0_p2wpkh': flags |= TransactionFlags.p2wpkh; break;
-        case 'v0_p2wsh': flags |= TransactionFlags.p2wsh; break;
-        case 'v1_p2tr': {
-          if (!vin.witness?.length) {
-            throw new Error('Taproot input missing witness data');
-          }
-          flags |= TransactionFlags.p2tr;
-          // in taproot, if the last witness item begins with 0x50, it's an annex
-          const hasAnnex = vin.witness?.[vin.witness.length - 1].startsWith('50');
-          // script spends have more than one witness item, not counting the annex (if present)
-          if (vin.witness.length > (hasAnnex ? 2 : 1)) {
-            // the script itself is the second-to-last witness item, not counting the annex
-            const asm = vin.inner_witnessscript_asm || transactionUtils.convertScriptSigAsm(vin.witness[vin.witness.length - (hasAnnex ? 3 : 2)]);
-            // inscriptions smuggle data within an 'OP_0 OP_IF ... OP_ENDIF' envelope
-            if (asm?.includes('OP_0 OP_IF')) {
-              flags |= TransactionFlags.inscription;
+      if (vin.prevout?.scriptpubkey_type) {
+        switch (vin.prevout?.scriptpubkey_type) {
+          case 'p2pk': flags |= TransactionFlags.p2pk; break;
+          case 'multisig': flags |= TransactionFlags.p2ms; break;
+          case 'p2pkh': flags |= TransactionFlags.p2pkh; break;
+          case 'p2sh': flags |= TransactionFlags.p2sh; break;
+          case 'v0_p2wpkh': flags |= TransactionFlags.p2wpkh; break;
+          case 'v0_p2wsh': flags |= TransactionFlags.p2wsh; break;
+          case 'v1_p2tr': {
+            if (!vin.witness?.length) {
+              throw new Error('Taproot input missing witness data');
            }
+            flags |= TransactionFlags.p2tr;
+            flags = Common.isInscription(vin, flags);
+          } break;
+        }
+      } else {
+        // no prevouts, optimistically check witness-bearing inputs
+        if (vin.witness?.length >= 2) {
+          try {
+            flags = Common.isInscription(vin, flags);
+          } catch {
+            // witness script parsing will fail if this isn't really a taproot output
          }
-        } break;
+        }
      }

      // sighash flags
--- a/backend/src/api/database-migration.ts
+++ b/backend/src/api/database-migration.ts
@@ -655,6 +655,7 @@ class DatabaseMigration {

      await this.$executeQuery('TRUNCATE hashrates');
      await this.$executeQuery('TRUNCATE difficulty_adjustments');
+      await this.$executeQuery(`UPDATE state SET string = NULL WHERE name = 'pools_json_sha'`);

      await this.updateToSchemaVersion(75);
    }
--- a/backend/src/api/mempool-blocks.ts
+++ b/backend/src/api/mempool-blocks.ts
@@ -343,7 +343,7 @@ class MempoolBlocks {
      if (txid in mempool) {
        mempool[txid].cpfpDirty = (rate !== mempool[txid].effectiveFeePerVsize);
        mempool[txid].effectiveFeePerVsize = rate;
-        mempool[txid].cpfpChecked = false;
+        mempool[txid].cpfpChecked = true;
      }
    }

--- a/backend/src/api/websocket-handler.ts
+++ b/backend/src/api/websocket-handler.ts
@@ -739,7 +739,7 @@ class WebsocketHandler {
              accelerated: mempoolTx.acceleration || undefined,
            }
          };
-          if (!mempoolTx.cpfpChecked) {
+          if (!mempoolTx.cpfpChecked && !mempoolTx.acceleration) {
            calculateCpfp(mempoolTx, newMempool);
          }
          if (mempoolTx.cpfpDirty) {
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -43,6 +43,8 @@ import redisCache from './api/redis-cache';
 import accelerationApi from './api/services/acceleration';
 import bitcoinCoreRoutes from './api/bitcoin/bitcoin-core.routes';
 import bitcoinSecondClient from './api/bitcoin/bitcoin-second-client';
+import accelerationRoutes from './api/acceleration/acceleration.routes';
+import aboutRoutes from './api/about.routes';

 class Server {
  private wss: WebSocket.Server | undefined;
@@ -305,6 +307,10 @@ class Server {
      nodesRoutes.initRoutes(this.app);
      channelsRoutes.initRoutes(this.app);
    }
+    if (config.MEMPOOL_SERVICES.ACCELERATIONS) {
+      accelerationRoutes.initRoutes(this.app);
+    }
+    aboutRoutes.initRoutes(this.app);
  }

  healthCheck(): void {
--- a/backend/src/repositories/AccelerationRepository.ts
+++ b/backend/src/repositories/AccelerationRepository.ts
@@ -1,4 +1,4 @@
-import { AccelerationInfo, makeBlockTemplate } from '../api/acceleration';
+import { AccelerationInfo, makeBlockTemplate } from '../api/acceleration/acceleration';
 import { RowDataPacket } from 'mysql2';
 import DB from '../database';
 import logger from '../logger';
@@ -7,7 +7,7 @@ import { Common } from '../api/common';
 import config from '../config';
 import blocks from '../api/blocks';
 import accelerationApi, { Acceleration } from '../api/services/acceleration';
-import accelerationCosts from '../api/acceleration';
+import accelerationCosts from '../api/acceleration/acceleration';
 import bitcoinApi from '../api/bitcoin/bitcoin-api-factory';
 import transactionUtils from '../api/transaction-utils';
 import { BlockExtended, MempoolTransactionExtended } from '../mempool.interfaces';
--- a/contributors/daweilv.txt
+++ b/contributors/daweilv.txt
@@ -0,0 +1,3 @@
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of April 7, 2024.
+
+Signed: daweilv
--- a/docker/backend/start.sh
+++ b/docker/backend/start.sh
@@ -149,7 +149,7 @@ __REDIS_UNIX_SOCKET_PATH__=${REDIS_UNIX_SOCKET_PATH:=true}
 __REDIS_BATCH_QUERY_BASE_SIZE__=${REDIS_BATCH_QUERY_BASE_SIZE:=5000}

 # FIAT_PRICE
-__FIAT_PRICE_ENABLED__=${FIAT_PRICE_ENABLED:=false}
+__FIAT_PRICE_ENABLED__=${FIAT_PRICE_ENABLED:=true}
 __FIAT_PRICE_API_KEY__=${FIAT_PRICE_API_KEY:=""}

 mkdir -p "${__MEMPOOL_CACHE_DIR__}"
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -263,7 +263,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
  imports: [RouterModule.forRoot(routes, {
    initialNavigation: 'enabledBlocking',
    scrollPositionRestoration: 'enabled',
-    anchorScrolling: 'enabled',
+    anchorScrolling: 'disabled',
    preloadingStrategy: AppPreloadingStrategy
  })],
 })
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -32,7 +32,7 @@
    <track label="Português" kind="captions" srclang="pt" src="/resources/promo-video/pt.vtt" [attr.default]="showSubtitles('pt') ? '' : null">
  </video>

-  <ng-container *ngIf="officialMempoolSpace">
+  <ng-container>
    <app-about-sponsors></app-about-sponsors>
  </ng-container>

@@ -181,7 +181,7 @@
    </div>
  </div>

-  <ng-container *ngIf="officialMempoolSpace">
+  <ng-container>
    <div *ngIf="profiles$ | async as profiles" id="community-sponsors-anchor">
      <div class="community-sponsor" style="margin-bottom: 68px" *ngIf="profiles.whales.length > 0">
        <h3 i18n="about.sponsors.withHeart">Whale Sponsors</h3>
--- a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts
+++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.ts
@@ -52,7 +52,7 @@ export class AccelerateFeeGraphComponent implements OnInit, OnChanges {
        rate: option.rate,
        style: this.getStyle(option.rate, maxRate, baseHeight),
        class: 'max',
-        label: 'maximum',
+        label: $localize`maximum`,
        active: option.index === this.maxRateIndex,
        rateIndex: option.index,
        fee: option.fee,
@@ -63,7 +63,7 @@ export class AccelerateFeeGraphComponent implements OnInit, OnChanges {
        rate: this.estimate.targetFeeRate,
        style: this.getStyle(this.estimate.targetFeeRate, maxRate, baseHeight),
        class: 'target',
-        label: 'next block',
+        label: $localize`:@@bdf0e930eb22431140a2eaeacd809cc5f8ebd38c:Next Block`.toLowerCase(),
        fee: this.estimate.nextBlockFee - this.estimate.txSummary.effectiveFee
      });
    }
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
@@ -32,18 +32,16 @@
        <div class="alert alert-mempool">You are currently on the waitlist</div>
      </div>

-      <h5>Your transaction</h5>
+      <h5 i18n="accelerator.your-transaction">Your transaction</h5>
      <div class="row">
        <div class="col">
          <small *ngIf="hasAncestors" class="form-text text-muted mb-2">
-            Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor{{ estimate.txSummary.ancestorCount > 2 ? 's' : ''}}.
+            <ng-container i18n="accelerator.plus-unconfirmed-ancestors">Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor(s)</ng-container>
          </small>
          <table class="table table-borderless table-border table-dark table-accelerator">
            <tbody>
              <tr class="group-first">
-                <td class="item">
-                  Virtual size
-                </td>
+                <td class="item" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
                <td style="text-align: end;" [innerHTML]="'&lrm;' + (estimate.txSummary.effectiveVsize | vbytes: 2)"></td>
              </tr>
              <tr class="info">
@@ -52,9 +50,7 @@
                </td>
              </tr>
              <tr>
-                <td class="item">
-                  In-band fees
-                </td>
+                <td class="item" i18n="accelerator.in-band-fees">In-band fees</td>
                <td style="text-align: end;">
                  {{ estimate.txSummary.effectiveFee | number : '1.0-0' }} <span class="symbol" i18n="shared.sats">sats</span>
                </td>
@@ -69,27 +65,26 @@
        </div>
      </div>
      <br>
-      <h5>How much more are you willing to pay?</h5>
-      <div class="row">
-        <div class="col">
-          <small class="form-text text-muted mb-2">
-            Choose the maximum extra transaction fee you're willing to pay to get into the next block.<br>
-            If the estimated next block rate rises beyond this limit, we will automatically cancel your acceleration request.
-          </small>
-          <div class="form-group">
-            <div class="fee-card">
-              <div class="d-flex mb-0">
-                <ng-container *ngFor="let option of maxRateOptions">
-                  <button type="button" class="btn btn-primary flex-grow-1 btn-border btn-sm feerate" [class]="{active: selectFeeRateIndex === option.index}" (click)="setUserBid(option)">
-                    <span class="fee">{{ option.fee + estimate.mempoolBaseFee + estimate.vsizeFee | number }} <span class="symbol" i18n="shared.sats">sats</span></span>
-                    <span class="rate">~<app-fee-rate [fee]="option.rate" rounding="1.0-0"></app-fee-rate></span>
-                  </button>
-                </ng-container>
+      @if (paymentType !== 'cashapp') {
+        <h5 i18n="accelerator.pay-how-much">How much more are you willing to pay?</h5>
+        <div class="row">
+          <div class="col">
+            <small class="form-text text-muted mb-2" i18n="accelerator.transaction-fee-description">Choose the maximum extra transaction fee you're willing to pay to get into the next block.</small>
+            <div class="form-group">
+              <div class="fee-card">
+                <div class="d-flex mb-0">
+                  <ng-container *ngFor="let option of maxRateOptions">
+                    <button type="button" class="btn btn-primary flex-grow-1 btn-border btn-sm feerate" [class]="{active: selectFeeRateIndex === option.index}" (click)="setUserBid(option)">
+                      <span class="fee">{{ option.fee + estimate.mempoolBaseFee + estimate.vsizeFee | number }} <span class="symbol" i18n="shared.sats">sats</span></span>
+                      <span class="rate">~<app-fee-rate [fee]="option.rate" rounding="1.0-0"></app-fee-rate></span>
+                    </button>
+                  </ng-container>
+                </div>
              </div>
            </div>
          </div>
        </div>
-      </div>
+      }
  
      <h5>Acceleration summary</h5>
      <div class="row mb-3">
@@ -97,39 +92,59 @@
          <table class="table table-borderless table-border table-dark table-accelerator">
            <tbody>
              <!-- ESTIMATED FEE -->
-              <ng-container>
-                <tr class="group-first">
-                  <td class="item">
-                    Next block market rate
-                  </td>
-                  <td class="amt" style="font-size: 16px">
-                    {{ estimate.targetFeeRate | number : '1.0-0' }}
-                  </td>
-                  <td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
-                </tr>
-                <tr class="info">
-                  <td class="info">
-                    <i><small>Estimated extra fee required</small></i>
-                  </td>
-                  <td class="amt">
-                    {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
-                  </td>
-                  <td class="units">
-                    <span class="symbol" i18n="shared.sats">sats</span>
-                    <span class="fiat ml-1"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
-                  </td>
-                </tr>
-              </ng-container>
+              @if (paymentType === 'cashapp') {
+                <ng-container>
+                  <tr class="group-first">
+                    <td class="item" i18n="accelerator.boost-rate">Boost rate</td>
+                    <td class="amt" style="font-size: 16px">
+                      {{ maxRateOptions[selectFeeRateIndex].rate | number : '1.0-0' }}
+                    </td>
+                    <td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
+                  </tr>
+                  <tr class="info">
+                    <td class="info">
+                      <i><small i18n="accelerator.estimated-extra-fee-required">Boost fee</small></i>
+                    </td>
+                    <td class="amt">
+                      {{ maxRateOptions[selectFeeRateIndex].fee | number }}
+                    </td>
+                    <td class="units">
+                      <span class="symbol" i18n="shared.sats">sats</span>
+                      <span class="fiat ml-1"><app-fiat [value]="maxRateOptions[selectFeeRateIndex].fee"></app-fiat></span>
+                    </td>
+                  </tr>
+                </ng-container>
+              } @else {
+                <ng-container>
+                  <tr class="group-first">
+                    <td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
+                    <td class="amt" style="font-size: 16px">
+                      {{ estimate.targetFeeRate | number : '1.0-0' }}
+                    </td>
+                    <td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
+                  </tr>
+                  <tr class="info">
+                    <td class="info">
+                      <i><small i18n="accelerator.estimated-extra-fee-required">Estimated extra fee required</small></i>
+                    </td>
+                    <td class="amt">
+                      {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
+                    </td>
+                    <td class="units">
+                      <span class="symbol" i18n="shared.sats">sats</span>
+                      <span class="fiat ml-1"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
+                    </td>
+                  </tr>
+                </ng-container>
+              }
  
              <!-- MEMPOOL BASE FEE -->
              <tr>
-                <td class="item">
-                  Mempool Accelerator™ fees
-                </td>
+                <td class="item" i18n="accelerator.mempool-accelerator-fees">Mempool Accelerator™ fees</td>
              </tr>
              <tr class="info">
                <td class="info">
-                  <i><small>Accelerator Service Fee</small></i>
+                  <i><small i18n="accelerator.service-fee">Accelerator Service Fee</small></i>
                </td>
                <td class="amt">
                  +{{ estimate.mempoolBaseFee | number }}
@@ -141,7 +156,7 @@
              </tr>
              <tr class="info group-last">
                <td class="info">
-                  <i><small>Transaction Size Surcharge</small></i>
+                  <i><small i18n="accelerator.tx-size-surcharge">Transaction Size Surcharge</small></i>
                </td>
                <td class="amt">
                  +{{ estimate.vsizeFee | number }}
@@ -152,60 +167,81 @@
                </td>
              </tr>

-              <!-- NEXT BLOCK ESTIMATE -->
-              <ng-container>
-                <tr class="group-first" style="border-top: 1px dashed grey; border-collapse: collapse;">
-                  <td class="item">
-                    <b style="background-color: #5E35B1" class="p-1 pl-0">Estimated acceleration cost</b>
-                  </td>
-                  <td class="amt">
-                    <span style="background-color: #5E35B1" class="p-1 pl-0">
-                      {{ estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee | number }}
-                    </span>
-                  </td>
-                  <td class="units">
-                    <span class="symbol" i18n="shared.sats">sats</span>
-                    <span class="fiat ml-1"><app-fiat [value]="estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee"></app-fiat></span>
-                  </td>
-                </tr>
-                <tr class="info group-last" style="border-bottom: 1px solid lightgrey">
-                  <td class="info" colspan=3>
-                    <i><small>If your tx is accelerated to </small><small>{{ estimate.targetFeeRate | number : '1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></small></i>
-                  </td>
-                </tr>
-              </ng-container>
+              
+              @if (paymentType === 'cashapp') {
+                <!-- FIXED COST -->
+                <ng-container>
+                  <tr class="group-first group-last" style="border-top: 1px solid lightgrey; border-collapse: collapse;">
+                    <td class="item">
+                      <b style="background-color: #105fb0;" class="p-1 pl-0" i18n="accelerator.total-cost">Total cost</b>
+                    </td>
+                    <td class="amt">
+                      <span style="background-color: #105fb0" class="p-1 pl-0">
+                        {{ maxCost | number }}
+                      </span>
+                    </td>
+                    <td class="units">
+                      <span class="symbol" i18n="shared.sats">sats</span>
+                      <span class="fiat ml-1">
+                        <app-fiat [value]="maxCost" [colorClass]="'green-color'"></app-fiat>
+                      </span>
+                    </td>
+                  </tr>
+                </ng-container>
+              } @else {
+                <!-- NEXT BLOCK ESTIMATE -->
+                <ng-container>
+                  <tr class="group-first" style="border-top: 1px dashed grey; border-collapse: collapse;">
+                    <td class="item">
+                      <b style="background-color: #5E35B1" class="p-1 pl-0" i18n="accelerator.estimated-cost">Estimated acceleration cost</b>
+                    </td>
+                    <td class="amt">
+                      <span style="background-color: #5E35B1" class="p-1 pl-0">
+                        {{ estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee | number }}
+                      </span>
+                    </td>
+                    <td class="units">
+                      <span class="symbol" i18n="shared.sats">sats</span>
+                      <span class="fiat ml-1"><app-fiat [value]="estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee"></app-fiat></span>
+                    </td>
+                  </tr>
+                  <tr class="info group-last" style="border-bottom: 1px solid lightgrey">
+                    <td class="info" colspan=3>
+                      <i><small><ng-container *ngTemplateOutlet="acceleratedTo; context: {$implicit: estimate.targetFeeRate }"></ng-container></small></i>
+                    </td>
+                  </tr>
+                </ng-container>
  
-              <!-- MAX COST -->
-              <ng-container>
-                <tr class="group-first">
-                  <td class="item">
-                    <b style="background-color: #105fb0;" class="p-1 pl-0">Maximum acceleration cost</b>
-                  </td>
-                  <td class="amt">
-                    <span style="background-color: #105fb0" class="p-1 pl-0">
-                      {{ maxCost | number }}
-                    </span>
-                  </td>
-                  <td class="units">
-                    <span class="symbol" i18n="shared.sats">sats</span>
-                    <span class="fiat ml-1">
-                      <app-fiat [value]="maxCost" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
-                    </span>
-                  </td>
-                </tr>
-                <tr class="info group-last">
-                  <td class="info" colspan=3>
-                    <i><small>If your tx is accelerated to </small><small>~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }}  <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></small></i>
-                  </td>
-                </tr>
-              </ng-container>
+                <!-- MAX COST -->
+                <ng-container>
+                  <tr class="group-first">
+                    <td class="item">
+                      <b style="background-color: #105fb0;" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
+                    </td>
+                    <td class="amt">
+                      <span style="background-color: #105fb0" class="p-1 pl-0">
+                        {{ maxCost | number }}
+                      </span>
+                    </td>
+                    <td class="units">
+                      <span class="symbol" i18n="shared.sats">sats</span>
+                      <span class="fiat ml-1">
+                        <app-fiat [value]="maxCost" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="info group-last">
+                    <td class="info" colspan=3>
+                      <i><small><ng-container *ngTemplateOutlet="acceleratedTo; context: {$implicit: (estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize }"></ng-container></small></i>
+                    </td>
+                  </tr>
+                </ng-container>
+              }
  
              <!-- USER BALANCE -->
              <ng-container *ngIf="isLoggedIn() && estimate.userBalance < maxCost">
                <tr class="group-first group-last" style="border-top: 1px dashed grey">
-                  <td class="item">
-                    Available balance
-                  </td>
+                  <td class="item" i18n="accelerator.available-balance">Available balance</td>
                  <td class="amt">
                    {{ estimate.userBalance | number }}
                  </td>
@@ -219,12 +255,12 @@
              </ng-container>

              <!-- LOGIN CTA -->
-              <ng-container *ngIf="stateService.isMempoolSpaceBuild && !isLoggedIn()">
+              <ng-container *ngIf="stateService.isMempoolSpaceBuild && !isLoggedIn() && paymentType === 'bitcoin'">
                <tr class="group-first group-last" style="border-top: 1px dashed grey">
                  <td class="item"></td>
                  <td class="amt"></td>
                  <td class="units d-flex">
-                    <a [routerLink]="['/login']" [queryParams]="{redirectTo: '/tx/' + tx.txid + '#accelerate'}" class="btn btn-purple flex-grow-1">Login</a>
+                    <a [routerLink]="['/login']" [queryParams]="{redirectTo: '/tx/' + tx.txid + '#accelerate'}" class="btn btn-purple flex-grow-1" i18n="shared.sign-in">Sign In</a>
                  </td>
                </tr>
              </ng-container>
@@ -233,7 +269,7 @@
                  <td class="item"></td>
                  <td class="amt"></td>
                  <td class="units d-flex">
-                    <a [href]="'https://mempool.space/tx/' + tx.txid + '#accelerate'" class="btn btn-purple flex-grow-1">Accelerate on mempool.space</a>
+                    <a [href]="'https://mempool.space/tx/' + tx.txid + '#accelerate'" class="btn btn-purple flex-grow-1" i18n="accelerator.accelerate-on-mempoolspace">Accelerate on mempool.space</a>
                  </td>
                </tr>
              </ng-container>
@@ -242,13 +278,25 @@
        </div>
      </div>
  
-      <div class="row mb-3" *ngIf="isLoggedIn()">
+      <div class="row mb-3" *ngIf="isLoggedIn() && paymentType === 'bitcoin'">
        <div class="col">
          <div class="d-flex justify-content-end" *ngIf="user && estimate.hasAccess">
-            <button class="btn btn-sm btn-primary btn-success" style="width: 150px" (click)="accelerate()">Accelerate</button>
+            <button class="btn btn-sm btn-primary btn-success" style="width: 150px" (click)="accelerate()" i18n="transaction.accelerate|Accelerate button label">Accelerate</button>
          </div>
        </div>
      </div>
+
+      @if (!hideCashApp && paymentType === 'cashapp') {
+        <div #cashappCTA class="cashapp-placeholder {{ stickyCTA }}"></div>
+        <div class="d-flex justify-content-center align-items-center cashapp-cta {{ stickyCTA }}" (click)="submitCashappPay()">
+          <div [style]="showSpinner ? 'opacity: 0' : 'opacity: 1'" class="p-2">Accelerate for <app-fiat [value]="maxCost" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat> with</div>
+          <div id="cash-app-pay" style="max-width: 320px" [style]="showSpinner ? 'opacity: 0' : 'opacity: 1'"></div>
+          <div *ngIf="showSpinner" class="d-flex align-items-center">
+            <span class="mr-2">Loading</span>
+            <div class="spinner-border text-light" style="width: 25px; height: 25px"></div>
+          </div>
+        </div>
+      }
  
    </div>
  </ng-container>
@@ -257,4 +305,6 @@
 <ng-template #loadingEstimate>
  <div class="skeleton-loader"></div>
  <br>
-</ng-template>
+</ng-template>
+
+<ng-template #acceleratedTo let-i i18n="accelerator.accelerated-to-description">If your tx is accelerated to ~{{ i | number : '1.0-0' }} sat/vB</ng-template>
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
@@ -109,4 +109,53 @@

 .item {
  white-space: initial;
+}
+
+.cashapp-cta {
+  width: 100%;
+  height: 54px;
+  background: #653b9c;
+  position: relative;
+  bottom: initial;
+  top: initial;
+  border-radius: 3px;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+  padding: 4px 6px;
+  cursor: pointer;
+  box-shadow: 0px 0px 15px 0px #000;
+
+  &.sticky-top {
+    position: fixed;
+    width: calc(100vw - 30px - 1.5rem);
+    margin: auto;
+    z-index: 50;
+    left: 0;
+    right: 0;
+    top: 102px;
+    @media (min-width: 573px) {
+      top: 62px;
+    }
+  }
+  &.sticky-bottom {
+    position: fixed;
+    width: calc(100vw - 30px - 1.5rem);
+    margin: auto;
+    z-index: 50;
+    left: 0;
+    right: 0;
+    bottom: 50px;
+    @media (min-width: 430px) {
+      bottom: 56px;
+    }
+  }
+}
+
+.cashapp-placeholder {
+  height: 54px;
+
+  &.non-stick {
+    height: 0px;
+  }
 }
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
@@ -1,5 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef } from '@angular/core';
-import { ApiService } from '../../services/api.service';
+import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
 import { Subscription, catchError, of, tap } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
 import { Transaction } from '../../interfaces/electrs.interface';
@@ -44,6 +43,9 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
  @Input() tx: Transaction | undefined;
  @Input() scrollEvent: boolean;

+  @ViewChild('cashappCTA')
+  cashappCTA: ElementRef;
+
  math = Math;
  error = '';
  showSuccess = false;
@@ -60,92 +62,147 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
  selectFeeRateIndex = 1;
  isMobile: boolean = window.innerWidth <= 767.98;
  user: any = undefined;
+  stickyCTA: string = 'non-stick';

  maxRateOptions: RateOption[] = [];

+  // Cashapp payment
+  paymentType: 'bitcoin' | 'cashapp' = 'bitcoin';
+  cashAppSubscription: Subscription;
+  conversionsSubscription: Subscription;
+  cashappSubmit: any;
+  payments: any;
+  showSpinner = false;
+  square: any;
+  cashAppPay: any;
+  hideCashApp = false;
+
  constructor(
    public stateService: StateService,
    private servicesApiService: ServicesApiServices,
    private storageService: StorageService,
    private audioService: AudioService,
    private cd: ChangeDetectorRef
-  ) { }
+  ) {
+    if (this.stateService.ref === 'https://cash.app/') {
+      this.paymentType = 'cashapp';
+      this.insertSquare();
+    } else {
+      this.paymentType = 'bitcoin';
+    }
+  }

  ngOnDestroy(): void {
    if (this.estimateSubscription) {
      this.estimateSubscription.unsubscribe();
    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.scrollEvent) {
-      this.scrollToPreview('acceleratePreviewAnchor', 'start');
+    if (this.cashAppPay) {
+      this.cashAppPay.destroy();
    }
  }

  ngOnInit() {
+    if (this.stateService.ref === 'https://cash.app/') {
+      this.paymentType = 'cashapp';
+    } else {
+      this.paymentType = 'bitcoin';
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.scrollEvent && this.paymentType !== 'cashapp' && this.stateService.ref !== 'https://cash.app/') {
+      this.scrollToPreview('acceleratePreviewAnchor', 'start');
+    }
+  }
+
+  ngAfterViewInit() {
+    this.onScroll();
+
+    if (this.paymentType === 'cashapp') {
+      this.showSpinner = true;
+    }
+
    this.user = this.storageService.getAuth()?.user ?? null;

-    this.estimateSubscription = this.servicesApiService.estimate$(this.tx.txid).pipe(
-      tap((response) => {
-        if (response.status === 204) {
-          this.estimate = undefined;
-          this.error = `cannot_accelerate_tx`;
-          this.scrollToPreviewWithTimeout('mempoolError', 'center');
-          this.estimateSubscription.unsubscribe();
-        } else {
-          this.estimate = response.body;
-          if (!this.estimate) {
+    this.servicesApiService.setupSquare$().subscribe(ids => {
+      this.square = {
+        appId: ids.squareAppId,
+        locationId: ids.squareLocationId
+      };
+      this.estimateSubscription = this.servicesApiService.estimate$(this.tx.txid).pipe(
+        tap((response) => {
+          if (response.status === 204) {
+            this.estimate = undefined;
            this.error = `cannot_accelerate_tx`;
            this.scrollToPreviewWithTimeout('mempoolError', 'center');
            this.estimateSubscription.unsubscribe();
-          }
-
-          if (this.estimate.hasAccess === true && this.estimate.userBalance <= 0) {
-            if (this.isLoggedIn()) {
-              this.error = `not_enough_balance`;
+          } else {
+            this.estimate = response.body;
+            if (!this.estimate) {
+              this.error = `cannot_accelerate_tx`;
              this.scrollToPreviewWithTimeout('mempoolError', 'center');
+              this.estimateSubscription.unsubscribe();
+            }
+
+            if (this.paymentType === 'cashapp') {
+              this.estimate.userBalance = 999999999;
+              this.estimate.enoughBalance = true;
+            }
+
+            if (this.estimate.hasAccess === true && this.estimate.userBalance <= 0) {
+              if (this.isLoggedIn()) {
+                this.error = `not_enough_balance`;
+                this.scrollToPreviewWithTimeout('mempoolError', 'center');
+              }
+            }
+
+            this.hasAncestors = this.estimate.txSummary.ancestorCount > 1;
+            
+            // Make min extra fee at least 50% of the current tx fee
+            this.minExtraCost = nextRoundNumber(Math.max(this.estimate.cost * 2, this.estimate.txSummary.effectiveFee));
+
+            this.maxRateOptions = [1, 2, 4].map((multiplier, index) => {
+              return {
+                fee: this.minExtraCost * multiplier,
+                rate: (this.estimate.txSummary.effectiveFee + (this.minExtraCost * multiplier)) / this.estimate.txSummary.effectiveVsize,
+                index,
+              };
+            });
+
+            this.minBidAllowed = this.minExtraCost * MIN_BID_RATIO;
+            this.defaultBid = this.minExtraCost * DEFAULT_BID_RATIO;
+            this.maxBidAllowed = this.minExtraCost * MAX_BID_RATIO;
+
+            this.userBid = this.defaultBid;
+            if (this.userBid < this.minBidAllowed) {
+              this.userBid = this.minBidAllowed;
+            } else if (this.userBid > this.maxBidAllowed) {
+              this.userBid = this.maxBidAllowed;
+            }            
+            this.maxCost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee;
+
+            if (!this.error) {
+              if (this.paymentType === 'cashapp') {
+                this.setupSquare();
+              } else {
+                this.scrollToPreview('acceleratePreviewAnchor', 'start');
+              }
+
+              setTimeout(() => {
+                this.onScroll();
+              }, 100);
            }
          }
-
-          this.hasAncestors = this.estimate.txSummary.ancestorCount > 1;
-          
-          // Make min extra fee at least 50% of the current tx fee
-          this.minExtraCost = nextRoundNumber(Math.max(this.estimate.cost * 2, this.estimate.txSummary.effectiveFee));
-
-          this.maxRateOptions = [1, 2, 4].map((multiplier, index) => {
-            return {
-              fee: this.minExtraCost * multiplier,
-              rate: (this.estimate.txSummary.effectiveFee + (this.minExtraCost * multiplier)) / this.estimate.txSummary.effectiveVsize,
-              index,
-            };
-          });
-
-          this.minBidAllowed = this.minExtraCost * MIN_BID_RATIO;
-          this.defaultBid = this.minExtraCost * DEFAULT_BID_RATIO;
-          this.maxBidAllowed = this.minExtraCost * MAX_BID_RATIO;
-
-          this.userBid = this.defaultBid;
-          if (this.userBid < this.minBidAllowed) {
-            this.userBid = this.minBidAllowed;
-          } else if (this.userBid > this.maxBidAllowed) {
-            this.userBid = this.maxBidAllowed;
-          }            
-          this.maxCost = this.userBid + this.estimate.mempoolBaseFee + this.estimate.vsizeFee;
-
-          if (!this.error) {
-            this.scrollToPreview('acceleratePreviewAnchor', 'start');
-          }
-        }
-      }),
-      catchError((response) => {
-        this.estimate = undefined;
-        this.error = response.error;
-        this.scrollToPreviewWithTimeout('mempoolError', 'center');
-        this.estimateSubscription.unsubscribe();
-        return of(null);
-      })
-    ).subscribe();
+        }),
+        catchError((response) => {
+          this.estimate = undefined;
+          this.error = response.error;
+          this.scrollToPreviewWithTimeout('mempoolError', 'center');
+          this.estimateSubscription.unsubscribe();
+          return of(null);
+        })
+      ).subscribe();
+    });
  }

  /**
@@ -216,4 +273,146 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
  onResize(): void {
    this.isMobile = window.innerWidth <= 767.98;
  }
+
+  /**
+   * CashApp payment
+   */
+  setupSquare() {
+    const init = () => {
+      this.initSquare();
+    };
+
+    //@ts-ignore
+    if (!window.Square) {
+      console.warn('Square.js failed to load properly. Retrying in 1 second.');
+      setTimeout(init, 1000);
+    } else {
+      init();
+    }
+  }
+
+  async initSquare(): Promise<void> {
+    try {
+      //@ts-ignore
+      this.payments = window.Square.payments(this.square.appId, this.square.locationId)
+      await this.requestCashAppPayment();
+    } catch (e) {
+      console.error(e);
+      this.error = 'Error loading Square Payments';
+      return;
+    }
+  }
+
+  async requestCashAppPayment() {
+    if (this.cashAppSubscription) {
+      this.cashAppSubscription.unsubscribe();
+    }
+    if (this.conversionsSubscription) {
+      this.conversionsSubscription.unsubscribe();
+    }
+    this.hideCashApp = false;
+
+    
+    this.conversionsSubscription = this.stateService.conversions$.subscribe(
+      async (conversions) => {
+        const maxCostUsd = this.maxCost / 100_000_000 * conversions.USD;
+        const paymentRequest = this.payments.paymentRequest({
+          countryCode: 'US',
+          currencyCode: 'USD',
+          total: {
+            amount: maxCostUsd.toString(),
+            label: 'Total',
+            pending: true,
+            productUrl: `https://mempool.space/tx/${this.tx.txid}`,
+          },
+          button: { shape: 'semiround', size: 'small', theme: 'light'}
+        });
+        this.cashAppPay = await this.payments.cashAppPay(paymentRequest, {
+          redirectURL: `https://mempool.space/tx/${this.tx.txid}`,
+          referenceId: `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+          button: { shape: 'semiround', size: 'small', theme: 'light'}
+        });
+        const renderPromise = this.cashAppPay.CashAppPayInstance.render('#cash-app-pay', { button: { theme: 'light', size: 'small', shape: 'semiround' }, manage: false });
+        this.showSpinner = false;
+        
+        const that = this;
+        this.cashAppPay.addEventListener('ontokenization', function (event) {
+          const { tokenResult, error } = event.detail;
+          if (error) {
+            this.error = error;
+          } else if (tokenResult.status === 'OK') {
+            that.hideCashApp = true;
+
+            that.accelerationSubscription = that.servicesApiService.accelerateWithCashApp$(
+              that.tx.txid,
+              that.userBid,
+              tokenResult.token,
+              tokenResult.details.cashAppPay.cashtag,
+              tokenResult.details.cashAppPay.referenceId
+            ).subscribe({
+              next: () => {
+                that.audioService.playSound('ascend-chime-cartoon');
+                that.showSuccess = true;
+                that.scrollToPreviewWithTimeout('successAlert', 'center');
+                that.estimateSubscription.unsubscribe();
+              },
+              error: (response) => {
+                if (response.status === 403 && response.error === 'not_available') {
+                  that.error = 'waitlisted';
+                } else {
+                  that.error = response.error;
+                }
+                that.scrollToPreviewWithTimeout('mempoolError', 'center');
+              }
+            });
+          }
+        });
+
+        this.cashappSubmit = await renderPromise;
+      }
+    );
+  }
+
+  insertSquare(): void {
+    let statsUrl = 'https://sandbox.web.squarecdn.com/v1/square.js';
+    if (document.location.hostname === 'mempool-staging.tk7.mempool.space' || document.location.hostname === 'mempool.space') {
+      statsUrl = 'https://web.squarecdn.com/v1/square.js';
+    }
+
+    (function() {
+      const d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+      // @ts-ignore
+      g.type='text/javascript'; g.src=statsUrl; s.parentNode.insertBefore(g, s);
+    })();
+  }
+
+  submitCashappPay(): void {
+    if (this.cashappSubmit) {
+      this.cashappSubmit?.begin();
+    }
+  }
+
+  @HostListener('window:scroll', ['$event']) // for window scroll events
+  onScroll() {
+    if (this.estimate && this.user && !this.cashappCTA?.nativeElement) {
+      setTimeout(() => {
+        this.onScroll();
+      }, 200);
+      return;
+    }
+    if (!this.cashappCTA?.nativeElement || this.paymentType !== 'cashapp' || !this.isMobile) {
+      return;
+    }
+    const cta = this.cashappCTA.nativeElement;
+    const rect = cta.getBoundingClientRect();
+    const topOffset = window.innerWidth <= 572 ? 102 : 62;
+    const bottomOffset = window.innerWidth < 430 ? 50 : 56;
+    if (rect.top < topOffset) {
+      this.stickyCTA = 'sticky-top';
+    } else if (rect.top > window.innerHeight - (bottomOffset + 54)) {
+      this.stickyCTA = 'sticky-bottom';
+    } else {
+      this.stickyCTA = 'non-stick';
+    }
+  }
 }
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
@@ -1,5 +1,5 @@
 <div class="container-lg widget-container" [class.widget]="widget" [class.full-height]="!widget">
-  <h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Accelerations</h1>
+  <h1 *ngIf="!widget" class="float-left" i18n="accelerator.accelerations">Accelerations</h1>
  <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>

  <div class="clearfix"></div>
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@@ -38,7 +38,7 @@
      <div class="card">
        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
          <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
-            <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-accelerations">Mempool Goggles: Accelerations</h5>
+            <h5 class="card-title d-inline">Mempool Goggles&trade; : <ng-container i18n="accelerator.accelerations">Accelerations</ng-container></h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
          </a>
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -11,9 +11,10 @@ import TxView from '../../block-overview-graph/tx-view';
 import { feeLevels, mempoolFeeColors } from '../../../app.constants';
 import { ServicesApiServices } from '../../../services/services-api.service';
 import { detectWebGL } from '../../../shared/graphs.utils';
+import { AudioService } from '../../../services/audio.service';

 const acceleratedColor: Color = hexToColor('8F5FF6');
-const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const normalColors = mempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F'));

 interface AccelerationBlock extends BlockExtended {
  accelerationCount: number,
@@ -32,6 +33,8 @@ export class AcceleratorDashboardComponent implements OnInit {
  minedAccelerations$: Observable<Acceleration[]>;
  loadingBlocks: boolean = true;
  webGlEnabled = true;
+  seen: Set<string> = new Set();
+  firstLoad = true;

  graphHeight: number = 300;

@@ -40,6 +43,7 @@ export class AcceleratorDashboardComponent implements OnInit {
    private ogService: OpenGraphService,
    private websocketService: WebsocketService,
    private serviceApiServices: ServicesApiServices,
+    private audioService: AudioService,
    private stateService: StateService,
    @Inject(PLATFORM_ID) private platformId: Object,
  ) {
@@ -61,6 +65,15 @@ export class AcceleratorDashboardComponent implements OnInit {
          }),
        );
      }),
+      tap(accelerations => {
+        if (!this.firstLoad && accelerations.some(acc => !this.seen.has(acc.txid))) {
+          this.audioService.playSound('bright-harmony');
+        }
+        for(const acc of accelerations) {
+          this.seen.add(acc.txid);
+        }
+        this.firstLoad = false;
+      }),
      share(),
    );

--- a/frontend/src/app/components/address-graph/address-graph.component.ts
+++ b/frontend/src/app/components/address-graph/address-graph.component.ts
@@ -6,6 +6,7 @@ import { ChainStats } from '../../interfaces/electrs.interface';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
 import { Router } from '@angular/router';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';

@Component({
  selector: 'app-address-graph',
@@ -46,6 +47,7 @@ export class AddressGraphComponent implements OnChanges {
    private router: Router,
    private amountShortenerPipe: AmountShortenerPipe,
    private cd: ChangeDetectorRef,
+    private relativeUrlPipe: RelativeUrlPipe,
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
@@ -122,7 +124,7 @@ export class AddressGraphComponent implements OnChanges {
              </div>
              <span>${date}</span>
            </div>
-          `; 
+          `;
        }.bind(this)
      },
      xAxis: {
@@ -178,7 +180,7 @@ export class AddressGraphComponent implements OnChanges {

  onChartClick(e) {
    if (this.hoverData?.length && this.hoverData[0]?.[2]?.txid) {
-      this.router.navigate(['/tx/', this.hoverData[0][2].txid]);
+      this.router.navigate([this.relativeUrlPipe.transform('/tx/'), this.hoverData[0][2].txid]);
    }
  }

--- a/frontend/src/app/components/amount/amount.component.html
+++ b/frontend/src/app/components/amount/amount.component.html
@@ -20,8 +20,7 @@
  <ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
    <span i18n="shared.confidential">Confidential</span>
  </ng-template>
-  <ng-template #default>
-    &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
+  <ng-template #default>&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
    <span class="symbol"><ng-template [ngIf]="network === 'liquid' && !forceBtc">L-</ng-template>
    <ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
    <ng-template [ngIf]="network === 'testnet'">t</ng-template>
--- a/frontend/src/app/components/block-filters/block-filters.component.html
+++ b/frontend/src/app/components/block-filters/block-filters.component.html
@@ -1,10 +1,10 @@
 <div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.any-mode]="filterMode === 'or'" [class.menu-open]="menuOpen" [class.small]="cssWidth < 500" [class.vsmall]="cssWidth < 400" [class.tiny]="cssWidth < 200">
-  <a *ngIf="menuOpen" [routerLink]="['/docs/faq' | relativeUrl]" fragment="how-do-mempool-goggles-work" class="info-badges" i18n-ngbTooltip="Mempool Goggles tooltip" ngbTooltip="select filter categories to highlight matching transactions">
+  <a *ngIf="menuOpen" [routerLink]="['/docs/faq' | relativeUrl]" fragment="how-do-mempool-goggles-work" class="info-badges" i18n-ngbTooltip="Mempool Goggles&trade; tooltip" ngbTooltip="select filter categories to highlight matching transactions">
    <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span>
    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="lg"></fa-icon>
  </a>
  <div class="filter-bar">
-    <button class="menu-toggle" (click)="menuOpen = !menuOpen" title="Mempool Goggles">
+    <button class="menu-toggle" (click)="menuOpen = !menuOpen" title="Mempool Goggles&trade;">
      <app-svg-images name="goggles" width="100%" height="100%"></app-svg-images>
    </button>
    <div class="active-tags">
@@ -14,14 +14,29 @@
    </div>
  </div>
  <div class="filter-menu" *ngIf="menuOpen && cssWidth > 280">
-    <h5>Match</h5>
-    <div class="btn-group btn-group-toggle">
-      <label class="btn btn-xs blue mode-toggle" [class.active]="filterMode === 'and'">
-        <input type="radio" [value]="'all'" fragment="all" (click)="setFilterMode('and')">All
-      </label>
-      <label class="btn btn-xs green mode-toggle" [class.active]="filterMode === 'or'">
-        <input type="radio" [value]="'any'" fragment="any" (click)="setFilterMode('or')">Any
-      </label>
+    <div class="filter-row">
+      <div class="filter-element">
+        <h5 i18n="mempool-goggles.match">Match</h5>
+        <div class="btn-group btn-group-toggle">
+          <label class="btn btn-xs blue mode-toggle" [class.active]="filterMode === 'and'">
+            <input type="radio" [value]="'all'" fragment="all" (click)="setFilterMode('and')"><ng-container i18n>All</ng-container>
+          </label>
+          <label class="btn btn-xs green mode-toggle" [class.active]="filterMode === 'or'">
+            <input type="radio" [value]="'any'" fragment="any" (click)="setFilterMode('or')"><ng-container i18n="mempool-goggles.any">Any</ng-container>
+          </label>
+        </div>
+      </div>
+      <div class="filter-element">
+        <h5 i18n="mempool-goggles.tint">Tint</h5>
+        <div class="btn-group btn-group-toggle">
+          <label class="btn btn-xs yellow mode-toggle" [class.active]="gradientMode === 'fee'">
+            <input type="radio" [value]="'fee'" fragment="classic" (click)="setGradientMode('fee')"><ng-container i18n="mempool-goggles.classic">Classic</ng-container>
+          </label>
+          <label class="btn btn-xs blue mode-toggle" [class.active]="gradientMode === 'age'">
+            <input type="radio" [value]="'age'" fragment="age" (click)="setGradientMode('age')"><ng-container i18n="mempool-goggles.age">Age</ng-container>
+          </label>
+        </div>
+      </div>
    </div>
    <ng-container *ngFor="let group of filterGroups;">
      <h5>{{ group.label }}</h5>
--- a/frontend/src/app/components/block-filters/block-filters.component.scss
+++ b/frontend/src/app/components/block-filters/block-filters.component.scss
@@ -45,6 +45,13 @@
  }

  .filter-menu {
+    .filter-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: start;
+      align-items: baseline;
+    }
+
    h5 {
      font-size: 0.8rem;
      color: white;
@@ -118,6 +125,12 @@
        background: #1a9436;
      }
    }
+    &.yellow {
+      border: solid 1px #bf7815;
+      &.active {
+        background: #bf7815;
+      }
+    }
  }

  :host-context(.block-overview-graph:hover) &, &:hover, &:active {
--- a/frontend/src/app/components/block-filters/block-filters.component.ts
+++ b/frontend/src/app/components/block-filters/block-filters.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit, OnDestroy } from '@angular/core';
-import { ActiveFilter, FilterGroups, FilterMode, TransactionFilters } from '../../shared/filters.utils';
+import { ActiveFilter, FilterGroups, FilterMode, GradientMode, TransactionFilters } from '../../shared/filters.utils';
 import { StateService } from '../../services/state.service';
 import { Subscription } from 'rxjs';

@@ -22,6 +22,7 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
  activeFilters: string[] = [];
  filterFlags: { [key: string]: boolean } = {};
  filterMode: FilterMode = 'and';
+  gradientMode: GradientMode = 'fee';
  menuOpen: boolean = false;

  constructor(
@@ -32,6 +33,7 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
  ngOnInit(): void {
    this.filterSubscription = this.stateService.activeGoggles$.subscribe((active: ActiveFilter) => {
      this.filterMode = active.mode;
+      this.gradientMode = active.gradient;
      for (const key of Object.keys(this.filterFlags)) {
        this.filterFlags[key] = false;
      }
@@ -39,7 +41,7 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
        this.filterFlags[key] = !this.disabledFilters[key];
      }
      this.activeFilters = [...active.filters.filter(key => !this.disabledFilters[key])];
-      this.onFilterChanged.emit({ mode: active.mode, filters: this.activeFilters });
+      this.onFilterChanged.emit({ mode: active.mode, filters: this.activeFilters, gradient: this.gradientMode });
    });
  }

@@ -57,8 +59,14 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {

  setFilterMode(mode): void {
    this.filterMode = mode;
-    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters });
-    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters] });
+    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters, gradient: this.gradientMode });
+    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters], gradient: this.gradientMode });
+  }
+
+  setGradientMode(mode): void {
+    this.gradientMode = mode;
+    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters, gradient: this.gradientMode });
+    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters], gradient: this.gradientMode });
  }

  toggleFilter(key): void {
@@ -81,8 +89,8 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
      this.activeFilters = this.activeFilters.filter(f => f != key);
    }
    const booleanFlags = this.getBooleanFlags();
-    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters });
-    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters] });
+    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters, gradient: this.gradientMode });
+    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters], gradient: this.gradientMode });
  }
  
  getBooleanFlags(): bigint | null {
--- 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
@@ -8,14 +8,11 @@ import { Color, Position } from './sprite-types';
 import { Price } from '../../services/price.service';
 import { StateService } from '../../services/state.service';
 import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils';
+import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction } from './utils';
 import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
 import { detectWebGL } from '../../shared/graphs.utils';

 const unmatchedOpacity = 0.2;
-const unmatchedFeeColors = defaultFeeColors.map(c => setOpacity(c, unmatchedOpacity));
-const unmatchedAuditFeeColors = defaultAuditFeeColors.map(c => setOpacity(c, unmatchedOpacity));
-const unmatchedMarginalFeeColors = defaultMarginalFeeColors.map(c => setOpacity(c, unmatchedOpacity));
 const unmatchedAuditColors = {
  censored: setOpacity(defaultAuditColors.censored, unmatchedOpacity),
  missing: setOpacity(defaultAuditColors.missing, unmatchedOpacity),
@@ -46,6 +43,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  @Input() excludeFilters: string[] = [];
  @Input() filterFlags: bigint | null = null;
  @Input() filterMode: FilterMode = 'and';
+  @Input() gradientMode: 'fee' | 'age' = 'fee';
  @Input() relativeTime: number | null;
  @Input() blockConversion: Price;
  @Input() overrideColors: ((tx: TxView) => Color) | null = null;
@@ -121,21 +119,22 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
      this.setHighlightingEnabled(this.auditHighlighting);
    }
    if (changes.overrideColor && this.scene) {
-      this.scene.setColorFunction(this.overrideColors);
+      this.scene.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
    }
-    if ((changes.filterFlags || changes.showFilters || changes.filterMode)) {
+    if ((changes.filterFlags || changes.showFilters || changes.filterMode || changes.gradientMode)) {
      this.setFilterFlags();
    }
  }

  setFilterFlags(goggle?: ActiveFilter): void {
    this.filterMode = goggle?.mode || this.filterMode;
+    this.gradientMode = goggle?.gradient || this.gradientMode;
    this.activeFilterFlags = goggle?.filters ? toFlags(goggle.filters) : this.filterFlags;
    if (this.scene) {
      if (this.activeFilterFlags != null && this.filtersAvailable) {
-        this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags));
+        this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode));
      } else {
-        this.scene.setColorFunction(this.overrideColors);
+        this.scene.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
      }
    }
    this.start();
@@ -212,6 +211,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
      remove = remove.filter(txid => this.scene.txs[txid]);
      change = change.filter(tx => this.scene.txs[tx.txid]);

+      if (this.gradientMode === 'age') {
+        this.scene.updateAllColors();
+      }
      this.scene.update(add, remove, change, direction, resetLayout);
      this.start();
      this.updateSearchHighlight();
@@ -547,26 +549,27 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  }

  getColorFunction(): ((tx: TxView) => Color) {
-    if (this.filterFlags) {
-      return this.getFilterColorFunction(this.filterFlags);
-    } else if (this.activeFilterFlags) {
-      return this.getFilterColorFunction(this.activeFilterFlags);
-    } else {
+    if (this.overrideColors) {
      return this.overrideColors;
+    } else if (this.filterFlags) {
+      return this.getFilterColorFunction(this.filterFlags, this.gradientMode);
+    } else if (this.activeFilterFlags) {
+      return this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode);
+    } else {
+      return this.getFilterColorFunction(0n, this.gradientMode);
    }
  }

-  getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
+  getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
    return (tx: TxView) => {
      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
-        return defaultColorFunction(tx);
+        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 defaultColorFunction(
+        return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
          tx,
-          unmatchedFeeColors,
-          unmatchedAuditFeeColors,
-          unmatchedMarginalFeeColors,
-          unmatchedAuditColors
+          defaultColors.unmatchedfee,
+          unmatchedAuditColors,
+          this.relativeTime || (Date.now() / 1000)
        );
      }
    };
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -68,6 +68,10 @@ export default class BlockScene {

  setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void {
    this.getColor = colorFunction || defaultColorFunction;
+    this.updateAllColors();
+  }
+
+  updateAllColors(): void {
    this.dirty = true;
    if (this.initialised && this.scene) {
      this.updateColors(performance.now(), 50);
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@@ -37,10 +37,36 @@ export function setOpacity(color: Color, opacity: number): Color {
  };
 }

+interface ColorPalette {
+  base: Color[],
+  audit: Color[],
+  marginal: Color[],
+  baseLevel: (tx: TxView, rate: number, time: number) => number,
+}
+
 // precomputed colors
-export const defaultFeeColors = mempoolFeeColors.map(hexToColor);
-export const defaultAuditFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
-export const defaultMarginalFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1));
+const defaultColors: { [key: string]: ColorPalette } = {
+  fee: {
+    base: mempoolFeeColors.map(hexToColor),
+    audit: [],
+    marginal: [],
+    baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
+  },
+}
+for (const key in defaultColors) {
+  const base = defaultColors[key].base;
+  defaultColors[key].audit = base.map((color) => darken(desaturate(color, 0.3), 0.9));
+  defaultColors[key].marginal = base.map((color) => darken(desaturate(color, 0.8), 1.1));
+  defaultColors['unmatched' + key] = {
+    base: defaultColors[key].base.map(c => setOpacity(c, 0.2)),
+    audit: defaultColors[key].audit.map(c => setOpacity(c, 0.2)),
+    marginal: defaultColors[key].marginal.map(c => setOpacity(c, 0.2)),
+    baseLevel: defaultColors[key].baseLevel,
+  };
+}
+
+export { defaultColors as defaultColors };
+
 export const defaultAuditColors = {
  censored: hexToColor('f344df'),
  missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
@@ -51,22 +77,21 @@ export const defaultAuditColors = {

 export function defaultColorFunction(
  tx: TxView,
-  feeColors: Color[] = defaultFeeColors,
-  auditFeeColors: Color[] = defaultAuditFeeColors,
-  marginalFeeColors: Color[] = defaultMarginalFeeColors,
-  auditColors: { [status: string]: Color } = defaultAuditColors
+  colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee,
+  auditColors: { [status: string]: Color } = defaultAuditColors,
+  relativeTime?: number,
 ): Color {
  const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
-  const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-  const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
+  const levelIndex = colors.baseLevel(tx, rate, relativeTime || (Date.now() / 1000));
+  const levelColor = colors.base[levelIndex] || colors.base[mempoolFeeColors.length - 1];
  // Normal mode
  if (!tx.scene?.highlightingEnabled) {
    if (tx.acc) {
      return auditColors.accelerated;
    } else {
-      return feeLevelColor;
+      return levelColor;
    }
-    return feeLevelColor;
+    return levelColor;
  }
  // Block audit
  switch(tx.status) {
@@ -75,7 +100,7 @@ export function defaultColorFunction(
    case 'missing':
    case 'sigop':
    case 'rbf':
-      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      return colors.marginal[levelIndex] || colors.marginal[mempoolFeeColors.length - 1];
    case 'fresh':
    case 'freshcpfp':
      return auditColors.missing;
@@ -84,20 +109,41 @@ export function defaultColorFunction(
    case 'prioritized':
      return auditColors.prioritized;
    case 'selected':
-      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      return colors.marginal[levelIndex] || colors.marginal[mempoolFeeColors.length - 1];
    case 'accelerated':
      return auditColors.accelerated;
    case 'found':
      if (tx.context === 'projected') {
-        return auditFeeColors[feeLevelIndex] || auditFeeColors[mempoolFeeColors.length - 1];
+        return colors.audit[levelIndex] || colors.audit[mempoolFeeColors.length - 1];
      } else {
-        return feeLevelColor;
+        return levelColor;
      }
    default:
      if (tx.acc) {
        return auditColors.accelerated;
      } else {
-        return feeLevelColor;
+        return levelColor;
      }
  }
+}
+
+export function ageColorFunction(
+  tx: TxView,
+  colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee,
+  auditColors: { [status: string]: Color } = defaultAuditColors,
+  relativeTime?: number,
+): Color {
+  if (tx.acc || tx.status === 'accelerated') {
+    return auditColors.accelerated;
+  }
+
+  const color = defaultColorFunction(tx, colors, auditColors, relativeTime); 
+
+  const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
+  return {
+    r: color.r,
+    g: color.g,
+    b: color.b,
+    a: color.a * (1 - ageLevel)
+  };
 }
--- a/frontend/src/app/components/block/block-preview.component.html
+++ b/frontend/src/app/components/block/block-preview.component.html
@@ -53,13 +53,13 @@
            <td i18n="block.miner">Miner</td>
            <td *ngIf="stateService.env.MINING_DASHBOARD">
              <a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
-                [class]="!block?.extras.pool.name || block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                [class]="!block?.extras.pool.name || block?.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
                {{ block?.extras.pool.name }}
              </a>
            </td>
            <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
              <span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
-                [class]="!block?.extras.pool.name || block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                [class]="!block?.extras.pool.name || block?.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
                {{ block?.extras.pool.name }}
            </span>
            </td>
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -182,13 +182,13 @@
        <td i18n="block.miner">Miner</td>
        <td *ngIf="stateService.env.MINING_DASHBOARD">
          <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
-            [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+            [class]="block.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
            {{ block.extras.pool.name }}
          </a>
        </td>
        <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
          <span placement="bottom" class="badge"
-            [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+            [class]="block.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
            {{ block.extras.pool.name }}
        </span>
        </td>
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/frontend/src/app/components/master-page/master-page.component.ts
@@ -7,7 +7,6 @@ import { EnterpriseService } from '../../services/enterprise.service';
 import { NavigationService } from '../../services/navigation.service';
 import { MenuComponent } from '../menu/menu.component';
 import { StorageService } from '../../services/storage.service';
-import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-master-page',
@@ -45,7 +44,6 @@ export class MasterPageComponent implements OnInit, OnDestroy {
    private enterpriseService: EnterpriseService,
    private navigationService: NavigationService,
    private storageService: StorageService,
-    private apiService: ApiService,
    private router: Router,
  ) { }

--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
@@ -8,6 +8,7 @@
  [showFilters]="showFilters"
  [filterFlags]="filterFlags"
  [filterMode]="filterMode"
+  [gradientMode]="gradientMode"
  [excludeFilters]="['nonstandard']"
  [overrideColors]="overrideColors"
  (txClickEvent)="onTxClick($event)"
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -11,7 +11,7 @@ import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pi
 import { Router } from '@angular/router';
 import { Color } from '../block-overview-graph/sprite-types';
 import TxView from '../block-overview-graph/tx-view';
-import { FilterMode } from '../../shared/filters.utils';
+import { FilterMode, GradientMode } from '../../shared/filters.utils';

@Component({
  selector: 'app-mempool-block-overview',
@@ -25,6 +25,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
  @Input() overrideColors: ((tx: TxView) => Color) | null = null;
  @Input() filterFlags: bigint | undefined = undefined;
  @Input() filterMode: FilterMode = 'and';
+  @Input() gradientMode: GradientMode = 'fee';
  @Output() txPreviewEvent = new EventEmitter<TransactionStripped | void>();

  @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@@ -5,8 +5,7 @@
  height: calc(100vh - 65px);
  position: absolute;
  top: 65px;
-  left: -250px;
-  transition: left 0.25s;
+  transition: 0.25s;
  box-shadow: 5px 0px 30px 0px #000;
  padding-bottom: 20px;
  @media (max-width: 613px) {
@@ -14,6 +13,14 @@
  }
 }

+:host-context(.ltr-layout) .sidenav {
+  left: -250px;
+}
+
+:host-context(.rtl-layout) .sidenav {
+  right: -250px;
+}
+
 .ellipsis {
  display: block;
  overflow: hidden;
@@ -26,11 +33,18 @@
 }

 .sidenav.open {
-  left: 0px;
  display: block;
  background-color: #1d1f31;
 }

+:host-context(.ltr-layout) .sidenav.open {
+  left: 0;
+}
+
+:host-context(.rtl-layout) .sidenav.open {
+  right: 0;
+}
+
 .sidenav a, button{
  text-decoration: none;
  color: lightgray;
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -175,13 +175,15 @@ export class PoolRankingComponent implements OnInit {
      } as PieSeriesOption);
    });

+    const percentage = totalShareOther.toFixed(2) + '%';
+
    // 'Other'
    data.push({
      itemStyle: {
        color: '#6b6b6b',
      },
      value: totalShareOther,
-      name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
+      name:  $localize`Other (${percentage})`,
      label: {
        overflow: 'none',
        color: '#b1b1b1',
@@ -197,7 +199,6 @@ export class PoolRankingComponent implements OnInit {
        },
        borderColor: '#000',
        formatter: () => {
-          const percentage = totalShareOther.toFixed(2) + '%';
          const i = totalBlockOther.toString();
          if (this.miningWindowPreference === '24h') {
            return `<b style="color: white">` + $localize`Other (${percentage})` + `</b><br>` +
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -40,72 +40,49 @@
  </div>
  <div class="clearfix"></div>

-  <ng-template [ngIf]="!isLoadingTx && !error">
-
-    <ng-template [ngIf]="tx?.status?.confirmed" [ngIfElse]="unconfirmedTemplate">
-
-      <div class="box">
-        <div class="row">
+  @if (!error) {
+    <div class="box">
+      <div class="row">
+        @if (isMobile) {
          <div class="col-sm">
            <table class="table table-borderless table-striped">
              <tbody>
-                <tr>
-                  <td i18n="block.timestamp">Timestamp</td>
-                  <td>
-                    &lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
-                    <div class="lg-inline">
-                      <i class="symbol">(<app-time kind="since" [time]="tx.status.block_time" [fastRender]="true"></app-time>)</i>
-                    </div>
-                  </td>
-                </tr>
-                <ng-template [ngIf]="transactionTime > 0">
-                  <tr>
-                    <td i18n="transaction.confirmed|Transaction Confirmed state">Confirmed</td>
-                    <td><app-time kind="span" [time]="tx.status.block_time - transactionTime" [fastRender]="true" [relative]="true"></app-time></td>
-                  </tr>
-                </ng-template>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet' && featuresEnabled">
-                  <td class="td-width" i18n="transaction.features|Transaction features">Features</td>
-                  <td>
-                    <app-tx-features [tx]="tx"></app-tx-features>
-                  </td>
-                </tr>
-                <tr *ngIf="network === '' && auditStatus">
-                  <td class="td-width" i18n="block.toggle-audit|Toggle Audit">Audit</td>
-                  <td *ngIf="pool" class="wrap-cell">
-                    <ng-container>
-                      <span *ngIf="auditStatus.coinbase; else expected" class="badge badge-primary mr-1" i18n="transactions-list.coinbase">Coinbase</span>
-                      <ng-template #expected><span *ngIf="auditStatus.expected; else seen" class="badge badge-success mr-1" i18n-ngbTooltip="Expected in block tooltip" ngbTooltip="This transaction was projected to be included in the block" placement="bottom" i18n="tx-features.tag.expected|Expected in Block">Expected in Block</span></ng-template>
-                      <ng-template #seen><span *ngIf="auditStatus.seen; else notSeen" class="badge badge-success mr-1" i18n-ngbTooltip="Seen in mempool tooltip" ngbTooltip="This transaction was seen in the mempool prior to mining" placement="bottom" i18n="tx-features.tag.seen|Seen in Mempool">Seen in Mempool</span></ng-template>
-                      <ng-template #notSeen><span *ngIf="!auditStatus.conflict" class="badge badge-warning mr-1" i18n-ngbTooltip="Not seen in mempool tooltip" ngbTooltip="This transaction was missing from our mempool prior to mining" placement="bottom" i18n="tx-features.tag.not-seen|Not seen in Mempool">Not seen in Mempool</span></ng-template>
-                      <span *ngIf="auditStatus.added" class="badge badge-warning mr-1" i18n-ngbTooltip="Added transaction tooltip" ngbTooltip="This transaction may have been added out-of-band" placement="bottom" i18n="tx-features.tag.added|Added">Added</span>
-                      <span *ngIf="auditStatus.prioritized" class="badge badge-warning mr-1" i18n-ngbTooltip="Prioritized transaction tooltip" ngbTooltip="This transaction may have been prioritized out-of-band" placement="bottom" i18n="tx-features.tag.prioritized|Prioritized">Prioritized</span>
-                      <span *ngIf="auditStatus.conflict" class="badge badge-warning mr-1" i18n-ngbTooltip="Conflict in mempool tooltip" ngbTooltip="This transaction conflicted with another version in our mempool" placement="bottom" i18n="tx-features.tag.conflict|Conflict">Conflict</span>
-                    </ng-container>
-                  </td>
-                  <td *ngIf="!pool">
-                    <span class="skeleton-loader"></span>
-                  </td>
-                </tr>
-                <ng-container *ngTemplateOutlet="goggles"></ng-container>
+                  <ng-container *ngTemplateOutlet="detailsLeft"></ng-container>
+                  <ng-container *ngTemplateOutlet="detailsRight"></ng-container>
+              </tbody>
+            </table>
+          </div>
+        } @else {
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                  <ng-container *ngTemplateOutlet="detailsLeft"></ng-container>
              </tbody>
            </table>
          </div>
          <div class="col-sm">
-            <ng-container *ngTemplateOutlet="feeTable"></ng-container>
+            <table class="table table-borderless table-striped">
+              <tbody>
+                  <ng-container *ngTemplateOutlet="detailsRight"></ng-container>
+              </tbody>
+            </table>
          </div>
-        </div>
+        }
      </div>
+    </div>
+  }

-    </ng-template>
+  <ng-template [ngIf]="!isLoadingTx && !error">

    <!-- Accelerator -->
    <ng-container *ngIf="!tx?.status?.confirmed && showAccelerationSummary">
      <br>
      <div class="title float-left">
-        <h2>Accelerate</h2>
+        <h2 i18n="transaction.accelerate|Accelerate button label">Accelerate</h2>
      </div>
-      <button type="button" class="btn btn-outline-info accelerator-toggle btn-sm float-right" (click)="showAccelerationSummary = false" i18n="hide-accelerator">Hide accelerator</button>
+      @if (!(isMobile && paymentType === 'cashapp')) {
+        <button type="button" class="btn btn-outline-info accelerator-toggle btn-sm float-right" (click)="showAccelerationSummary = false" i18n="hide-accelerator">Hide accelerator</button>
+      }
      <div class="clearfix"></div>

      <div class="box">
@@ -113,69 +90,6 @@
      </div>
    </ng-container>

-    <ng-template #unconfirmedTemplate>
-
-      <div class="box">
-        <div class="row">
-          <div class="col-sm">
-            <table class="table table-borderless table-striped">
-              <tbody>
-                <ng-template [ngIf]="transactionTime !== 0">
-                  <tr *ngIf="transactionTime === -1; else firstSeenTmpl">
-                    <td><span class="skeleton-loader"></span></td>
-                    <td><span class="skeleton-loader"></span></td>
-                  </tr>
-                  <ng-template #firstSeenTmpl>
-                    <tr>
-                      <td i18n="transaction.first-seen|Transaction first seen">First seen</td>
-                      <td><i><app-time kind="since" [time]="transactionTime" [fastRender]="true"></app-time></i></td>
-                    </tr>
-                  </ng-template>
-                </ng-template>
-                <tr *ngIf="!replaced && !isCached">
-                  <td class="td-width align-items-center align-middle" i18n="transaction.eta|Transaction ETA">ETA</td>
-                  <td>
-                    <ng-template [ngIf]="this.mempoolPosition?.block == null" [ngIfElse]="estimationTmpl">
-                      <span class="skeleton-loader"></span>
-                    </ng-template>
-                    <ng-template #estimationTmpl>
-                      <ng-template [ngIf]="this.mempoolPosition.block >= 7" [ngIfElse]="belowBlockLimit">
-                        <span [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
-                          <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
-                          <a *ngIf="!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
-                        </span>
-                      </ng-template>
-                      <ng-template #belowBlockLimit>
-                        <ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeEstimateDefault">
-                          <app-time kind="until" [time]="(60 * 1000 * this.mempoolPosition.block) + now" [fastRender]="false" [fixedRender]="true"></app-time>
-                        </ng-template>
-                        <ng-template #timeEstimateDefault>
-                          <span class="eta justify-content-end" [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'd-flex align-items-center' : ''">
-                            <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (this.mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
-                            <a *ngIf="!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
-                          </span>
-                        </ng-template>
-                      </ng-template>
-                    </ng-template>
-                  </td>
-                </tr>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'" id="acceleratePreviewAnchor">
-                  <td class="td-width" i18n="transaction.features|Transaction Features">Features</td>
-                  <td>
-                    <app-tx-features [tx]="tx"></app-tx-features>
-                  </td>
-                </tr>
-                <ng-container *ngTemplateOutlet="goggles"></ng-container>
-              </tbody>
-            </table>
-          </div>
-          <div class="col-sm">
-            <ng-container *ngTemplateOutlet="feeTable"></ng-container>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-
    <ng-template [ngIf]="showCpfpDetails">
      <br>

@@ -364,42 +278,7 @@
  </ng-template>

  <ng-template [ngIf]="(isLoadingTx && !error) || loadingCachedTx">
-
-    <div class="box">
-      <div class="row">
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td class="td-width"><span class="skeleton-loader"></span></td>
-                <td><span class="skeleton-loader"></span></td>
-              </tr>
-              <tr>
-                <td><span class="skeleton-loader"></span></td>
-                <td><span class="skeleton-loader"></span></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td class="td-width"><span class="skeleton-loader"></span></td>
-                <td><span class="skeleton-loader"></span></td>
-              </tr>
-              <tr>
-                <td><span class="skeleton-loader"></span></td>
-                <td><span class="skeleton-loader"></span></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
    <br>
-
    <ng-container *ngIf="flowEnabled">
      <div class="title">
        <h2 i18n="transaction.flow|Transaction flow">Flow</h2>
@@ -525,65 +404,264 @@

 </div>

-<ng-template #feeTable>
-  <table class="table table-borderless table-striped">
-    <tbody>
-      <tr *ngIf="isMobile && (network === 'liquid' || network === 'liquidtestnet' || !featuresEnabled || network === '')"></tr>
+<ng-template #detailsLeft>
+  @if (tx?.status?.confirmed) {
+    <ng-container *ngTemplateOutlet="timestampRow"></ng-container>
+    <ng-container *ngTemplateOutlet="confirmedAfterRow"></ng-container>
+  } @else {
+    <ng-container *ngTemplateOutlet="firstSeenRow"></ng-container>
+    <ng-container *ngTemplateOutlet="etaRow"></ng-container>
+  }
+  <ng-container *ngTemplateOutlet="featuresRow"></ng-container>
+  @if (tx?.status?.confirmed) {
+    <ng-container *ngTemplateOutlet="auditRow"></ng-container>
+  }
+  <ng-container *ngTemplateOutlet="gogglesRow"></ng-container>
+</ng-template>
+
+<ng-template #detailsRight>
+  <ng-container *ngTemplateOutlet="feeRow"></ng-container>
+  <ng-container *ngTemplateOutlet="feeRateRow"></ng-container>
+  <ng-container *ngTemplateOutlet="effectiveRateRow"></ng-container>
+  @if (tx?.status?.confirmed) {
+    <ng-container *ngTemplateOutlet="minerRow"></ng-container>
+  }
+</ng-template>
+
+<ng-template #timestampRow>
+  @if (!isLoadingTx) {
+    <tr>
+      <td i18n="block.timestamp">Timestamp</td>
+      <td>
+        &lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
+        <div class="lg-inline">
+          <i class="symbol">(<app-time kind="since" [time]="tx.status.block_time" [fastRender]="true"></app-time>)</i>
+        </div>
+      </td>
+    </tr>
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
+</ng-template>
+
+<ng-template #confirmedAfterRow>
+  @if (!isLoadingTx) {
+    @if (transactionTime > 0) {
      <tr>
-        <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
-        <td>{{ 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></td>
+        <td i18n="transaction.confirmed|Transaction Confirmed state">Confirmed</td>
+        <td><app-time kind="span" [time]="tx.status.block_time - transactionTime" [fastRender]="true" [relative]="true"></app-time></td>
      </tr>
+    }
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
+</ng-template>
+
+<ng-template #firstSeenRow>
+  @if (!isLoadingTx && transactionTime !== -1) {
+    <tr>
+      <td i18n="transaction.first-seen|Transaction first seen">First seen</td>
+      <td><i><app-time kind="since" [time]="transactionTime" [fastRender]="true"></app-time></i></td>
+    </tr>
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
+</ng-template>
+
+<ng-template #featuresRow>
+  @if (network !== 'liquid' && network !== 'liquidtestnet') {
+    @if (!isLoadingTx) {
+      @if (featuresEnabled) {
+        <tr>
+          <td class="td-width" i18n="transaction.features|Transaction features" id="acceleratePreviewAnchor">Features</td>
+          <td>
+            <app-tx-features [tx]="tx"></app-tx-features>
+          </td>
+        </tr>
+      }
+    } @else {
+      <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+    }
+  }
+</ng-template>
+
+<ng-template #auditRow>
+  @if (network === '') {
+    @if (!isLoadingTx) {
+      @if (auditStatus) {
+        <tr>
+          <td class="td-width" i18n="block.toggle-audit|Toggle Audit">Audit</td>
+          <td class="wrap-cell">
+            <ng-container>
+              @if (auditStatus.coinbase) {
+                <span class="badge badge-primary mr-1" i18n="transactions-list.coinbase">Coinbase</span>
+              } @else if (auditStatus.expected) {
+                <span class="badge badge-success mr-1" i18n-ngbTooltip="Expected in block tooltip" ngbTooltip="This transaction was projected to be included in the block" placement="bottom" i18n="tx-features.tag.expected|Expected in Block">Expected in Block</span>
+              } @else if (auditStatus.seen) {
+                <span class="badge badge-success mr-1" i18n-ngbTooltip="Seen in mempool tooltip" ngbTooltip="This transaction was seen in the mempool prior to mining" placement="bottom" i18n="tx-features.tag.seen|Seen in Mempool">Seen in Mempool</span>
+              } @else if (!auditStatus.conflict) {
+                <span class="badge badge-warning mr-1" i18n-ngbTooltip="Not seen in mempool tooltip" ngbTooltip="This transaction was missing from our mempool prior to mining" placement="bottom" i18n="tx-features.tag.not-seen|Not seen in Mempool">Not seen in Mempool</span>
+              }
+              @if (auditStatus.added) {
+                <span class="badge badge-warning mr-1" i18n-ngbTooltip="Added transaction tooltip" ngbTooltip="This transaction may have been added out-of-band" placement="bottom" i18n="tx-features.tag.added|Added">Added</span>
+              }
+              @if (auditStatus.prioritized) {
+                <span class="badge badge-warning mr-1" i18n-ngbTooltip="Prioritized transaction tooltip" ngbTooltip="This transaction may have been prioritized out-of-band" placement="bottom" i18n="tx-features.tag.prioritized|Prioritized">Prioritized</span>
+              }
+              @if (auditStatus.conflict) {
+                <span class="badge badge-warning mr-1" i18n-ngbTooltip="Conflict in mempool tooltip" ngbTooltip="This transaction conflicted with another version in our mempool" placement="bottom" i18n="tx-features.tag.conflict|Conflict">Conflict</span>
+              }
+            </ng-container>
+          </td>
+        </tr>
+      }
+    } @else {
+      <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+    }
+  }
+</ng-template>
+
+<ng-template #etaRow>
+  @if (!isLoadingTx) {
+    @if (!replaced && !isCached) {
      <tr>
-        <td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
+        <td class="td-width align-items-center align-middle" i18n="transaction.eta|Transaction ETA">ETA</td>
        <td>
-          <app-fee-rate [fee]="tx.feePerVsize"></app-fee-rate>
-          <ng-template [ngIf]="tx?.status?.confirmed">
-            &nbsp;
-            <app-tx-fee-rating *ngIf="tx.fee && !hasEffectiveFeeRate && !accelerationInfo" [tx]="tx"></app-tx-fee-rating>
-          </ng-template>
+          @if (this.mempoolPosition?.block == null) {
+            <span class="skeleton-loader"></span>
+          } @else if (this.mempoolPosition.block >= 7) {
+            <span [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
+              <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
+              @if (!(isMobile && paymentType === 'cashapp') && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
+                <a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+              }
+            </span>
+          } @else if (network === 'liquid' || network === 'liquidtestnet') {
+            <app-time kind="until" [time]="(60 * 1000 * this.mempoolPosition.block) + now" [fastRender]="false" [fixedRender]="true"></app-time>
+          } @else {
+            <span class="eta justify-content-end" [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'd-flex align-items-center' : ''">
+              <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (this.mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
+              @if (!(isMobile && paymentType === 'cashapp') && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
+                <a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+              }
+            </span>
+          }
        </td>
      </tr>
-      <tr *ngIf="(cpfpInfo && hasEffectiveFeeRate) || accelerationInfo">
-        <td *ngIf="tx.acceleration || accelerationInfo" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
-        <td *ngIf="!(tx.acceleration || accelerationInfo)" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
+    }
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
+</ng-template>
+
+<ng-template #gogglesRow>
+  @if (!isLoadingTx) {
+    @if (((auditStatus && auditStatus.accelerated) || accelerationInfo || (tx && tx.acceleration)) || filters.length) {
+      <tr>
+        <td class="td-width">
+          <span class="goggles-icon"><app-svg-images name="goggles" width="100%" height="100%"></app-svg-images></span>
+        </td>
+        <td class="wrap-cell">
+          @if ((auditStatus && auditStatus.accelerated) || accelerationInfo || (tx && tx.acceleration)) {
+            <span class="badge badge-accelerated mr-1" i18n="transaction.audit.accelerated">Accelerated</span>
+          }
+          <ng-container *ngFor="let filter of filters;">
+            <span class="badge badge-primary filter-tag mr-1">{{ filter.label }}</span>
+          </ng-container>
+        </td>
+      </tr>
+    }
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
+</ng-template>
+
+<ng-template #feeRow>
+  @if (!isLoadingTx) {
+    <tr>
+      <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
+      <td>{{ 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></td>
+    </tr>
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
+</ng-template>
+
+<ng-template #feeRateRow>
+  @if (!isLoadingTx) {
+    <tr>
+      <td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
+      <td>
+        <app-fee-rate [fee]="tx.feePerVsize"></app-fee-rate>
+        @if (tx?.status?.confirmed && tx.fee && !hasEffectiveFeeRate && !accelerationInfo) {
+          &nbsp;
+          <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
+        }
+      </td>
+    </tr>
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
+</ng-template>
+
+<ng-template #effectiveRateRow>
+  @if (!isLoadingTx) {
+    @if ((cpfpInfo && hasEffectiveFeeRate) || accelerationInfo) {
+      <tr>
+        @if (tx.acceleration || accelerationInfo) {
+          <td i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
+        } @else {
+          <td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
+        }
        <td>
          <div class="effective-fee-container">
-            <app-fee-rate *ngIf="accelerationInfo" [fee]="accelerationInfo.acceleratedFee" [weight]="accelerationInfo.effectiveVsize * 4"></app-fee-rate>
-            <app-fee-rate *ngIf="!accelerationInfo" [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
+            @if (accelerationInfo) {
+              <app-fee-rate [fee]="accelerationInfo.acceleratedFee" [weight]="accelerationInfo.effectiveVsize * 4"></app-fee-rate>
+            } @else {
+              <app-fee-rate [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
+            }

-            <ng-template [ngIf]="tx?.status?.confirmed || tx.acceleration || accelerationInfo">
-              <app-tx-fee-rating *ngIf="!(tx.acceleration || accelerationInfo) && (tx.fee || tx.effectiveFeePerVsize)" class="ml-2 mr-2 effective-fee-rating" [tx]="tx"></app-tx-fee-rating>
-            </ng-template>
+            @if (tx?.status?.confirmed && !tx.acceleration && !accelerationInfo && tx.fee && tx.effectiveFeePerVsize) {
+              <app-tx-fee-rating class="ml-2 mr-2 effective-fee-rating" [tx]="tx"></app-tx-fee-rating>
+            }
          </div>
-          <button *ngIf="cpfpInfo?.bestDescendant || cpfpInfo?.descendants?.length || cpfpInfo?.ancestors?.length" type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+          @if (hasCpfp) {
+            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+          }
        </td>
      </tr>
-      <tr *ngIf="network === '' && tx?.status?.confirmed">
-        <td class="td-width" i18n="block.miner">Miner</td>
-        <td *ngIf="pool" class="wrap-cell">
-          <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge mr-1"
-            [class]="pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-            {{ pool.name }}
-          </a>
-        </td>
-        <td *ngIf="!pool">
-          <span class="skeleton-loader"></span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+    }
+  } @else {
+    <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+  }
 </ng-template>

-<ng-template #goggles>
-  <tr *ngIf="((auditStatus && auditStatus.accelerated) || accelerationInfo || (tx && tx.acceleration)) || filters.length">
-    <td class="td-width">
-      <span class="goggles-icon"><app-svg-images name="goggles" width="100%" height="100%"></app-svg-images></span>
-    </td>
-    <td class="wrap-cell">
-      <span *ngIf="((auditStatus && auditStatus.accelerated) || accelerationInfo || (tx && tx.acceleration))" class="badge badge-accelerated mr-1" i18n="transaction.audit.accelerated">Accelerated</span>
-      <ng-container *ngFor="let filter of filters;">
-        <span class="badge badge-primary filter-tag mr-1">{{ filter.label }}</span>
-      </ng-container>
-    </td>
-  </tr>
+<ng-template #minerRow>
+  @if (network === '') {
+    @if (!isLoadingTx) {
+      <tr>
+        <td class="td-width" i18n="block.miner">Miner</td>
+        @if (pool) {
+          <td class="wrap-cell">
+            <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge mr-1"
+              [class]="pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
+              {{ pool.name }}
+            </a>
+          </td>
+        } @else {
+          <td>
+            <span class="skeleton-loader"></span>
+          </td>
+        }
+      </tr>
+    } @else {
+      <ng-container *ngTemplateOutlet="skeletonDetailsRow"></ng-container>
+    }
+  }
 </ng-template>
+
+<ng-template #skeletonDetailsRow>
+  <tr>
+    <td><span class="skeleton-loader"></span></td>
+  </tr>
+</ng-template>
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -311,6 +311,13 @@
  }
 }

+.accelerateFullSize {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem 0.25rem;
+  background-color: #653b9c;
+}
+
 .goggles-icon {
  display: block;
  width: 2.2em;
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -87,6 +87,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
  rbfReplaces: string[];
  rbfInfo: RbfTree;
  cpfpInfo: CpfpInfo | null;
+  hasCpfp: boolean = false;
  accelerationInfo: Acceleration | null = null;
  sigops: number | null;
  adjustedVsize: number | null;
@@ -116,6 +117,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
  flowEnabled: boolean;
  tooltipPosition: { x: number, y: number };
  isMobile: boolean;
+  paymentType: 'bitcoin' | 'cashapp' = 'bitcoin';
+  firstLoad = true;

  featuresEnabled: boolean;
  segwitEnabled: boolean;
@@ -153,6 +156,11 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
  ngOnInit() {
    this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';

+    if (this.acceleratorAvailable && this.stateService.ref === 'https://cash.app/') {
+      this.showAccelerationSummary = true;
+      this.paymentType = 'cashapp';
+    }
+
    this.enterpriseService.page();

    this.websocketService.want(['blocks', 'mempool-blocks']);
@@ -491,10 +499,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
                txFeePerVSize: tx.effectiveFeePerVsize,
                mempoolPosition: this.mempoolPosition,
              });
-              this.cpfpInfo = {
+              this.setCpfpInfo({
                ancestors: tx.ancestors,
                bestDescendant: tx.bestDescendant,
-              };
+              });
              const hasRelatives = !!(tx.ancestors?.length || tx.bestDescendant);
              this.hasEffectiveFeeRate = hasRelatives || (tx.effectiveFeePerVsize && (Math.abs(tx.effectiveFeePerVsize - tx.feePerVsize) > 0.01));
            } else {
@@ -646,6 +654,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
  setCpfpInfo(cpfpInfo: CpfpInfo): void {
    if (!cpfpInfo || !this.tx) {
      this.cpfpInfo = null;
+      this.hasCpfp = false;
      this.hasEffectiveFeeRate = false;
      return;
    }
@@ -675,6 +684,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
      this.sigops = this.cpfpInfo.sigops;
      this.adjustedVsize = this.cpfpInfo.adjustedVsize;
    }
+    this.hasCpfp =!!(this.cpfpInfo && (this.cpfpInfo.bestDescendant || this.cpfpInfo.descendants?.length || this.cpfpInfo.ancestors?.length));
    this.hasEffectiveFeeRate = hasRelatives || (this.tx.effectiveFeePerVsize && (Math.abs(this.tx.effectiveFeePerVsize - this.tx.feePerVsize) > 0.01));
  }

@@ -717,6 +727,11 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
  }

  resetTransaction() {
+    if (!this.firstLoad) {
+      this.stateService.ref = '';
+    } else {
+      this.firstLoad = false;
+    }
    this.error = undefined;
    this.tx = null;
    this.setFeatures();
@@ -811,6 +826,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
  }

  ngOnDestroy() {
+    this.stateService.ref = '';
    this.subscription.unsubscribe();
    this.fetchCpfpSubscription.unsubscribe();
    this.fetchRbfSubscription.unsubscribe();
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -18,7 +18,7 @@
      <div class="card graph-card">
        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
          <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
-            <h5 class="card-title d-inline"><span i18n="dashboard.mempool-goggles">Mempool Goggles</span>: {{ goggleCycle[goggleIndex].name }}</h5>
+            <h5 class="card-title d-inline"><span>Mempool Goggles&trade;</span> : {{ goggleCycle[goggleIndex].name }}</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
          </a>
@@ -35,6 +35,7 @@
              [resolution]="goggleResolution"
              [filterFlags]="goggleFlags"
              [filterMode]="goggleMode"
+              [gradientMode]="gradientMode"
            ></app-mempool-block-overview>
          </div>
        </div>
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -7,7 +7,7 @@ import { ApiService } from '../services/api.service';
 import { StateService } from '../services/state.service';
 import { WebsocketService } from '../services/websocket.service';
 import { SeoService } from '../services/seo.service';
-import { ActiveFilter, FilterMode, toFlags } from '../shared/filters.utils';
+import { ActiveFilter, FilterMode, GradientMode, toFlags } from '../shared/filters.utils';
 import { detectWebGL } from '../shared/graphs.utils';

 interface MempoolBlocksData {
@@ -74,14 +74,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
  private lastReservesBlockUpdate: number = 0;

  goggleResolution = 82;
-  goggleCycle: { index: number, name: string, mode: FilterMode, filters: string[] }[] = [
-    { index: 0, name: 'All', mode: 'and', filters: [] },
-    { index: 1, name: 'Consolidation', mode: 'and', filters: ['consolidation'] },
-    { index: 2, name: 'Coinjoin', mode: 'and', filters: ['coinjoin'] },
-    { index: 3, name: 'Data', mode: 'or', filters: ['inscription', 'fake_pubkey', 'op_return'] },
+  goggleCycle: { index: number, name: string, mode: FilterMode, filters: string[], gradient: GradientMode }[] = [
+    { index: 0, name: $localize`:@@dfc3c34e182ea73c5d784ff7c8135f087992dac1:All`, mode: 'and', filters: [], gradient: 'age' },
+    { index: 1, name: $localize`Consolidation`, mode: 'and', filters: ['consolidation'], gradient: 'fee' },
+    { index: 2, name: $localize`Coinjoin`, mode: 'and', filters: ['coinjoin'], gradient: 'fee' },
+    { index: 3, name: $localize`Data`, mode: 'or', filters: ['inscription', 'fake_pubkey', 'op_return'], gradient: 'fee' },
  ];
  goggleFlags = 0n;
  goggleMode: FilterMode = 'and';
+  gradientMode: GradientMode = 'age';
  goggleIndex = 0;

  private destroy$ = new Subject();
@@ -131,6 +132,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
            this.goggleIndex = goggle.index;
            this.goggleFlags = toFlags(goggle.filters);
            this.goggleMode = goggle.mode;
+            this.gradientMode = active.gradient;
            return;
          }
        }
@@ -140,6 +142,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
        name: 'Custom',
        mode: active.mode,
        filters: active.filters,
+        gradient: active.gradient,
      });
      this.goggleIndex = this.goggleCycle.length - 1;
      this.goggleFlags = toFlags(active.filters);
--- a/frontend/src/app/docs/api-docs/api-docs-data.ts
+++ b/frontend/src/app/docs/api-docs/api-docs-data.ts
@@ -9584,7 +9584,7 @@ export const faqData = [
    category: "advanced",
    showConditions: bitcoinNetworks,
    fragment: "how-do-mempool-goggles-work",
-    title: "How do Mempool Goggles work?",
+    title: "How do Mempool Goggles™ work?",
  },
  {
    type: "endpoint",
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.html
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.html
@@ -4,5 +4,5 @@
 </div>
 <div *ngFor="let item of tabData">
  <p *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ))">{{ item.title }}</p>
-  <a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled ) )" [routerLink]="['./']" fragment="{{ item.fragment }}" (click)="navLinkClick($event)">{{ item.title }}</a>
+  <a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled ) )" (click)="navLinkClick($event, item.fragment)">{{ item.title }}</a>
 </div>
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
@@ -10,6 +10,7 @@ a {
  text-decoration: none;
  display: block;
  margin: 5px 0;
+  cursor: pointer;
 }

 #enterprise-cta-desktop {
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.ts
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.ts
@@ -33,8 +33,9 @@ export class ApiDocsNavComponent implements OnInit {
    }
  }

-  navLinkClick(event) {
-    this.navLinkClickEvent.emit(event);
+  navLinkClick(event, fragment) {
+    event.preventDefault();
+    this.navLinkClickEvent.emit({event: event, fragment: fragment});
  }

 }
--- a/frontend/src/app/docs/api-docs/api-docs.component.html
+++ b/frontend/src/app/docs/api-docs/api-docs.component.html
@@ -19,7 +19,7 @@
          <div *ngIf="!item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled )">
            <h3 *ngIf="item.type === 'category'">{{ item.title }}</h3>
            <div *ngIf="item.type !== 'category'" class="endpoint-container" id="{{ item.fragment }}">
-              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
+              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick({event: $event, fragment: item.fragment})"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
              <div class="endpoint-content">
                <ng-container *ngTemplateOutlet="dict[item.fragment]" class="endpoint"></ng-container>
              </div>
@@ -54,7 +54,7 @@
          <div *ngIf="!item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance )">
            <h3 *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</h3>
            <div *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" class="endpoint-container" id="{{ item.fragment }}">
-              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
+              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick({event: $event, fragment: item.fragment})">{{ item.title }} <span>{{ item.category }}</span></a>
              <div class="endpoint-content">
                <div class="endpoint">
                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
@@ -290,8 +290,8 @@
 </ng-template>

 <ng-template type="how-do-mempool-goggles-work">
-  <p>Mempool Goggles are a set of filters that can be applied to the <a [routerLink]="['/mempool-block/0' | relativeUrl]">mempool block visualizations</a> to highlight different types of transactions.</p>
-  <p>There are currently 25 different Mempool Goggles filters, grouped into six categories:</p>
+  <p>Mempool Goggles&trade; are a set of filters that can be applied to the <a [routerLink]="['/mempool-block/0' | relativeUrl]">mempool block visualizations</a> to highlight different types of transactions.</p>
+  <p>There are currently 25 different Mempool Goggles&trade; filters, grouped into six categories:</p>
  <dl>
    <dt>Features</dt>
    <dd>
@@ -418,5 +418,5 @@
 </ng-template>

 <ng-template type="address-lookup-issues">
-  <p>If you're getting errors when doing address lookups, it's probably because of your Electrum server backend.</p><p>Mempool uses an Electrum server to do address lookups. There are several implementations of the Electrum server protocol, and Mempool can use any of them, but the implementation you use affects performance:</p><ol><li><a href="https://github.com/romanz/electrs" target="_blank">romanz/electrs</a>. This is a common choice for its low resource requirements, and most full-node distros use it. But while this implementation works great for basic queries, it will struggle with heavier ones (e.g. looking up addresses with many transactions)—especially when running on low-power hardware like a Raspberry Pi.</li><li><a href="https://github.com/cculianu/Fulcrum" target="_blank">Fulcrum</a>. Fulcrum requires more resources than romanz/electrs but it can still run on a Raspberry Pi, and it handles heavy queries much more efficiently. If you're having issues with romanz/electrs, Fulcrum is worth a try.</li><li><a href="https://github.com/Blockstream/electrs" target="_blank">blockstream/electrs</a>. If you have stronger hardware, consider running Blockstream's electrs implementation. It's the backend mempool.space uses, and is also what powers blockstream.info.</li></ol>
+  <p>If you're getting errors when doing address lookups, it's probably because of your Electrum server backend.</p><p>Mempool uses an Electrum server to do address lookups. There are several implementations of the Electrum server protocol, and Mempool can use any of them, but the implementation you use affects performance:</p><ol><li><a href="https://github.com/romanz/electrs" target="_blank">romanz/electrs</a>. This is a common choice for its low resource requirements, and most full-node distros use it. But while this implementation works great for basic queries, it will struggle with heavier ones (e.g. looking up addresses with many transactions)—especially when running on low-power hardware like a Raspberry Pi.</li><li><a href="https://github.com/cculianu/Fulcrum" target="_blank">Fulcrum</a>. Fulcrum requires more resources than romanz/electrs but it can still run on a Raspberry Pi, and it handles heavy queries much more efficiently. If you're having issues with romanz/electrs, Fulcrum is worth a try.</li><li><a href="https://github.com/mempool/electrs" target="_blank">mempool/electrs</a>. If you have stronger hardware, you could consider running mempool/electrs, the backend that powers mempool.space. It's a fork of Blockstream's Esplora, which is in turn a fork of romanz/electrs, intended for maximum performance and larger-scale deployments.</li></ol>
 </ng-template>
--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs.component.scss
@@ -204,6 +204,7 @@ h3 {
  margin: 20px 0 20px 0;
  font-size: 24px;
  position: relative;
+  cursor: pointer;
 }
 .endpoint-container .section-header:hover {
  text-decoration: none;
--- a/frontend/src/app/docs/api-docs/api-docs.component.ts
+++ b/frontend/src/app/docs/api-docs/api-docs.component.ts
@@ -56,7 +56,10 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
      if( this.route.snapshot.fragment ) {
        this.openEndpointContainer( this.route.snapshot.fragment );
        if (document.getElementById( this.route.snapshot.fragment )) {
-          document.getElementById( this.route.snapshot.fragment ).scrollIntoView();
+          let vOffset = ( window.innerWidth <= 992 ) ? 100 : 60;
+          window.scrollTo({
+            top: document.getElementById( this.route.snapshot.fragment ).offsetTop - vOffset
+          });
        }
      }
      window.addEventListener('scroll', that.onDocScroll, { passive: true });
@@ -124,20 +127,13 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
    this.desktopDocsNavPosition = ( window.pageYOffset > 115 ) ? "fixed" : "relative";
  }

-  anchorLinkClick( event: any ) {
-    let targetId = "";
-    if( event.target.nodeName === "A" ) {
-      targetId = event.target.hash.substring(1);
-    } else {
-      let element = event.target;
-      while( element.nodeName !== "A" ) {
-        element = element.parentElement;
-      }
-      targetId = element.hash.substring(1);
-    }
-    if( this.route.snapshot.fragment === targetId && document.getElementById( targetId )) {
-      document.getElementById( targetId ).scrollIntoView();
-    }
+  anchorLinkClick( e ) {
+    let targetId = e.fragment;
+    let vOffset = ( window.innerWidth <= 992 ) ? 100 : 60;
+    window.scrollTo({
+      top: document.getElementById( targetId ).offsetTop - vOffset
+    });
+    window.history.pushState({}, null, document.location.href.split("#")[0] + "#" + targetId);
    this.openEndpointContainer( targetId );
  }

--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@@ -163,6 +163,7 @@ export interface PoolInfo {
  emptyBlocks: number;
  slug: string;
  poolUniqueId: number;
+  unique_id: number;
 }
 export interface PoolStat {
  pool: PoolInfo;
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 import { CpfpInfo, OptimizedMempoolStats, AddressInformation, LiquidPegs, ITranslators,
  PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore, BlockSizesAndWeights, RbfTree, BlockAudit, Acceleration, AccelerationHistoryParams, CurrentPegs, AuditStatus, FederationAddress, FederationUtxo, RecentPeg, PegsVolume, AccelerationInfo } from '../interfaces/node-api.interface';
-import { BehaviorSubject, Observable, catchError, filter, of, shareReplay, take, tap } from 'rxjs';
+import { BehaviorSubject, Observable, catchError, filter, map, of, shareReplay, take, tap } from 'rxjs';
 import { StateService } from './state.service';
 import { Transaction } from '../interfaces/electrs.interface';
 import { Conversion } from './price.service';
@@ -246,11 +246,29 @@ export class ApiService {
    return this.httpClient.get<any>(
      this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pools` +
      (interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
+    )
+    .pipe(
+      map((response) => {
+        response.body.pools.forEach((pool) => {
+          if (pool.poolUniqueId === 0) {
+            pool.name = $localize`:@@e5d8bb389c702588877f039d72178f219453a72d:Unknown`;
+          }
+        });
+        return response;
+      })
    );
  }  

  getPoolStats$(slug: string): Observable<PoolStat> {
-    return this.httpClient.get<PoolStat>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${slug}`);
+    return this.httpClient.get<PoolStat>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${slug}`)
+    .pipe(
+      map((poolStats) => {
+        if (poolStats.pool.unique_id === 0) {
+          poolStats.pool.name = $localize`:@@e5d8bb389c702588877f039d72178f219453a72d:Unknown`;
+        }
+        return poolStats;
+      })
+    );
  }

  getPoolHashrate$(slug: string): Observable<any> {
--- a/frontend/src/app/services/services-api.service.ts
+++ b/frontend/src/app/services/services-api.service.ts
@@ -132,6 +132,10 @@ export class ServicesApiServices {
    return this.httpClient.post<any>(`${SERVICES_API_PREFIX}/accelerator/accelerate`, { txInput: txInput, userBid: userBid });
  }

+  accelerateWithCashApp$(txInput: string, userBid: number, token: string, cashtag: string, referenceId: string) {
+    return this.httpClient.post<any>(`${SERVICES_API_PREFIX}/accelerator/accelerate/cashapp`, { txInput: txInput, userBid: userBid, token: token, cashtag: cashtag, referenceId: referenceId });
+  }
+
  getAccelerations$(): Observable<Acceleration[]> {
    return this.httpClient.get<Acceleration[]>(`${SERVICES_API_PREFIX}/accelerator/accelerations`);
  }
@@ -151,4 +155,8 @@ export class ServicesApiServices {
  getAccelerationStats$(): Observable<AccelerationStats> {
    return this.httpClient.get<AccelerationStats>(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`);
  }
+
+  setupSquare$(): Observable<{squareAppId: string, squareLocationId: string}> {
+    return this.httpClient.get<{squareAppId: string, squareLocationId: string}>(`${SERVICES_API_PREFIX}/square/setup`);
+  }
 }
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -86,6 +86,7 @@ const defaultEnv: Env = {
  providedIn: 'root'
 })
 export class StateService {
+  ref: string = '';
  isBrowser: boolean = isPlatformBrowser(this.platformId);
  isMempoolSpaceBuild = window['isMempoolSpaceBuild'] ?? false;
  backend: 'esplora' | 'electrum' | 'none' = 'esplora';
@@ -154,7 +155,7 @@ export class StateService {
  searchFocus$: Subject<boolean> = new Subject<boolean>();
  menuOpen$: BehaviorSubject<boolean> = new BehaviorSubject(false);

-  activeGoggles$: BehaviorSubject<ActiveFilter> = new BehaviorSubject({ mode: 'and', filters: [] });
+  activeGoggles$: BehaviorSubject<ActiveFilter> = new BehaviorSubject({ mode: 'and', filters: [], gradient: 'age' });

  constructor(
    @Inject(PLATFORM_ID) private platformId: any,
@@ -162,6 +163,8 @@ export class StateService {
    private router: Router,
    private storageService: StorageService,
  ) {
+    this.ref = window.document.referrer;
+
    const browserWindow = window || {};
    // @ts-ignore
    const browserWindowEnv = browserWindow.__env || {};
--- a/frontend/src/app/shared/filters.utils.ts
+++ b/frontend/src/app/shared/filters.utils.ts
@@ -11,9 +11,12 @@ export interface Filter {

 export type FilterMode = 'and' | 'or';

+export type GradientMode = 'fee' | 'age';
+
 export interface ActiveFilter {
  mode: FilterMode,
  filters: string[],
+  gradient: GradientMode,
 }

 // binary flags for transaction classification
@@ -93,15 +96,15 @@ export const TransactionFilters: { [key: string]: Filter } = {
    cpfp_parent: { key: 'cpfp_parent', label: 'Paid for by child', flag: TransactionFlags.cpfp_parent, important: true, tooltip: true, txPage: false, },
    cpfp_child: { key: 'cpfp_child', label: 'Pays for parent', flag: TransactionFlags.cpfp_child, important: true, tooltip: true, txPage: false, },
    replacement: { key: 'replacement', label: 'Replacement', flag: TransactionFlags.replacement, important: true, tooltip: true, txPage: false, },
-    acceleration: window?.['__env']?.ACCELERATOR ? { key: 'acceleration', label: 'Accelerated', flag: TransactionFlags.acceleration, important: false } : undefined,
+    acceleration: window?.['__env']?.ACCELERATOR ? { key: 'acceleration', label: $localize`:@@b484583f0ce10f3341ab36750d05271d9d22c9a1:Accelerated`, flag: TransactionFlags.acceleration, important: false } : undefined,
    /* data */
    op_return: { key: 'op_return', label: 'OP_RETURN', flag: TransactionFlags.op_return, important: true, tooltip: true, txPage: true, },
    fake_pubkey: { key: 'fake_pubkey', label: 'Fake pubkey', flag: TransactionFlags.fake_pubkey, tooltip: true, txPage: true, },
    inscription: { key: 'inscription', label: 'Inscription', flag: TransactionFlags.inscription, important: true, tooltip: true, txPage: true, },
    fake_scripthash: { key: 'fake_scripthash', label: 'Fake scripthash', flag: TransactionFlags.fake_scripthash, tooltip: true, txPage: true,},
    /* heuristics */
-    coinjoin: { key: 'coinjoin', label: 'Coinjoin', flag: TransactionFlags.coinjoin, important: true, tooltip: true, txPage: true, },
-    consolidation: { key: 'consolidation', label: 'Consolidation', flag: TransactionFlags.consolidation, tooltip: true, txPage: true, },
+    coinjoin: { key: 'coinjoin', label: $localize`Coinjoin`, flag: TransactionFlags.coinjoin, important: true, tooltip: true, txPage: true, },
+    consolidation: { key: 'consolidation', label: $localize`Consolidation`, flag: TransactionFlags.consolidation, tooltip: true, txPage: true, },
    batch_payout: { key: 'batch_payout', label: 'Batch payment', flag: TransactionFlags.batch_payout, tooltip: true, txPage: true, },
    /* sighash */
    sighash_all: { key: 'sighash_all', label: 'sighash_all', flag: TransactionFlags.sighash_all },
@@ -112,10 +115,10 @@ export const TransactionFilters: { [key: string]: Filter } = {
 };

 export const FilterGroups: { label: string, filters: Filter[]}[] = [
-  { label: 'Features', filters: ['rbf', 'no_rbf', 'v1', 'v2', 'v3', 'nonstandard'] },
-  { label: 'Address Types', filters: ['p2pk', 'p2ms', 'p2pkh', 'p2sh', 'p2wpkh', 'p2wsh', 'p2tr'] },
-  { label: 'Behavior', filters: ['cpfp_parent', 'cpfp_child', 'replacement', 'acceleration'] },
-  { label: 'Data', filters: ['op_return', 'fake_pubkey', 'fake_scripthash', 'inscription'] },
-  { label: 'Heuristics', filters: ['coinjoin', 'consolidation', 'batch_payout'] },
-  { label: 'Sighash Flags', filters: ['sighash_all', 'sighash_none', 'sighash_single', 'sighash_default', 'sighash_acp'] },
+  { label: $localize`:@@885666551418fd59011ceb09d5c481095940193b:Features`, filters: ['rbf', 'no_rbf', 'v1', 'v2', 'v3', 'nonstandard'] },
+  { label: $localize`Address Types`, filters: ['p2pk', 'p2ms', 'p2pkh', 'p2sh', 'p2wpkh', 'p2wsh', 'p2tr'] },
+  { label: $localize`Behavior`, filters: ['cpfp_parent', 'cpfp_child', 'replacement', 'acceleration'] },
+  { label: $localize`Data`, filters: ['op_return', 'fake_pubkey', 'fake_scripthash', 'inscription'] },
+  { label: $localize`Heuristics`, filters: ['coinjoin', 'consolidation', 'batch_payout'] },
+  { label: $localize`Sighash Flags`, filters: ['sighash_all', 'sighash_none', 'sighash_single', 'sighash_default', 'sighash_acp'] },
 ].map(group => ({ label: group.label, filters: group.filters.map(filter => TransactionFilters[filter] || null).filter(f => f != null) }));
--- a/frontend/src/locale/messages.ar.xlf
+++ b/frontend/src/locale/messages.ar.xlf
--- a/frontend/src/locale/messages.ca.xlf
+++ b/frontend/src/locale/messages.ca.xlf
--- a/frontend/src/locale/messages.cs.xlf
+++ b/frontend/src/locale/messages.cs.xlf
--- a/frontend/src/locale/messages.da.xlf
+++ b/frontend/src/locale/messages.da.xlf
--- a/frontend/src/locale/messages.de.xlf
+++ b/frontend/src/locale/messages.de.xlf
--- a/frontend/src/locale/messages.es.xlf
+++ b/frontend/src/locale/messages.es.xlf
--- a/frontend/src/locale/messages.fa.xlf
+++ b/frontend/src/locale/messages.fa.xlf
--- a/frontend/src/locale/messages.fi.xlf
+++ b/frontend/src/locale/messages.fi.xlf
--- a/frontend/src/locale/messages.fr.xlf
+++ b/frontend/src/locale/messages.fr.xlf
--- a/frontend/src/locale/messages.he.xlf
+++ b/frontend/src/locale/messages.he.xlf
--- a/frontend/src/locale/messages.hi.xlf
+++ b/frontend/src/locale/messages.hi.xlf
--- a/frontend/src/locale/messages.hr.xlf
+++ b/frontend/src/locale/messages.hr.xlf
--- a/frontend/src/locale/messages.hu.xlf
+++ b/frontend/src/locale/messages.hu.xlf
--- a/frontend/src/locale/messages.it.xlf
+++ b/frontend/src/locale/messages.it.xlf
--- a/frontend/src/locale/messages.ja.xlf
+++ b/frontend/src/locale/messages.ja.xlf
--- a/frontend/src/locale/messages.ka.xlf
+++ b/frontend/src/locale/messages.ka.xlf
--- a/frontend/src/locale/messages.ko.xlf
+++ b/frontend/src/locale/messages.ko.xlf
--- a/frontend/src/locale/messages.lt.xlf
+++ b/frontend/src/locale/messages.lt.xlf
--- a/frontend/src/locale/messages.mk.xlf
+++ b/frontend/src/locale/messages.mk.xlf
--- a/frontend/src/locale/messages.nb.xlf
+++ b/frontend/src/locale/messages.nb.xlf
--- a/frontend/src/locale/messages.ne.xlf
+++ b/frontend/src/locale/messages.ne.xlf
--- a/frontend/src/locale/messages.nl.xlf
+++ b/frontend/src/locale/messages.nl.xlf
--- a/frontend/src/locale/messages.pl.xlf
+++ b/frontend/src/locale/messages.pl.xlf
--- a/frontend/src/locale/messages.pt.xlf
+++ b/frontend/src/locale/messages.pt.xlf
--- a/frontend/src/locale/messages.ro.xlf
+++ b/frontend/src/locale/messages.ro.xlf
--- a/frontend/src/locale/messages.ru.xlf
+++ b/frontend/src/locale/messages.ru.xlf
--- a/frontend/src/locale/messages.sl.xlf
+++ b/frontend/src/locale/messages.sl.xlf
--- a/frontend/src/locale/messages.sv.xlf
+++ b/frontend/src/locale/messages.sv.xlf
--- a/frontend/src/locale/messages.th.xlf
+++ b/frontend/src/locale/messages.th.xlf
--- a/frontend/src/locale/messages.tr.xlf
+++ b/frontend/src/locale/messages.tr.xlf
--- a/frontend/src/locale/messages.uk.xlf
+++ b/frontend/src/locale/messages.uk.xlf
--- a/frontend/src/locale/messages.vi.xlf
+++ b/frontend/src/locale/messages.vi.xlf
--- a/frontend/src/locale/messages.xlf
+++ b/frontend/src/locale/messages.xlf
--- a/frontend/src/locale/messages.zh.xlf
+++ b/frontend/src/locale/messages.zh.xlf
--- a/frontend/tsconfig.base.json
+++ b/frontend/tsconfig.base.json
@@ -7,15 +7,15 @@
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
-    "module": "ES2022",
+    "module": "ES2020",
    "moduleResolution": "node",
    "importHelpers": true,
-    "target": "ES2022",
+    "target": "ES2020",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
-      "ES2022",
+      "ES2020",
      "dom",
      "dom.iterable"
    ]
--- a/frontend/tsconfig.server.json
+++ b/frontend/tsconfig.server.json
@@ -2,7 +2,7 @@
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/server",
-    "target": "ES2022",
+    "target": "ES2020",
    "sourceMap": true,
    "types": [
      "node"
Author	SHA1	Message	Date
Mononaut	860f952f7a	Fix tx autoscroll	2024-04-08 08:50:12 +00:00
Mononaut	48e16e64c2	Simple mode redesign w/ sticky button	2024-04-08 08:05:22 +00:00
Mononaut	aa0c70bd44	Simplified acceleration mode for mobile	2024-04-08 04:58:56 +00:00
softsimon	91a8a8be34	Merge pull request #4911 from daweilv/master fix(address): clicking on the Balance History chart within the /testnet/address/:id page would incorrectly navigate to /tx/:tx	2024-04-08 11:41:54 +09:00
Metadavid	5583befbba	Update daweilv.txt	2024-04-07 21:42:36 +08:00
Metadavid	c637055859	Update daweilv.txt	2024-04-07 21:20:42 +08:00
Metadavid	c3acfb8781	Update address-graph.component.ts fix(address): Clicking on the Balance History chart within the /testnet/address/:id page under testnet now navigates to /testnet/tx/:tx instead of /tx/:tx.	2024-04-07 21:04:23 +08:00
Metadavid	fd073a7043	Add files via upload	2024-04-07 21:03:20 +08:00
softsimon	501b79fdce	Italian and Spanish fineshed	2024-04-07 10:43:17 +09:00
softsimon	ed6af8f560	Merge pull request #4906 from mempool/mononaut/acceleration-harmony Acceleration sound	2024-04-06 19:02:26 +09:00
Mononaut	32495736d4	such bright wow harmony	2024-04-06 09:58:07 +00:00
wiz	bff48b0a64	Merge pull request #4901 from mempool/nymkappa/clear-state [accelerator] clear state after loading preview	2024-04-06 18:47:46 +09:00
softsimon	f6228240ba	Transifex pull	2024-04-06 18:04:39 +09:00
softsimon	215c8a7ff4	Merge pull request #4902 from mempool/mononaut/disappearing-effective-rates Fix disappearing effective/accelerated fee rates	2024-04-06 18:00:07 +09:00
softsimon	0f217bd753	Merge pull request #4903 from mempool/mononaut/bright-purple Don't apply age tint to accelerated txs	2024-04-06 17:39:24 +09:00
Mononaut	7721f16f9f	Don't apply age tint to accelerated txs	2024-04-06 03:44:58 +00:00
nymkappa	854222b8cc	[accelerator] clear state after loading preview	2024-04-06 12:32:33 +09:00
Mononaut	0bc86541c6	Fix disappearing effective/accelerated fee rates	2024-04-06 03:22:56 +00:00
softsimon	c45111333d	Fix space	2024-04-06 11:58:48 +09:00
softsimon	ba6fedc430	Merge pull request #4900 from mempool/nymkappa/fix-accel-preview-autoscroll [accelerator] fix accel preview autoscroll	2024-04-05 21:06:57 +09:00
nymkappa	caa34fa8bb	[accelerator] fix accel preview autoscroll	2024-04-05 20:59:15 +09:00
softsimon	fa7c0ab58e	Pull from transifex	2024-04-05 20:46:37 +09:00
wiz	2543eb6861	Merge pull request #4899 from mempool/nymkappa/polish-button [accelerator] fix label accelerate button	2024-04-05 20:45:27 +09:00
nymkappa	c4cf3363ee	[accelerator] fix label accelerate button	2024-04-05 20:39:43 +09:00
softsimon	98d4efd509	Merge pull request #4889 from mempool/mononaut/non-esplora-inscription-goggles Add support for inscription goggles for non-esplora backends	2024-04-05 18:28:07 +09:00
softsimon	a99e65ee48	Merge branch 'master' into mononaut/non-esplora-inscription-goggles	2024-04-05 18:28:01 +09:00
wiz	3fd4d24c93	Merge pull request #4897 from mempool/nymkappa/fix-preview-loading [accelerator] fix spinner loading	2024-04-05 18:23:38 +09:00
nymkappa	55a564a5a8	[accelerator] fix spinner loading	2024-04-05 17:52:07 +09:00
softsimon	04f6490eeb	Merge branch 'master' into mononaut/non-esplora-inscription-goggles	2024-04-05 17:48:55 +09:00
softsimon	b5026789d6	Merge pull request #4896 from mempool/nymkappa/fix-referrer [accelator] fix referrer check	2024-04-05 17:38:47 +09:00
nymkappa	705e570cf5	[accelator] fix referrer check	2024-04-05 17:36:04 +09:00
softsimon	10a41fb0d1	Merge pull request #4804 from mempool/nymkappa/prepaid-acceleration [accelerator] prepaid acceleration	2024-04-05 17:32:46 +09:00
softsimon	e55898b414	Merge pull request #4891 from mempool/mononaut/tx-details-stripes Transaction details template refactor	2024-04-05 16:50:41 +09:00
Mononaut	2df476406d	Transaction details template refactor	2024-04-05 07:46:48 +00:00
softsimon	4a05b35f2b	Pulling from transifex	2024-04-05 16:46:23 +09:00
softsimon	3ad8e56c25	Accelerations i18n key fix	2024-04-05 16:30:26 +09:00
softsimon	c1704758fd	Merge pull request #4893 from mempool/simon/build-target-es2020 Set build target to es2020	2024-04-05 16:26:38 +09:00
softsimon	fe580f2b2b	Merge pull request #4894 from mempool/hunicus/esplora-docs Switch blockstream/electrs for mempool/electrs in backend readme	2024-04-05 16:19:35 +09:00
hunicus	d82e482acc	Update readme: blockstream/electrs for mempool/electrs	2024-04-05 15:59:16 +09:00
softsimon	9d6142dc79	Merge pull request #4892 from mempool/hunicus/memsplora Switch blockstream/electrs for mempool/electrs in faq	2024-04-05 15:57:14 +09:00
softsimon	2dec83735b	Set build target to es2020	2024-04-05 15:56:10 +09:00
softsimon	9f4204b815	Remove goggles i18n	2024-04-05 15:50:34 +09:00
hunicus	40f2c972d7	Update faq: blockstream/electrs for mempool/electrs	2024-04-05 15:50:15 +09:00
softsimon	eee2385d0d	Merge pull request #4886 from mempool/nymkappa/mempool-goggle-tm [copy] add missing trademark to Mempool Goggles	2024-04-05 14:48:43 +09:00
softsimon	492c652157	Merge pull request #4885 from mempool/natsoni/fix-side-nav-on-rtl Fix side panel for rtl languages	2024-04-05 14:47:36 +09:00
softsimon	af8e060dc6	A few goggles i18n	2024-04-05 12:37:17 +09:00
softsimon	6a19b9058f	Merge pull request #4888 from mempool/mononaut/tint Goggles age tint by default	2024-04-05 12:36:24 +09:00
nymkappa	bcbd21b922	[acclerator] load square for prepaid acceleration	2024-04-05 11:16:48 +09:00
nymkappa	aac76d68b0	Merge branch 'master' into nymkappa/prepaid-acceleration	2024-04-05 11:14:16 +09:00
softsimon	25bb942e04	Fixing the other i18n	2024-04-04 21:55:14 +09:00
softsimon	8ac71f21d1	Updating i18n for accelerator preview	2024-04-04 21:48:16 +09:00
Mononaut	287559f028	Add support for inscription goggles for non-esplora backends	2024-04-04 12:32:03 +00:00
Mononaut	7fbb93cf41	Goggles age tint by default	2024-04-04 11:33:51 +00:00
nymkappa	7b76e93631	Update messages.ca.xlf	2024-04-04 18:26:38 +08:00
wiz	896c451c3e	Merge pull request #4884 from mempool/nymkappa/about-page	2024-04-04 19:18:48 +09:00
natsoni	0874386001	Fix side panel for rtl languages	2024-04-04 19:00:04 +09:00
nymkappa	ce6808b3c4	[copy] add missing trademark to Mempool Goggles	2024-04-04 18:01:01 +09:00
softsimon	40fa1c5acb	Some language string updates	2024-04-04 17:51:42 +09:00
nymkappa	7307990f6f	[about page] enable sponsors on self hosted	2024-04-04 17:36:37 +09:00
softsimon	5104da500e	Adding i18n to mempool goggles	2024-04-04 17:28:32 +09:00
softsimon	3a8c46bbed	Merge pull request #4837 from mempool/mononaut/goggles-age-filter Goggles age filter	2024-04-04 16:47:34 +09:00
Mononaut	fc5312549d	Switch gradient toggle fee -> default	2024-04-04 07:42:31 +00:00
softsimon	c14e8797e2	Merge pull request #4879 from mempool/nymkappa/proxy-accel-endpoints [accelerator] proxy acceleration api to prod	2024-04-04 16:20:27 +09:00
nymkappa	0f26940018	Merge branch 'master' into nymkappa/proxy-accel-endpoints	2024-04-04 16:01:17 +09:00
Mononaut	26227e2f3b	New opacity-based age Goggles	2024-04-04 06:57:38 +00:00
Mononaut	dcf78fab06	Block visualization color-by-age mode	2024-04-04 06:57:37 +00:00
softsimon	0813592a6d	Merge pull request #4882 from mempool/nymkappa/reset-pool-sha [migration] reset mining pool sha to force refreshing	2024-04-04 15:20:04 +09:00
nymkappa	abdb27af3f	[migration] reset mining pool sha to force refreshing	2024-04-04 14:27:50 +09:00
nymkappa	b421be3315	[accelerator] also forward headers	2024-04-04 14:04:12 +09:00
softsimon	b74fbee069	Merge pull request #4881 from mempool/nymkappa/proxy-sponsors [about page] proxy community sponsors apis to prod, small refactor	2024-04-04 14:02:00 +09:00
nymkappa	dab9357b40	[about page] proxy community sponsors apis to prod, small refactor	2024-04-04 13:56:39 +09:00
softsimon	ccd89604c0	Merge pull request #4856 from mempool/hunicus/docs-links-alignment Fix api-docs anchor link vertical alignment	2024-04-04 13:54:53 +09:00
Felipe Knorr Kuhn	cd135b7171	Merge branch 'master' into nymkappa/proxy-accel-endpoints	2024-04-04 13:14:54 +09:00
softsimon	7e16d550b0	Merge pull request #4880 from mempool/knorrium/enable_fiat_price_again Enable fiat price conversion again	2024-04-04 13:14:24 +09:00
nymkappa	404079ef4e	[accelerator] use config.MEMPOOL_SERVICES.API url	2024-04-04 13:10:32 +09:00
Felipe Knorr Kuhn	d13f78f046	Enable fiat price conversion again	2024-04-04 13:10:11 +09:00
nymkappa	60040c3914	[accelerator] proxy acceleration api to prod	2024-04-04 12:57:54 +09:00
softsimon	e408fbd8d6	Merge branch 'master' into hunicus/docs-links-alignment	2024-04-04 12:40:14 +09:00
softsimon	6931ecd468	Merge pull request #4878 from mempool/dependabot/npm_and_yarn/backend/multi-b37afcb6a9 Bump ws and @types/ws in /backend	2024-04-04 12:31:27 +09:00
dependabot[bot]	ed5d30ea5b	Bump ws and @types/ws in /backend Bumps [ws](https://github.com/websockets/ws) and [@types/ws](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ws). These dependencies needed to be updated together. Updates `ws` from 8.13.0 to 8.16.0 - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/compare/8.13.0...8.16.0) Updates `@types/ws` from 8.5.5 to 8.5.10 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ws) --- updated-dependencies: - dependency-name: ws dependency-type: direct:production update-type: version-update:semver-minor - dependency-name: "@types/ws" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-04-04 02:49:18 +00:00
softsimon	55f9d0f875	Merge branch 'master' into hunicus/docs-links-alignment	2024-04-03 18:57:46 +09:00
Felipe Knorr Kuhn	995a26b944	Merge branch 'master' into nymkappa/prepaid-acceleration	2024-04-02 21:53:01 +09:00
hunicus	fb6aec0afe	Merge branch 'master' into hunicus/docs-links-alignment	2024-04-01 19:06:18 +09:00
hunicus	b8a48314c1	Fix api-docs anchor link vertical alignment	2024-04-01 18:53:38 +09:00
nymkappa	1eb52d8a35	[accelerator] fix redirection link	2024-03-21 19:08:48 +09:00
nymkappa	8fee195577	[accelerator] prepaid acceleration	2024-03-21 16:44:07 +09:00