Merge calculateMempoolTxCpfp and calculateLocalTxCpfp

.github/workflows/ci.yml

@@ -251,7 +251,17 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        module: ["mempool", "liquid", "testnet4"]
+        module: ["mempool", "liquid"]
+        include:
+          - module: "mempool"
+            spec: |
+              cypress/e2e/mainnet/*.spec.ts
+              cypress/e2e/signet/*.spec.ts
+              cypress/e2e/testnet4/*.spec.ts
+          - module: "liquid"
+            spec: |
+              cypress/e2e/liquid/liquid.spec.ts
+              cypress/e2e/liquidtestnet/liquidtestnet.spec.ts
 
     name: E2E tests for ${{ matrix.module }}
     steps:
@@ -300,10 +310,8 @@ jobs:
 
       - name: Unzip assets before building (src/resources)
         run: unzip -o promo-video-assets.zip -d ${{ matrix.module }}/frontend/src/resources/promo-video
-
-      # mempool
+      
       - name: Chrome browser tests (${{ matrix.module }})
-        if: ${{ matrix.module == 'mempool' }}
         uses: cypress-io/github-action@v5
         with:
           tag: ${{ github.event_name }}
@@ -314,9 +322,7 @@ jobs:
           wait-on-timeout: 120
           record: true
           parallel: true
-          spec: |
-            cypress/e2e/mainnet/*.spec.ts
-            cypress/e2e/signet/*.spec.ts
+          spec: ${{ matrix.spec }}
           group: Tests on Chrome (${{ matrix.module }})
           browser: "chrome"
           ci-build-id: "${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}"
@@ -326,56 +332,6 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
 
-      # liquid
-      - name: Chrome browser tests (${{ matrix.module }})
-        if: ${{ matrix.module == 'liquid' }}
-        uses: cypress-io/github-action@v5
-        with:
-          tag: ${{ github.event_name }}
-          working-directory: ${{ matrix.module }}/frontend
-          build: npm run config:defaults:${{ matrix.module }}
-          start: npm run start:local-staging
-          wait-on: "http://localhost:4200"
-          wait-on-timeout: 120
-          record: true
-          parallel: true
-          spec: |
-            cypress/e2e/liquid/liquid.spec.ts
-            cypress/e2e/liquidtestnet/liquidtestnet.spec.ts
-          group: Tests on Chrome (${{ matrix.module }})
-          browser: "chrome"
-          ci-build-id: "${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}"
-        env:
-          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-
-      # testnet
-      - name: Chrome browser tests (${{ matrix.module }})
-        if: ${{ matrix.module == 'testnet4' }}
-        uses: cypress-io/github-action@v5
-        with:
-          tag: ${{ github.event_name }}
-          working-directory: ${{ matrix.module }}/frontend
-          build: npm run config:defaults:mempool
-          start: npm run start:local-staging
-          wait-on: "http://localhost:4200"
-          wait-on-timeout: 120
-          record: true
-          parallel: true
-          spec: |
-            cypress/e2e/testnet4/*.spec.ts
-          group: Tests on Chrome (${{ matrix.module }})
-          browser: "chrome"
-          ci-build-id: "${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}"
-        env:
-          CYPRESS_REROUTE_TESTNET: true
-          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-
   validate_docker_json:
     if: "!contains(github.event.pull_request.labels.*.name, 'ops') && !contains(github.head_ref, 'ops/')"
     runs-on: "ubuntu-latest"
@@ -403,4 +359,4 @@ jobs:
       - name: Validate JSON syntax
         run: |
           cat mempool-config.json | jq
-        working-directory: docker/docker/backend
+        working-directory: docker/docker/backend

backend/jest.config.ts

@@ -7,7 +7,7 @@ const config: Config.InitialOptions = {
   automock: false,
   collectCoverage: true,
   collectCoverageFrom: ["./src/**/**.ts"],
-  coverageProvider: "v8",
+  coverageProvider: "babel",
   coverageThreshold: {
     global: {
       lines: 1

backend/mempool-config.sample.json

@@ -155,10 +155,6 @@
     "API": "https://mempool.space/api/v1/services",
     "ACCELERATIONS": false
   },
-  "STRATUM": {
-    "ENABLED": false,
-    "API": "http://localhost:1234"
-  },
   "FIAT_PRICE": {
     "ENABLED": true,
     "PAID": false,

backend/package-lock.json

@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "license": "GNU Affero General Public License v3.0",
       "dependencies": {
+        "@babel/core": "^7.25.2",
         "@mempool/electrum-client": "1.1.9",
         "@types/node": "^18.15.3",
         "axios": "1.7.2",
@@ -17,7 +18,7 @@
         "crypto-js": "~4.2.0",
         "express": "~4.21.1",
         "maxmind": "~4.3.11",
-        "mysql2": "~3.12.0",
+        "mysql2": "~3.11.0",
         "redis": "^4.7.0",
         "rust-gbt": "file:./rust-gbt",
         "socks-proxy-agent": "~7.0.0",
@@ -25,6 +26,8 @@
         "ws": "~8.18.0"
       },
       "devDependencies": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/core": "^7.25.2",
         "@types/compression": "^1.7.2",
         "@types/crypto-js": "^4.1.1",
         "@types/express": "^4.17.17",
@@ -5997,21 +6000,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lru.min": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.1.tgz",
-      "integrity": "sha512-FbAj6lXil6t8z4z3j0E5mfRlPzxkySotzUHwRXjlpRh10vc6AI6WN62ehZj82VG7M20rqogJ0GLwar2Xa05a8Q==",
-      "license": "MIT",
-      "engines": {
-        "bun": ">=1.0.0",
-        "deno": ">=1.30.0",
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wellwelwel"
-      }
-    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -6173,17 +6161,16 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mysql2": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.12.0.tgz",
-      "integrity": "sha512-C8fWhVysZoH63tJbX8d10IAoYCyXy4fdRFz2Ihrt9jtPILYynFEKUUzpp1U7qxzDc3tMbotvaBH+sl6bFnGZiw==",
-      "license": "MIT",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.11.0.tgz",
+      "integrity": "sha512-J9phbsXGvTOcRVPR95YedzVSxJecpW5A5+cQ57rhHIFXteTP10HCs+VBjS7DHIKfEaI1zQ5tlVrquCd64A6YvA==",
       "dependencies": {
         "aws-ssl-profiles": "^1.1.1",
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
         "iconv-lite": "^0.6.3",
         "long": "^5.2.1",
-        "lru.min": "^1.0.0",
+        "lru-cache": "^8.0.0",
         "named-placeholders": "^1.1.3",
         "seq-queue": "^0.0.5",
         "sqlstring": "^2.3.2"
@@ -6203,6 +6190,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/mysql2/node_modules/lru-cache": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
     "node_modules/named-placeholders": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.3.tgz",
@@ -12218,11 +12213,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "lru.min": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.1.tgz",
-      "integrity": "sha512-FbAj6lXil6t8z4z3j0E5mfRlPzxkySotzUHwRXjlpRh10vc6AI6WN62ehZj82VG7M20rqogJ0GLwar2Xa05a8Q=="
-    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -12337,16 +12327,16 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "mysql2": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.12.0.tgz",
-      "integrity": "sha512-C8fWhVysZoH63tJbX8d10IAoYCyXy4fdRFz2Ihrt9jtPILYynFEKUUzpp1U7qxzDc3tMbotvaBH+sl6bFnGZiw==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.11.0.tgz",
+      "integrity": "sha512-J9phbsXGvTOcRVPR95YedzVSxJecpW5A5+cQ57rhHIFXteTP10HCs+VBjS7DHIKfEaI1zQ5tlVrquCd64A6YvA==",
       "requires": {
         "aws-ssl-profiles": "^1.1.1",
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
         "iconv-lite": "^0.6.3",
         "long": "^5.2.1",
-        "lru.min": "^1.0.0",
+        "lru-cache": "^8.0.0",
         "named-placeholders": "^1.1.3",
         "seq-queue": "^0.0.5",
         "sqlstring": "^2.3.2"
@@ -12359,6 +12349,11 @@
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3.0.0"
           }
+        },
+        "lru-cache": {
+          "version": "8.0.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+          "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA=="
         }
       }
     },

backend/package.json

@@ -39,6 +39,7 @@
     "prettier": "./node_modules/.bin/prettier --write \"src/**/*.{js,ts}\""
   },
   "dependencies": {
+    "@babel/core": "^7.25.2",
     "@mempool/electrum-client": "1.1.9",
     "@types/node": "^18.15.3",
     "axios": "1.7.2",
@@ -46,7 +47,7 @@
     "crypto-js": "~4.2.0",
     "express": "~4.21.1",
     "maxmind": "~4.3.11",
-    "mysql2": "~3.12.0",
+    "mysql2": "~3.11.0",
     "rust-gbt": "file:./rust-gbt",
     "redis": "^4.7.0",
     "socks-proxy-agent": "~7.0.0",
@@ -54,6 +55,8 @@
     "ws": "~8.18.0"
   },
   "devDependencies": {
+    "@babel/code-frame": "^7.18.6",
+    "@babel/core": "^7.25.2",
     "@types/compression": "^1.7.2",
     "@types/crypto-js": "^4.1.1",
     "@types/express": "^4.17.17",

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

@@ -151,9 +151,5 @@
     "ENABLED": true,
     "PAID": false,
     "API_KEY": "__MEMPOOL_CURRENCY_API_KEY__"
-  },
-  "STRATUM": {
-    "ENABLED": false,
-    "API": "http://localhost:1234"
   }
 }

backend/src/__tests__/config.test.ts

@@ -159,11 +159,6 @@ describe('Mempool Backend Config', () => {
         PAID: false,
         API_KEY: '',
       });
-
-      expect(config.STRATUM).toStrictEqual({
-        ENABLED: false,
-        API: 'http://localhost:1234',
-      });
     });
   });
 

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

@@ -21,7 +21,6 @@ import transactionRepository from '../../repositories/TransactionRepository';
 import rbfCache from '../rbf-cache';
 import { calculateMempoolTxCpfp } from '../cpfp';
 import { handleError } from '../../utils/api';
-import poolsUpdater from '../../tasks/pools-updater';
 
 const TXID_REGEX = /^[a-f0-9]{64}$/i;
 const BLOCK_HASH_REGEX = /^[a-f0-9]{64}$/i;
@@ -55,12 +54,10 @@ class BitcoinRoutes {
       .post(config.MEMPOOL.API_URL_PREFIX + 'psbt/addparents', this.postPsbtCompletion)
       .get(config.MEMPOOL.API_URL_PREFIX + 'blocks-bulk/:from', this.getBlocksByBulk.bind(this))
       .get(config.MEMPOOL.API_URL_PREFIX + 'blocks-bulk/:from/:to', this.getBlocksByBulk.bind(this))
+      .post(config.MEMPOOL.API_URL_PREFIX + 'prevouts', this.$getPrevouts)
+      .post(config.MEMPOOL.API_URL_PREFIX + 'cpfp', this.getCpfpLocalTxs)
       // Temporarily add txs/package endpoint for all backends until esplora supports it
       .post(config.MEMPOOL.API_URL_PREFIX + 'txs/package', this.$submitPackage)
-      // Internal routes
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/blocks/definition/list', this.getBlockDefinitionHashes)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/blocks/definition/current', this.getCurrentBlockDefinitionHash)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/blocks/:definitionHash', this.getBlocksByDefinitionHash)
       ;
 
       if (config.MEMPOOL.BACKEND !== 'esplora') {
@@ -744,52 +741,6 @@ class BitcoinRoutes {
     }
   }
 
-  private async getBlockDefinitionHashes(req: Request, res: Response): Promise<void> {
-    try {
-      const result = await blocks.$getBlockDefinitionHashes();
-      if (!result) {
-        handleError(req, res, 503, `Service Temporarily Unavailable`);
-        return;
-      }
-      res.setHeader('content-type', 'application/json');
-      res.send(result);
-    } catch (e) {
-      handleError(req, res, 500, e instanceof Error ? e.message : e);
-    }
-  }
-
-  private async getCurrentBlockDefinitionHash(req: Request, res: Response): Promise<void> {
-    try {
-      const currentSha = await poolsUpdater.getShaFromDb();
-      if (!currentSha) {
-        handleError(req, res, 503, `Service Temporarily Unavailable`);
-        return;
-      }
-      res.setHeader('content-type', 'text/plain');
-      res.send(currentSha);
-    } catch (e) {
-      handleError(req, res, 500, e instanceof Error ? e.message : e);
-    }
-  }
-
-  private async getBlocksByDefinitionHash(req: Request, res: Response): Promise<void> {
-    try {
-      if (typeof(req.params.definitionHash) !== 'string') {
-        res.status(400).send('Parameter "hash" must be a valid string');
-        return;
-      }
-      const blocksHash = await blocks.$getBlocksByDefinitionHash(req.params.definitionHash as string);
-      if (!blocksHash) {
-        handleError(req, res, 503, `Service Temporarily Unavailable`);
-        return;
-      }
-      res.setHeader('content-type', 'application/json');
-      res.send(blocksHash);
-    } catch (e) {
-      handleError(req, res, 500, e instanceof Error ? e.message : e);
-    }
-  }
-
   private getBlockTipHeight(req: Request, res: Response) {
     try {
       const result = blocks.getCurrentBlockHeight();
@@ -981,6 +932,92 @@ class BitcoinRoutes {
     }
   }
 
+  private async $getPrevouts(req: Request, res: Response) {
+    try {
+      const outpoints = req.body;
+      if (!Array.isArray(outpoints) || outpoints.some((item) => !/^[a-fA-F0-9]{64}$/.test(item.txid) || typeof item.vout !== 'number')) {
+        handleError(req, res, 400, 'Invalid outpoints format');
+        return;
+      }
+
+      if (outpoints.length > 100) {
+        handleError(req, res, 400, 'Too many outpoints requested');
+        return;
+      }
+
+      const result = Array(outpoints.length).fill(null);
+      const memPool = mempool.getMempool();
+
+      for (let i = 0; i < outpoints.length; i++) {
+        const outpoint = outpoints[i];
+        let prevout: IEsploraApi.Vout | null = null;
+        let unconfirmed: boolean | null = null;
+
+        const mempoolTx = memPool[outpoint.txid];
+        if (mempoolTx) {
+          if (outpoint.vout < mempoolTx.vout.length) {
+            prevout = mempoolTx.vout[outpoint.vout];
+            unconfirmed = true;
+          }
+        } else {
+          try {
+            const rawPrevout = await bitcoinClient.getTxOut(outpoint.txid, outpoint.vout, false);
+            if (rawPrevout) {
+              prevout = {
+                value: Math.round(rawPrevout.value * 100000000),
+                scriptpubkey: rawPrevout.scriptPubKey.hex,
+                scriptpubkey_asm: rawPrevout.scriptPubKey.asm ? transactionUtils.convertScriptSigAsm(rawPrevout.scriptPubKey.hex) : '',
+                scriptpubkey_type: transactionUtils.translateScriptPubKeyType(rawPrevout.scriptPubKey.type),
+                scriptpubkey_address: rawPrevout.scriptPubKey && rawPrevout.scriptPubKey.address ? rawPrevout.scriptPubKey.address : '',
+              };
+              unconfirmed = false;
+            }
+          } catch (e) {
+            // Ignore bitcoin client errors, just leave prevout as null
+          }
+        }
+
+        if (prevout) {
+          result[i] = { prevout, unconfirmed };
+        }
+      }
+
+      res.json(result);
+
+    } catch (e) {
+      handleError(req, res, 500, 'Failed to get prevouts');
+    }
+  }
+
+  private getCpfpLocalTxs(req: Request, res: Response) {
+    try {
+      const transactions = req.body;
+
+      if (!Array.isArray(transactions) || transactions.some(tx =>
+        !tx || typeof tx !== 'object' ||
+        !/^[a-fA-F0-9]{64}$/.test(tx.txid) ||
+        typeof tx.weight !== 'number' ||
+        typeof tx.sigops !== 'number' ||
+        typeof tx.fee !== 'number' ||
+        !Array.isArray(tx.vin) ||
+        !Array.isArray(tx.vout)
+      )) {
+        handleError(req, res, 400, 'Invalid transactions format');
+        return;
+      }
+
+      if (transactions.length > 1) {
+        handleError(req, res, 400, 'More than one transaction is not supported yet');
+        return;
+      }
+
+      const cpfpInfo = calculateMempoolTxCpfp(transactions[0], mempool.getMempool(), true);
+      res.json([cpfpInfo]);
+
+    } catch (e) {
+      handleError(req, res, 500, 'Failed to calculate CPFP info');
+    }
+  }
 }
 
 export default new BitcoinRoutes();

backend/src/api/blocks.ts

@@ -33,8 +33,8 @@ import AccelerationRepository from '../repositories/AccelerationRepository';
 import { calculateFastBlockCpfp, calculateGoodBlockCpfp } from './cpfp';
 import mempool from './mempool';
 import CpfpRepository from '../repositories/CpfpRepository';
+import accelerationApi from './services/acceleration';
 import { parseDATUMTemplateCreator } from '../utils/bitcoin-script';
-import database from '../database';
 
 class Blocks {
   private blocks: BlockExtended[] = [];
@@ -1462,36 +1462,6 @@ class Blocks {
       // not a fatal error, we'll try again next time the indexer runs
     }
   }
-
-  public async $getBlockDefinitionHashes(): Promise<string[] | null> {
-    try {
-      const [rows]: any = await database.query(`SELECT DISTINCT(definition_hash) FROM blocks`);
-      if (rows && Array.isArray(rows)) {
-        return rows.map(r => r.definition_hash);
-      } else {
-        logger.debug(`Unable to retreive list of blocks.definition_hash from db (no result)`);
-        return null;
-      }
-    } catch (e) {
-      logger.debug(`Unable to retreive list of blocks.definition_hash from db (exception: ${e})`);
-      return null;
-    }
-  }
-
-  public async $getBlocksByDefinitionHash(definitionHash: string): Promise<string[] | null> {
-    try {
-      const [rows]: any = await database.query(`SELECT hash FROM blocks WHERE definition_hash = ?`, [definitionHash]);
-      if (rows && Array.isArray(rows)) {
-        return rows.map(r => r.hash);
-      } else {
-        logger.debug(`Unable to retreive list of blocks for definition hash ${definitionHash} from db (no result)`);
-        return null;
-      }
-    } catch (e) {
-      logger.debug(`Unable to retreive list of blocks for definition hash ${definitionHash} from db (exception: ${e})`);
-      return null;
-    }
-  }
 }
 
 export default new Blocks();

backend/src/api/cpfp.ts

@@ -167,8 +167,10 @@ export function calculateGoodBlockCpfp(height: number, transactions: MempoolTran
 /**
  * Takes a mempool transaction and a copy of the current mempool, and calculates the CPFP data for
  * that transaction (and all others in the same cluster)
+ * If the passed transaction is not guaranteed to be in the mempool, set localTx to true: this will
+ * prevent updating the CPFP data of other transactions in the cluster
  */
-export function calculateMempoolTxCpfp(tx: MempoolTransactionExtended, mempool: { [txid: string]: MempoolTransactionExtended }): CpfpInfo {
+export function calculateMempoolTxCpfp(tx: MempoolTransactionExtended, mempool: { [txid: string]: MempoolTransactionExtended }, localTx: boolean = false): CpfpInfo {
   if (tx.cpfpUpdated && Date.now() < (tx.cpfpUpdated + CPFP_UPDATE_INTERVAL)) {
     tx.cpfpDirty = false;
     return {
@@ -198,17 +200,26 @@ export function calculateMempoolTxCpfp(tx: MempoolTransactionExtended, mempool:
     totalFee += tx.fees.base;
   }
   const effectiveFeePerVsize = totalFee / totalVsize;
-  for (const tx of cluster.values()) {
-    mempool[tx.txid].effectiveFeePerVsize = effectiveFeePerVsize;
-    mempool[tx.txid].ancestors = Array.from(tx.ancestors.values()).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
-    mempool[tx.txid].descendants = Array.from(cluster.values()).filter(entry => entry.txid !== tx.txid && !tx.ancestors.has(entry.txid)).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
-    mempool[tx.txid].bestDescendant = null;
-    mempool[tx.txid].cpfpChecked = true;
-    mempool[tx.txid].cpfpDirty = true;
-    mempool[tx.txid].cpfpUpdated = Date.now();
-  }
 
-  tx = mempool[tx.txid];
+  if (localTx) {
+    tx.effectiveFeePerVsize = effectiveFeePerVsize;
+    tx.ancestors = Array.from(cluster.get(tx.txid)?.ancestors.values() || []).map(ancestor => ({ txid: ancestor.txid, weight: ancestor.weight, fee: ancestor.fees.base }));
+    tx.descendants = Array.from(cluster.values()).filter(entry => entry.txid !== tx.txid && !cluster.get(tx.txid)?.ancestors.has(entry.txid)).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
+    tx.bestDescendant = null;
+  } else {
+    for (const tx of cluster.values()) {
+      mempool[tx.txid].effectiveFeePerVsize = effectiveFeePerVsize;
+      mempool[tx.txid].ancestors = Array.from(tx.ancestors.values()).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
+      mempool[tx.txid].descendants = Array.from(cluster.values()).filter(entry => entry.txid !== tx.txid && !tx.ancestors.has(entry.txid)).map(tx => ({ txid: tx.txid, weight: tx.weight, fee: tx.fees.base }));
+      mempool[tx.txid].bestDescendant = null;
+      mempool[tx.txid].cpfpChecked = true;
+      mempool[tx.txid].cpfpDirty = true;
+      mempool[tx.txid].cpfpUpdated = Date.now();
+    }
+
+    tx = mempool[tx.txid];
+
+  }
 
   return {
     ancestors: tx.ancestors || [],

backend/src/api/database-migration.ts

@@ -7,7 +7,7 @@ import cpfpRepository from '../repositories/CpfpRepository';
 import { RowDataPacket } from 'mysql2';
 
 class DatabaseMigration {
-  private static currentVersion = 95;
+  private static currentVersion = 94;
   private queryTimeout = 3600_000;
   private statisticsAddedIndexed = false;
   private uniqueLogs: string[] = [];
@@ -1118,18 +1118,6 @@ class DatabaseMigration {
       }
       await this.updateToSchemaVersion(94);
     }
-
-    // blocks pools-v2.json hash
-    if (databaseSchemaVersion < 95) {
-      let poolJsonSha = 'f737d86571d190cf1a1a3cf5fd86b33ba9624254';
-      const [poolJsonShaDb]: any[] = await DB.query(`SELECT string FROM state WHERE name = 'pools_json_sha'`);
-      if (poolJsonShaDb?.length > 0) {
-        poolJsonSha = poolJsonShaDb[0].string;
-      }
-      await this.$executeQuery(`ALTER TABLE blocks ADD definition_hash varchar(255) NOT NULL DEFAULT "${poolJsonSha}"`);
-      await this.$executeQuery('ALTER TABLE blocks ADD INDEX `definition_hash` (`definition_hash`)');
-      await this.updateToSchemaVersion(95);
-    }
   }
 
   /**

backend/src/api/pools-parser.ts

@@ -19,6 +19,15 @@ class PoolsParser {
     'addresses': '[]',
     'slug': 'unknown'
   };
+  private uniqueLogs: string[] = [];
+
+  private uniqueLog(loggerFunction: any, msg: string): void {
+    if (this.uniqueLogs.includes(msg)) {
+      return;
+    }
+    this.uniqueLogs.push(msg);
+    loggerFunction(msg);
+  }
 
   public setMiningPools(pools): void {
     for (const pool of pools) {

backend/src/api/rbf-cache.ts

@@ -119,11 +119,7 @@ class RbfCache {
 
 
   public add(replaced: MempoolTransactionExtended[], newTxExtended: MempoolTransactionExtended): void {
-    if ( !newTxExtended
-      || !replaced?.length
-      || this.txs.has(newTxExtended.txid)
-      || !(replaced.some(tx => !this.replacedBy.has(tx.txid)))
-    ) {
+    if (!newTxExtended || !replaced?.length || this.txs.has(newTxExtended.txid)) {
       return;
     }
 

backend/src/api/services/stratum.ts

@@ -1,105 +0,0 @@
-import { WebSocket } from 'ws';
-import logger from '../../logger';
-import config from '../../config';
-import websocketHandler from '../websocket-handler';
-
-export interface StratumJob {
-  pool: number;
-  height: number;
-  coinbase: string;
-  scriptsig: string;
-  reward: number;
-  jobId: string;
-  extraNonce: string;
-  extraNonce2Size: number;
-  prevHash: string;
-  coinbase1: string;
-  coinbase2: string;
-  merkleBranches: string[];
-  version: string;
-  bits: string;
-  time: string;
-  timestamp: number;
-  cleanJobs: boolean;
-  received: number;
-}
-
-function isStratumJob(obj: any): obj is StratumJob {
-  return obj
-    && typeof obj === 'object'
-    && 'pool' in obj
-    && 'prevHash' in obj
-    && 'height' in obj
-    && 'received' in obj
-    && 'version' in obj
-    && 'timestamp' in obj
-    && 'bits' in obj
-    && 'merkleBranches' in obj
-    && 'cleanJobs' in obj;
-}
-
-class StratumApi {
-  private ws: WebSocket | null = null;
-  private runWebsocketLoop: boolean = false;
-  private startedWebsocketLoop: boolean = false;
-  private websocketConnected: boolean = false;
-  private jobs: Record<string, StratumJob> = {};
-
-  public constructor() {}
-
-  public getJobs(): Record<string, StratumJob> {
-    return this.jobs;
-  }
-
-  private handleWebsocketMessage(msg: any): void {
-    if (isStratumJob(msg)) {
-      this.jobs[msg.pool] = msg;
-      websocketHandler.handleNewStratumJob(this.jobs[msg.pool]);
-    }
-  }
-
-  public async connectWebsocket(): Promise<void> {
-    if (!config.STRATUM.ENABLED) {
-      return;
-    }
-    this.runWebsocketLoop = true;
-    if (this.startedWebsocketLoop) {
-      return;
-    }
-    while (this.runWebsocketLoop) {
-      this.startedWebsocketLoop = true;
-      if (!this.ws) {
-        this.ws = new WebSocket(`${config.STRATUM.API}`);
-        this.websocketConnected = true;
-
-        this.ws.on('open', () => {
-          logger.info('Stratum websocket opened');
-        });
-
-        this.ws.on('error', (error) => {
-          logger.err('Stratum websocket error: ' + error);
-          this.ws = null;
-          this.websocketConnected = false;
-        });
-
-        this.ws.on('close', () => {
-          logger.info('Stratum websocket closed');
-          this.ws = null;
-          this.websocketConnected = false;
-        });
-
-        this.ws.on('message', (data, isBinary) => {
-          try {
-            const parsedMsg = JSON.parse((isBinary ? data : data.toString()) as string);
-            this.handleWebsocketMessage(parsedMsg);
-          } catch (e) {
-            logger.warn('Failed to parse stratum websocket message: ' + (e instanceof Error ? e.message : e));
-          }
-        });
-      }
-      await new Promise(resolve => setTimeout(resolve, 5000));
-    }
-  }
-}
-
-export default new StratumApi();

backend/src/api/transaction-utils.ts

@@ -420,6 +420,29 @@ class TransactionUtils {
 
     return { prioritized, deprioritized };
   }
+
+  // Copied from https://github.com/mempool/mempool/blob/14e49126c3ca8416a8d7ad134a95c5e090324d69/backend/src/api/bitcoin/bitcoin-api.ts#L324
+  public translateScriptPubKeyType(outputType: string): string {
+    const map = {
+      'pubkey': 'p2pk',
+      'pubkeyhash': 'p2pkh',
+      'scripthash': 'p2sh',
+      'witness_v0_keyhash': 'v0_p2wpkh',
+      'witness_v0_scripthash': 'v0_p2wsh',
+      'witness_v1_taproot': 'v1_p2tr',
+      'nonstandard': 'nonstandard',
+      'multisig': 'multisig',
+      'anchor': 'anchor',
+      'nulldata': 'op_return'
+    };
+
+    if (map[outputType]) {
+      return map[outputType];
+    } else {
+      return 'unknown';
+    }
+  }
+  
 }
 
 export default new TransactionUtils();

backend/src/api/websocket-handler.ts

@@ -38,7 +38,6 @@ interface AddressTransactions {
 import bitcoinSecondClient from './bitcoin/bitcoin-second-client';
 import { calculateMempoolTxCpfp } from './cpfp';
 import { getRecentFirstSeen } from '../utils/file-read';
-import stratumApi, { StratumJob } from './services/stratum';
 
 // valid 'want' subscriptions
 const wantable = [
@@ -404,16 +403,6 @@ class WebsocketHandler {
             delete client['track-mempool'];
           }
 
-          if (parsedMessage && parsedMessage['track-stratum'] != null) {
-            if (parsedMessage['track-stratum']) {
-              const sub = parsedMessage['track-stratum'];
-              client['track-stratum'] = sub;
-              response['stratumJobs'] = this.socketData['stratumJobs'];
-            } else {
-              client['track-stratum'] = false;
-            }
-          }
-
           if (Object.keys(response).length) {
             client.send(this.serializeResponse(response));
           }
@@ -1395,23 +1384,6 @@ class WebsocketHandler {
     await statistics.runStatistics();
   }
 
-  public handleNewStratumJob(job: StratumJob): void {
-    this.updateSocketDataFields({ 'stratumJobs': stratumApi.getJobs() });
-
-    for (const server of this.webSocketServers) {
-      server.clients.forEach((client) => {
-        if (client.readyState !== WebSocket.OPEN) {
-          return;
-        }
-        if (client['track-stratum'] && (client['track-stratum'] === 'all' || client['track-stratum'] === job.pool)) {
-          client.send(JSON.stringify({
-            'stratumJob': job
-        }));
-        }
-      });
-    }
-  }
-
   // takes a dictionary of JSON serialized values
   // and zips it together into a valid JSON object
   private serializeResponse(response): string {

backend/src/config.ts

@@ -165,10 +165,6 @@ interface IConfig {
   WALLETS: {
     ENABLED: boolean;
     WALLETS: string[];
-  },
-  STRATUM: {
-    ENABLED: boolean;
-    API: string;
   }
 }
 
@@ -336,10 +332,6 @@ const defaults: IConfig = {
     'ENABLED': false,
     'WALLETS': [],
   },
-  'STRATUM': {
-    'ENABLED': false,
-    'API': 'http://localhost:1234',
-  }
 };
 
 class Config implements IConfig {
@@ -362,7 +354,6 @@ class Config implements IConfig {
   REDIS: IConfig['REDIS'];
   FIAT_PRICE: IConfig['FIAT_PRICE'];
   WALLETS: IConfig['WALLETS'];
-  STRATUM: IConfig['STRATUM'];
 
   constructor() {
     const configs = this.merge(configFromFile, defaults);
@@ -385,7 +376,6 @@ class Config implements IConfig {
     this.REDIS = configs.REDIS;
     this.FIAT_PRICE = configs.FIAT_PRICE;
     this.WALLETS = configs.WALLETS;
-    this.STRATUM = configs.STRATUM;
   }
 
   merge = (...objects: object[]): IConfig => {

backend/src/index.ts

@@ -48,7 +48,6 @@ import accelerationRoutes from './api/acceleration/acceleration.routes';
 import aboutRoutes from './api/about.routes';
 import mempoolBlocks from './api/mempool-blocks';
 import walletApi from './api/services/wallets';
-import stratumApi from './api/services/stratum';
 
 class Server {
   private wss: WebSocket.Server | undefined;
@@ -321,9 +320,6 @@ class Server {
     loadingIndicators.setProgressChangedCallback(websocketHandler.handleLoadingChanged.bind(websocketHandler));
 
     accelerationApi.connectWebsocket();
-    if (config.STRATUM.ENABLED) {
-      stratumApi.connectWebsocket();
-    }
   }
 
   setUpHttpApiRoutes(): void {

backend/src/mempool.interfaces.ts

@@ -325,8 +325,6 @@ export interface BlockExtension {
   // Requires coinstatsindex, will be set to NULL otherwise
   utxoSetSize: number | null;
   totalInputAmt: number | null;
-  // pools-v2.json git hash
-  definitionHash: string | undefined;
 }
 
 /**

backend/src/repositories/BlocksRepository.ts

@@ -15,7 +15,6 @@ import blocks from '../api/blocks';
 import BlocksAuditsRepository from './BlocksAuditsRepository';
 import transactionUtils from '../api/transaction-utils';
 import { parseDATUMTemplateCreator } from '../utils/bitcoin-script';
-import poolsUpdater from '../tasks/pools-updater';
 
 interface DatabaseBlock {
   id: string;
@@ -115,16 +114,16 @@ class BlocksRepository {
 
     try {
       const query = `INSERT INTO blocks(
-        height,             hash,                     blockTimestamp,    size,
-        weight,             tx_count,                 coinbase_raw,      difficulty,
-        pool_id,            fees,                     fee_span,          median_fee,
-        reward,             version,                  bits,              nonce,
-        merkle_root,        previous_block_hash,      avg_fee,           avg_fee_rate,
-        median_timestamp,   header,                   coinbase_address,  coinbase_addresses,
-        coinbase_signature, utxoset_size,             utxoset_change,    avg_tx_size,
-        total_inputs,       total_outputs,            total_input_amt,   total_output_amt,
-        fee_percentiles,    segwit_total_txs,         segwit_total_size, segwit_total_weight,
-        median_fee_amt,     coinbase_signature_ascii, definition_hash
+        height,             hash,                blockTimestamp,    size,
+        weight,             tx_count,            coinbase_raw,      difficulty,
+        pool_id,            fees,                fee_span,          median_fee,
+        reward,             version,             bits,              nonce,
+        merkle_root,        previous_block_hash, avg_fee,           avg_fee_rate,
+        median_timestamp,   header,              coinbase_address,  coinbase_addresses,
+        coinbase_signature, utxoset_size,        utxoset_change,    avg_tx_size,
+        total_inputs,       total_outputs,       total_input_amt,   total_output_amt,
+        fee_percentiles,    segwit_total_txs,    segwit_total_size, segwit_total_weight,
+        median_fee_amt,     coinbase_signature_ascii
       ) VALUE (
         ?, ?, FROM_UNIXTIME(?), ?,
         ?, ?, ?, ?,
@@ -135,7 +134,7 @@ class BlocksRepository {
         ?, ?, ?, ?,
         ?, ?, ?, ?,
         ?, ?, ?, ?,
-        ?, ?, ?
+        ?, ?
       )`;
 
       const poolDbId = await PoolsRepository.$getPoolByUniqueId(block.extras.pool.id);
@@ -182,7 +181,6 @@ class BlocksRepository {
         block.extras.segwitTotalWeight,
         block.extras.medianFeeAmt,
         truncatedCoinbaseSignatureAscii,
-        poolsUpdater.currentSha
       ];
 
       await DB.query(query, params);
@@ -1015,9 +1013,9 @@ class BlocksRepository {
   public async $savePool(id: string, poolId: number): Promise<void> {
     try {
       await DB.query(`
-        UPDATE blocks SET pool_id = ?, definition_hash = ?
+        UPDATE blocks SET pool_id = ?
         WHERE hash = ?`,
-        [poolId, poolsUpdater.currentSha, id]
+        [poolId, id]
       );
     } catch (e) {
       logger.err(`Cannot update block pool. Reason: ` + (e instanceof Error ? e.message : e));

backend/src/tasks/pools-updater.ts

@@ -88,8 +88,8 @@ class PoolsUpdater {
 
       try {
         await DB.query('START TRANSACTION;');
-        await this.updateDBSha(githubSha);
         await poolsParser.migratePoolsJson();
+        await this.updateDBSha(githubSha);
         await DB.query('COMMIT;');
       } catch (e) {
         logger.err(`Could not migrate mining pools, rolling back. Exception: ${JSON.stringify(e)}`, this.tag);
@@ -121,7 +121,7 @@ class PoolsUpdater {
   /**
    * Fetch our latest pools-v2.json sha from the db
    */
-  public async getShaFromDb(): Promise<string | null> {
+  private async getShaFromDb(): Promise<string | null> {
     try {
       const [rows]: any[] = await DB.query('SELECT string FROM state WHERE name="pools_json_sha"');
       return (rows.length > 0 ? rows[0].string : null);

docker/backend/mempool-config.json

@@ -148,10 +148,6 @@
     "API": "__MEMPOOL_SERVICES_API__",
     "ACCELERATIONS": __MEMPOOL_SERVICES_ACCELERATIONS__
   },
-  "STRATUM": {
-    "ENABLED": __STRATUM_ENABLED__,
-    "API": "__STRATUM_API__"
-  },
   "REDIS": {
     "ENABLED": __REDIS_ENABLED__,
     "UNIX_SOCKET_PATH": "__REDIS_UNIX_SOCKET_PATH__",

docker/backend/start.sh

@@ -149,10 +149,6 @@ __REPLICATION_SERVERS__=${REPLICATION_SERVERS:=[]}
 __MEMPOOL_SERVICES_API__=${MEMPOOL_SERVICES_API:="https://mempool.space/api/v1/services"}
 __MEMPOOL_SERVICES_ACCELERATIONS__=${MEMPOOL_SERVICES_ACCELERATIONS:=false}
 
-# STRATUM
-__STRATUM_ENABLED__=${STRATUM_ENABLED:=false}
-__STRATUM_API__=${STRATUM_API:="http://localhost:1234"}
-
 # REDIS
 __REDIS_ENABLED__=${REDIS_ENABLED:=false}
 __REDIS_UNIX_SOCKET_PATH__=${REDIS_UNIX_SOCKET_PATH:=""}
@@ -304,10 +300,6 @@ sed -i "s!__REPLICATION_SERVERS__!${__REPLICATION_SERVERS__}!g" mempool-config.j
 sed -i "s!__MEMPOOL_SERVICES_API__!${__MEMPOOL_SERVICES_API__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_SERVICES_ACCELERATIONS__!${__MEMPOOL_SERVICES_ACCELERATIONS__}!g" mempool-config.json
 
-# STRATUM
-sed -i "s!__STRATUM_ENABLED__!${__STRATUM_ENABLED__}!g" mempool-config.json
-sed -i "s!__STRATUM_API__!${__STRATUM_API__}!g" mempool-config.json
-
 # REDIS
 sed -i "s!__REDIS_ENABLED__!${__REDIS_ENABLED__}!g" mempool-config.json
 sed -i "s!__REDIS_UNIX_SOCKET_PATH__!${__REDIS_UNIX_SOCKET_PATH__}!g" mempool-config.json

docker/docker-compose.yml

@@ -11,14 +11,10 @@ services:
     stop_grace_period: 1m
     command: "./wait-for db:3306 --timeout=720 -- nginx -g 'daemon off;'"
     ports:
-      - 8080:8080
+      - 80:8080
   api:
     environment:
-      MEMPOOL_BACKEND: "electrum"
-      ELECTRUM_HOST: "172.27.0.1"
-      ELECTRUM_PORT: "50001"
-      ELECTRUM_TLS_ENABLED: "false"
-
+      MEMPOOL_BACKEND: "none"
       CORE_RPC_HOST: "172.27.0.1"
       CORE_RPC_PORT: "8332"
       CORE_RPC_USERNAME: "mempool"

docker/frontend/entrypoint.sh

@@ -45,7 +45,6 @@ __SERVICES_API__=${SERVICES_API:=https://mempool.space/api/v1/services}
 __PUBLIC_ACCELERATIONS__=${PUBLIC_ACCELERATIONS:=false}
 __HISTORICAL_PRICE__=${HISTORICAL_PRICE:=true}
 __ADDITIONAL_CURRENCIES__=${ADDITIONAL_CURRENCIES:=false}
-__STRATUM_ENABLED__=${STRATUM_ENABLED:=false}
 
 # Export as environment variables to be used by envsubst
 export __MAINNET_ENABLED__
@@ -77,7 +76,6 @@ export __SERVICES_API__
 export __PUBLIC_ACCELERATIONS__
 export __HISTORICAL_PRICE__
 export __ADDITIONAL_CURRENCIES__
-export __STRATUM_ENABLED__
 
 folder=$(find /var/www/mempool -name "config.js" | xargs dirname)
 echo ${folder}

docker/init.sh

@@ -13,8 +13,8 @@ localhostIP="127.0.0.1"
 cp ./docker/frontend/* ./frontend
 cp ./nginx.conf ./frontend/
 cp ./nginx-mempool.conf ./frontend/
-# sed -i"" -e "s/${localhostIP}:80/0.0.0.0:__MEMPOOL_FRONTEND_HTTP_PORT__/g" ./frontend/nginx.conf
-# sed -i"" -e "s/${localhostIP}/0.0.0.0/g" ./frontend/nginx.conf
+sed -i"" -e "s/${localhostIP}:80/0.0.0.0:__MEMPOOL_FRONTEND_HTTP_PORT__/g" ./frontend/nginx.conf
+sed -i"" -e "s/${localhostIP}/0.0.0.0/g" ./frontend/nginx.conf
 sed -i"" -e "s/user nobody;//g" ./frontend/nginx.conf
 sed -i"" -e "s!/etc/nginx/nginx-mempool.conf!/etc/nginx/conf.d/nginx-mempool.conf!g" ./frontend/nginx.conf
 sed -i"" -e "s/${localhostIP}:8999/__MEMPOOL_BACKEND_MAINNET_HTTP_HOST__:__MEMPOOL_BACKEND_MAINNET_HTTP_PORT__/g" ./frontend/nginx-mempool.conf

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

@@ -344,9 +344,7 @@ describe('Mainnet', () => {
       cy.visit('/');
       cy.waitForSkeletonGone();
 
-      //TODO(knorrium): add a check for the proxied server
-      // cy.changeNetwork('testnet4');
-
+      cy.changeNetwork('testnet4');
       cy.changeNetwork('signet');
       cy.changeNetwork('mainnet');
     });

frontend/mempool-frontend-config.sample.json

@@ -27,6 +27,5 @@
   "ACCELERATOR": false,
   "ACCELERATOR_BUTTON": true,
   "PUBLIC_ACCELERATIONS": false,
-  "STRATUM_ENABLED": false,
   "SERVICES_API": "https://mempool.space/api/v1/services"
 }

frontend/package-lock.json

@@ -33,7 +33,7 @@
         "browserify": "^17.0.0",
         "clipboard": "^2.0.11",
         "domino": "^2.1.6",
-        "echarts": "~5.6.0",
+        "echarts": "~5.5.0",
         "esbuild": "^0.24.0",
         "ngx-echarts": "~17.2.0",
         "ngx-infinite-scroll": "^17.0.0",
@@ -8724,12 +8724,12 @@
       }
     },
     "node_modules/echarts": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
-      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.6.1"
+        "zrender": "5.5.0"
       }
     },
     "node_modules/echarts/node_modules/tslib": {
@@ -18366,9 +18366,9 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
-      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
       "dependencies": {
         "tslib": "2.3.0"
       }
@@ -24485,12 +24485,12 @@
       }
     },
     "echarts": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
-      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
       "requires": {
         "tslib": "2.3.0",
-        "zrender": "5.6.1"
+        "zrender": "5.5.0"
       },
       "dependencies": {
         "tslib": {
@@ -31485,9 +31485,9 @@
       }
     },
     "zrender": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
-      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
       "requires": {
         "tslib": "2.3.0"
       },

frontend/package.json

@@ -86,7 +86,7 @@
     "browserify": "^17.0.0",
     "clipboard": "^2.0.11",
     "domino": "^2.1.6",
-    "echarts": "~5.6.0",
+    "echarts": "~5.5.0",
     "ngx-echarts": "~17.2.0",
     "ngx-infinite-scroll": "^17.0.0",
     "qrcode": "1.5.1",

frontend/proxy.conf.staging.js

@@ -3,10 +3,8 @@ const fs = require('fs');
 let PROXY_CONFIG = require('./proxy.conf');
 
 PROXY_CONFIG.forEach(entry => {
-  const hostname = process.env.CYPRESS_REROUTE_TESTNET === 'true' ? 'mempool-staging.fra.mempool.space' : 'node201.fmt.mempool.space';
-  console.log(`e2e tests running against ${hostname}`);
-  entry.target = entry.target.replace("mempool.space", hostname);
-  entry.target = entry.target.replace("liquid.network", "liquid-staging.fmt.mempool.space");
+  entry.target = entry.target.replace("mempool.space", "mempool-staging.fra.mempool.space");
+  entry.target = entry.target.replace("liquid.network", "liquid-staging.fra.mempool.space");
 });
 
 module.exports = PROXY_CONFIG;

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

@@ -217,7 +217,7 @@
           <ng-container>
             <ng-template ngFor let-sponsor [ngForOf]="profiles.whales">
               <a [href]="'https://x.com/' + sponsor.username" target="_blank" rel="sponsored" [title]="sponsor.username">
-                <img class="image" [src]="'/api/v1/services/account/images/' + sponsor.username" onError="this.src = '/resources/profile/grumpy.svg'; this.className = 'image unknown'"/>
+                <img class="image" [src]="'/api/v1/services/account/images/' + sponsor.username + '/md5=' + sponsor.imageMd5" onError="this.src = '/resources/profile/grumpy.svg'; this.className = 'image unknown'"/>
               </a>
             </ng-template>
           </ng-container>
@@ -229,7 +229,7 @@
         <div class="wrapper">
           <ng-template ngFor let-sponsor [ngForOf]="profiles.chads">
             <a [href]="'https://x.com/' + sponsor.username" target="_blank" rel="sponsored" [title]="sponsor.username">
-              <img class="image" [src]="'/api/v1/services/account/images/' + sponsor.username" onError="this.src = '/resources/profile/grumpy.svg'; this.className = 'image unknown'"/>
+              <img class="image" [src]="'/api/v1/services/account/images/' + sponsor.username + '/md5=' + sponsor.imageMd5" onError="this.src = '/resources/profile/grumpy.svg'; this.className = 'image unknown'"/>
             </a>
           </ng-template>
         </div>

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

@@ -1,18 +1,10 @@
-<div class="box card w-100 accelerate-checkout-inner" [class.input-disabled]="isCheckoutLocked > 0" style="background: var(--box-bg)" id=acceleratePreviewAnchor>
+<div class="box card w-100" style="background: var(--box-bg)" id=acceleratePreviewAnchor>
   @if (accelerateError) {
-    @if (accelerateError.includes('Payment declined')) {
-      <div class="row mb-1 text-center">
-        <div class="col-sm">
-          <h1 style="font-size: larger;">{{ accelerateError }}</h1>
-        </div>
+    <div class="row mb-1 text-center">
+      <div class="col-sm">
+        <h1 style="font-size: larger;" i18n="accelerator.sorry-error-title">Sorry, something went wrong!</h1>
       </div>
-    } @else {
-      <div class="row mb-1 text-center">
-        <div class="col-sm">
-          <h1 style="font-size: larger;" i18n="accelerator.sorry-error-title">Sorry, something went wrong!</h1>
-        </div>
-      </div>
-    }
+    </div>
     <div class="row text-center mt-1">
       <div class="col-sm">
         <div class="d-flex flex-row justify-content-center align-items-center">
@@ -365,11 +357,11 @@
           <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true" class="ml-2"></app-active-acceleration-box>
         </div>
       </div>
-      <div class="payment-area" style="font-size: 14px;">
+      <div class="payment-area mt-2 p-2" style="font-size: 14px;">
         <div class="row text-center justify-content-center mx-2">
-          <span i18n="accelerator.payment-to-mempool-space">Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + tx.txid" target="_blank">{{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}</a></span>
+          <p i18n="accelerator.payment-to-mempool-space">Payment to mempool.space for acceleration of txid <a [routerLink]="'/tx/' + tx.txid" target="_blank">{{ tx.txid.substr(0, 10) }}..{{ tx.txid.substr(-10) }}</a></p>
         </div>
-        @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay)) {
+        @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
           <div class="row">
             <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
               <p><ng-container i18n="accelerator.your-account-will-be-debited">Your account will be debited no more than</ng-container>&nbsp;<small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></p>
@@ -386,12 +378,9 @@
                   <p><ng-container i18n="transaction.pay|Pay button label">Pay</ng-container>&nbsp;<span><small style="font-family: monospace;">{{ ((invoice.btcDue * 100_000_000) || cost) | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span></p>
                   <app-bitcoin-invoice style="width: 100%;" [invoice]="invoice" [minimal]="true" (completed)="bitcoinPaymentCompleted()"></app-bitcoin-invoice>
                 } @else if (btcpayInvoiceFailed) {
-                  <div class="btcpay-invoice">
-                    <fa-icon style="font-size: 20px; color: var(--red)" [icon]="['fas', 'circle-xmark']"></fa-icon>
-                    <span i18n="accelerator.failed-to-load-invoice">Failed to load invoice</span>
-                    @if (!loadingBtcpayInvoice) {
-                      <button class="btn btn-sm btn-secondary mt-0 mt-md-1" (click)="requestBTCPayInvoice()">Retry ↻</button>
-                    }
+                  <p i18n="accelerator.failed-to-load-invoice">Failed to load invoice</p>
+                  <div class="d-flex flex-column align-items-center justify-content-center" style="width: 100%; height: 292px;">
+                    <fa-icon style="font-size: 24px; color: var(--red)" [icon]="['fas', 'circle-xmark']"></fa-icon>
                   </div>
                 } @else {
                   <p i18n="accelerator.loading-invoice">Loading invoice...</p>
@@ -400,13 +389,13 @@
                   </div>
                 }
               </div>
-              @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay || canPayWithCardOnFile) {
+              @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay) {
                 <div class="col-sm text-center flex-grow-0  d-flex flex-column justify-content-center align-items-center">
-                  <p class="text-nowrap">&mdash;&mdash;<span i18n="or"> OR </span>&mdash;&mdash;</p>
+                  <p class="text-nowrap">&mdash;<span i18n="or">OR</span>&mdash;</p>
                 </div>
               }
             }
-            @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay || canPayWithCardOnFile) {
+            @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay) {
               <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
                 <p><ng-container i18n="transaction.pay|Pay button label">Pay</ng-container>&nbsp;<app-fiat [value]="cost"></app-fiat> with</p>
                 @if (canPayWithCashapp) {
@@ -424,17 +413,6 @@
                     <img src="/resources/google-pay.png" height=37>
                   </div>
                 }
-                @if (canPayWithCardOnFile) {
-                  @if (canPayWithCashapp || canPayWithApplePay || canPayWithGooglePay) { <span class="mt-1 mb-1"></span> }
-                  <div class="paymentMethod mx-2 d-flex justify-content-center align-items-center" style="width: 200px; height: 55px" (click)="moveToStep('cardonfile')">
-                    @if (['VISA', 'MASTERCARD', 'JCB', 'DISCOVER', 'DISCOVER_DINERS', 'AMERICAN_EXPRESS'].includes(estimate?.availablePaymentMethods?.cardOnFile?.card?.brand)) {
-                      <app-svg-images [name]="estimate?.availablePaymentMethods?.cardOnFile?.card?.brand" height="33" class="mr-2"></app-svg-images>
-                    } @else {
-                      <app-svg-images name="OTHER_BRAND" height="33" class="mr-2"></app-svg-images>
-                    }
-                    <span style="font-size: 22px; padding-bottom: 3px">{{ estimate?.availablePaymentMethods?.cardOnFile?.card?.last_4 }}</span>
-                  </div>
-                }
               </div>
             }
           </div>
@@ -457,7 +435,7 @@
         <button type="button" class="mt-1 btn btn-secondary btn-sm rounded-pill align-self-center" style="width: 200px" (click)="moveToStep('summary')" i18n="go-back">Go back</button>
       </div>
     </div>
-  } @else if (step === 'cashapp' || step === 'applepay' || step === 'googlepay' || step === 'cardonfile') {
+  } @else if (step === 'cashapp' || step === 'applepay' || step === 'googlepay') {
     <!-- Show checkout page -->
     <div class="row mb-md-1 text-center" id="confirm-title">
       <div class="col-sm" id="confirm-payment-title">
@@ -473,7 +451,7 @@
       </div>
     </div>
 
-    @if (step === 'cashapp' && !loadingCashapp || step === 'applepay' && !loadingApplePay || step === 'googlepay' && !loadingGooglePay || step === 'cardonfile' && !loadingCardOnFile) {
+    @if (step === 'cashapp' && !loadingCashapp || step === 'applepay' && !loadingApplePay || step === 'googlepay' && !loadingGooglePay) {
       <div class="row text-center mt-1">
         <div class="col-sm">
           <div class="form-group w-100">
@@ -498,24 +476,14 @@
             <div id="cash-app-pay" class="d-inline-block" style="height: 50px" [style]="loadingCashapp ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''"></div>
           } @else if (step === 'googlepay') {
             <div id="google-pay-button" class="d-inline-block" style="height: 50px" [style]="loadingGooglePay ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''"></div>
-          } @else if (step === 'cardonfile') {
-            <div class="paymentMethod mx-2 d-flex justify-content-center align-items-center ml-auto mr-auto" style="width: 200px; height: 55px" (click)="requestCardOnFilePayment()" [style]="loadingCardOnFile ? 'opacity: 0; width: 0px; height: 0px; pointer-events: none;' : ''">
-              <fa-icon style="font-size: 24px; color: white" [icon]="['fas', 'credit-card']"></fa-icon>
-              <span class="ml-2" style="font-size: 22px">{{ estimate?.availablePaymentMethods?.cardOnFile?.card?.brand }} {{ estimate?.availablePaymentMethods?.cardOnFile?.card?.last_4 }}</span>
-            </div>
           }
-          @if (loadingCashapp || loadingApplePay || loadingGooglePay || loadingCardOnFile) {
+          @if (loadingCashapp || loadingApplePay || loadingGooglePay) {
           <div display="d-flex flex-row justify-content-center">
             <span i18n="accelerator.loading-payment-method">Loading payment method...</span>
             <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
           </div>
           }
         </div>
-        @if (isTokenizing > 0) {
-          <div class="d-flex flex-row justify-content-center">
-            <div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
-          </div>
-        }
       </div>
     </div>
 

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

@@ -8,13 +8,6 @@
   color: var(--green)
 }
 
-.accelerate-checkout-inner {
-  &.input-disabled {
-    pointer-events: none;
-    opacity: 0.75;
-  }
-}
-
 .paymentMethod {
   padding: 10px;
   background-color: var(--secondary);
@@ -153,11 +146,6 @@
 
 .payment-area {
   background: var(--bg);
-  margin-top: 0.5rem;
-  padding: 0.5rem;
-  @media (max-width: 575px) {
-    padding-bottom: 1.25rem;
-  }
 }
 
 .col.pie {
@@ -224,17 +212,4 @@
 }
 .apple-pay-button-white-with-line {
     -apple-pay-button-style: white-outline;
-}
-
-.btcpay-invoice {
-  display: flex;
-  height: 292px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  @media (max-width: 575px) {
-    height: 75px;
-    flex-direction: row;
-    gap: 5px;
-  }
 }

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

@@ -13,7 +13,7 @@ import { EnterpriseService } from '@app/services/enterprise.service';
 import { ApiService } from '@app/services/api.service';
 import { isDevMode } from '@angular/core';
 
-export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp' | 'applePay' | 'googlePay' | 'cardOnFile';
+export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp' | 'applePay' | 'googlePay';
 
 export type AccelerationEstimate = {
   hasAccess: boolean;
@@ -26,7 +26,7 @@ export type AccelerationEstimate = {
   mempoolBaseFee: number;
   vsizeFee: number;
   pools: number[];
-  availablePaymentMethods: Record<PaymentMethod, {min: number, max: number, card?: {card_id: string, last_4: string, brand: string, name: string, billing: any}}>;
+  availablePaymentMethods: Record<PaymentMethod, {min: number, max: number}>;
   unavailable?: boolean;
   options: { // recommended bid options
     fee: number; // recommended userBid in sats
@@ -49,7 +49,7 @@ export const MIN_BID_RATIO = 1;
 export const DEFAULT_BID_RATIO = 2;
 export const MAX_BID_RATIO = 4;
 
-type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'applepay' | 'googlepay' | 'cardonfile' | 'processing' | 'paid' | 'success';
+type CheckoutStep = 'quote' | 'summary' | 'checkout' | 'cashapp' | 'applepay' | 'googlepay' | 'processing' | 'paid' | 'success';
 
 @Component({
   selector: 'app-accelerate-checkout',
@@ -62,9 +62,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   @Input() miningStats: MiningStats;
   @Input() eta: ETA;
   @Input() scrollEvent: boolean;
+  @Input() cashappEnabled: boolean = true;
   @Input() applePayEnabled: boolean = false;
   @Input() googlePayEnabled: boolean = true;
-  @Input() cardOnFileEnabled: boolean = true;
   @Input() advancedEnabled: boolean = false;
   @Input() forceMobile: boolean = false;
   @Input() showDetails: boolean = false;
@@ -76,8 +76,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
 
   calculating = true;
   processing = false;
-  isCheckoutLocked = 0; // reference counter, 0 = unlocked, >0 = locked
-  isTokenizing = 0; // reference counter, 0 = false, >0 = true
   selectedOption: 'wait' | 'accel';
   cantPayReason = '';
   quoteError = ''; // error fetching estimate or initial data
@@ -117,7 +115,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   loadingCashapp = false;
   loadingApplePay = false;
   loadingGooglePay = false;
-  loadingCardOnFile = false;
   payments: any;
   cashAppPay: any;
   applePay: any;
@@ -157,7 +154,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         this.accelerateError = null;
         this.timePaid = 0;
         this.btcpayInvoiceFailed = false;
-        this.moveToStep('summary', true);
+        this.moveToStep('summary');
       } else {
         this.auth = auth;
       }
@@ -166,11 +163,11 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
 
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('cash_request_id')) { // Redirected from cashapp
-      this.moveToStep('processing', true);
+      this.moveToStep('processing');
       this.insertSquare();
       this.setupSquare();
     } else {
-      this.moveToStep('summary', true);
+      this.moveToStep('summary');
     }
 
     this.conversionsSubscription = this.stateService.conversions$.subscribe(
@@ -195,23 +192,20 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     }
     if (changes.accelerating && this.accelerating) {
       if (this.step === 'processing' || this.step === 'paid') {
-        this.moveToStep('success', true);
+        this.moveToStep('success');
       } else { // Edge case where the transaction gets accelerated by someone else or on another session
         this.closeModal();
       }
     }
   }
 
-  moveToStep(step: CheckoutStep, force: boolean = false): void {
-    if (this.isCheckoutLocked > 0 && !force) {
-      return;
-    }
+  moveToStep(step: CheckoutStep): void {
     this.processing = false;
     this._step = step;
     if (this.timeoutTimer) {
       clearTimeout(this.timeoutTimer);
     }
-    if (!this.estimate && ['quote', 'summary', 'checkout', 'processing'].includes(this.step)) {
+    if (!this.estimate && ['quote', 'summary', 'checkout'].includes(this.step)) {
       this.fetchEstimate();
     }
     if (this._step === 'checkout') {
@@ -220,9 +214,10 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     }
     if (this._step === 'checkout' && this.canPayWithBitcoin) {
       this.btcpayInvoiceFailed = false;
+      this.loadingBtcpayInvoice = true;
       this.invoice = null;
       this.requestBTCPayInvoice();
-    } else if (this._step === 'cashapp') {
+    } else if (this._step === 'cashapp' && this.cashappEnabled) {
       this.loadingCashapp = true;
       this.setupSquare();
       this.scrollToElementWithTimeout('confirm-title', 'center', 100);
@@ -234,10 +229,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       this.loadingGooglePay = true;
       this.setupSquare();
       this.scrollToElementWithTimeout('confirm-title', 'center', 100);
-    } else if (this._step === 'cardonfile' && this.cardOnFileEnabled) {
-      this.loadingCardOnFile = true;
-      this.setupSquare();
-      this.scrollToElementWithTimeout('confirm-title', 'center', 100);
     } else if (this._step === 'paid') {
       this.timePaid = Date.now();
       this.timeoutTimer = setTimeout(() => {
@@ -251,7 +242,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
 
   closeModal(): void {
     this.completed.emit(true);
-    this.moveToStep('summary', true);
+    this.moveToStep('summary');
   }
 
   /**
@@ -332,6 +323,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
           }
 
           if (this.step === 'checkout' && this.canPayWithBitcoin && !this.loadingBtcpayInvoice) {
+            this.loadingBtcpayInvoice = true;
             this.requestBTCPayInvoice();
           }
 
@@ -401,7 +393,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         this.audioService.playSound('ascend-chime-cartoon');
         this.showSuccess = true;
         this.estimateSubscription.unsubscribe();
-        this.moveToStep('paid', true);
+        this.moveToStep('paid');
       },
       error: (response) => {
         this.processing = false;
@@ -457,8 +449,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
             await this.requestApplePayPayment();
           } else if (this._step === 'googlepay') {
             await this.requestGooglePayPayment();
-          } else if (this._step === 'cardonfile') {
-            this.loadingCardOnFile = false;
           }
         },
         error: () => {
@@ -513,75 +503,56 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
           }
           this.loadingApplePay = false;
           applePayButton.addEventListener('click', async event => {
-            if (this.isCheckoutLocked > 0 || this.isTokenizing > 0) {
-              return;
-            }
             event.preventDefault();
-            try {
-              // lock the checkout UI and show a loading spinner until the square modals are finished
-              this.isCheckoutLocked++;
-              this.isTokenizing++;
-              const tokenResult = await this.applePay.tokenize();
-              if (tokenResult?.status === 'OK') {
-                const card = tokenResult.details?.card;
-                if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
-                  console.error(`Cannot retreive payment card details`);
-                  this.accelerateError = 'apple_pay_no_card_details';
-                  this.processing = false;
-                  return;
-                }
-                const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
-                // keep checkout in loading state until the acceleration request completes
-                this.isTokenizing++;
-                this.isCheckoutLocked++;
-                this.servicesApiService.accelerateWithApplePay$(
-                  this.tx.txid,
-                  tokenResult.token,
-                  cardTag,
-                  `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
-                  costUSD
-                ).subscribe({
-                  next: () => {
-                    this.processing = false;
-                    this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
-                    this.audioService.playSound('ascend-chime-cartoon');
-                    if (this.applePay) {
-                      this.applePay.destroy();
-                    }
-                    setTimeout(() => {
-                      this.isTokenizing--;
-                      this.isCheckoutLocked--;
-                      this.moveToStep('paid', true);
-                    }, 1000);
-                  },
-                  error: (response) => {
-                    this.processing = false;
-                    this.accelerateError = response.error;
-                    if (!(response.status === 403 && response.error === 'not_available')) {
-                      setTimeout(() => {
-                        this.isTokenizing--;
-                        this.isCheckoutLocked--;
-                        // Reset everything by reloading the page :D, can be improved
-                        const urlParams = new URLSearchParams(window.location.search);
-                        window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
-                      }, 10000);
-                    }
-                  }
-                });
-              } else {
+            const tokenResult = await this.applePay.tokenize();
+            if (tokenResult?.status === 'OK') {
+              const card = tokenResult.details?.card;
+              if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
+                console.error(`Cannot retreive payment card details`);
+                this.accelerateError = 'apple_pay_no_card_details';
                 this.processing = false;
-                let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
-                if (tokenResult.errors) {
-                  errorMessage += ` and errors: ${JSON.stringify(
-                    tokenResult.errors,
-                  )}`;
-                }
-                throw new Error(errorMessage);
+                return;
               }
-            } finally {
-              // always unlock the checkout once we're finished
-              this.isTokenizing--;
-              this.isCheckoutLocked--;
+              const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
+              this.servicesApiService.accelerateWithApplePay$(
+                this.tx.txid,
+                tokenResult.token,
+                cardTag,
+                `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+                costUSD
+              ).subscribe({
+                next: () => {
+                  this.processing = false;
+                  this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
+                  this.audioService.playSound('ascend-chime-cartoon');
+                  if (this.applePay) {
+                    this.applePay.destroy();
+                  }
+                  setTimeout(() => {
+                    this.moveToStep('paid');
+                  }, 1000);
+                },
+                error: (response) => {
+                  this.processing = false;
+                  this.accelerateError = response.error;
+                  if (!(response.status === 403 && response.error === 'not_available')) {
+                    setTimeout(() => {
+                      // Reset everything by reloading the page :D, can be improved
+                      const urlParams = new URLSearchParams(window.location.search);
+                      window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
+                    }, 3000);
+                  }
+                }
+              });
+            } else {
+              this.processing = false;
+              let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
+              if (tokenResult.errors) {
+                errorMessage += ` and errors: ${JSON.stringify(
+                  tokenResult.errors,
+                )}`;
+              }
+              throw new Error(errorMessage);
             }
           });
         } catch (e) {
@@ -631,193 +602,70 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         this.loadingGooglePay = false;
 
         document.getElementById('google-pay-button').addEventListener('click', async event => {
-          if (this.isCheckoutLocked > 0 || this.isTokenizing > 0) {
-            return;
-          }
           event.preventDefault();
-          try {
-            // lock the checkout UI and show a loading spinner until the square modals are finished
-            this.isCheckoutLocked++;
-            this.isTokenizing++;
-            const tokenResult = await this.googlePay.tokenize();
-            if (tokenResult?.status === 'OK') {
-              const card = tokenResult.details?.card;
-              if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
-                console.error(`Cannot retreive payment card details`);
-                this.accelerateError = 'apple_pay_no_card_details';
-                this.processing = false;
-                return;
-              }
-              const verificationToken = await this.$verifyBuyer(this.payments, tokenResult.token, tokenResult.details, costUSD.toFixed(2));
-              if (!verificationToken || !verificationToken.token) {
-                console.error(`SCA verification failed`);
-                this.accelerateError = 'SCA Verification Failed. Payment Declined.';
-                this.processing = false;
-                return;
-              }
-              const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
-              // keep checkout in loading state until the acceleration request completes
-              this.isCheckoutLocked++;
-              this.isTokenizing++;
-              this.servicesApiService.accelerateWithGooglePay$(
-                this.tx.txid,
-                tokenResult.token,
-                verificationToken.token,
-                cardTag,
-                `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
-                costUSD,
-                verificationToken.userChallenged
-              ).subscribe({
-                next: () => {
-                  this.processing = false;
-                  this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
-                  this.audioService.playSound('ascend-chime-cartoon');
-                  if (this.googlePay) {
-                    this.googlePay.destroy();
-                  }
-                  setTimeout(() => {
-                    this.isTokenizing--;
-                    this.isCheckoutLocked--;
-                    this.moveToStep('paid', true);
-                  }, 1000);
-                },
-                error: (response) => {
-                  this.processing = false;
-                  this.accelerateError = response.error;
-                  this.isTokenizing--;
-                  this.isCheckoutLocked--;
-                  if (!(response.status === 403 && response.error === 'not_available')) {
-                    setTimeout(() => {
-                      // Reset everything by reloading the page :D, can be improved
-                      const urlParams = new URLSearchParams(window.location.search);
-                      window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
-                    }, 10000);
-                  }
-                }
-              });
-            } else {
+          const tokenResult = await this.googlePay.tokenize();
+          if (tokenResult?.status === 'OK') {
+            const card = tokenResult.details?.card;
+            if (!card || !card.brand || !card.expMonth || !card.expYear || !card.last4) {
+              console.error(`Cannot retreive payment card details`);
+              this.accelerateError = 'apple_pay_no_card_details';
               this.processing = false;
-              let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
-              if (tokenResult.errors) {
-                errorMessage += ` and errors: ${JSON.stringify(
-                  tokenResult.errors,
-                )}`;
-              }
-              throw new Error(errorMessage);
+              return;
             }
-          } finally {
-            // always unlock the checkout once we're finished
-            this.isTokenizing--;
-            this.isCheckoutLocked--;
+            const verificationToken = await this.$verifyBuyer(this.payments, tokenResult.token, tokenResult.details, costUSD.toFixed(2));
+            if (!verificationToken) {
+              console.error(`SCA verification failed`);
+              this.accelerateError = 'SCA Verification Failed. Payment Declined.';
+              this.processing = false;
+              return;
+            }
+            const cardTag = md5(`${card.brand}${card.expMonth}${card.expYear}${card.last4}`.toLowerCase());
+            this.servicesApiService.accelerateWithGooglePay$(
+              this.tx.txid,
+              tokenResult.token,
+              verificationToken,
+              cardTag,
+              `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+              costUSD
+            ).subscribe({
+              next: () => {
+                this.processing = false;
+                this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
+                this.audioService.playSound('ascend-chime-cartoon');
+                if (this.googlePay) {
+                  this.googlePay.destroy();
+                }
+                setTimeout(() => {
+                  this.moveToStep('paid');
+                }, 1000);
+              },
+              error: (response) => {
+                this.processing = false;
+                this.accelerateError = response.error;
+                if (!(response.status === 403 && response.error === 'not_available')) {
+                  setTimeout(() => {
+                    // Reset everything by reloading the page :D, can be improved
+                    const urlParams = new URLSearchParams(window.location.search);
+                    window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
+                  }, 3000);
+                }
+              }
+            });
+          } else {
+            this.processing = false;
+            let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
+            if (tokenResult.errors) {
+              errorMessage += ` and errors: ${JSON.stringify(
+                tokenResult.errors,
+              )}`;
+            }
+            throw new Error(errorMessage);
           }
         });
       }
     );
   }
 
-  /**
-   * Card On File
-   */
-  async requestCardOnFilePayment(): Promise<void> {
-    if (this.processing) {
-      return;
-    }
-    if (this.conversionsSubscription) {
-      this.conversionsSubscription.unsubscribe();
-    }
-    
-    this.processing = true;
-    this.conversionsSubscription = this.stateService.conversions$.subscribe(
-      async (conversions) => {
-        this.conversions = conversions;
-
-        const costUSD = this.cost / 100_000_000 * conversions.USD;
-        if (this.isCheckoutLocked > 0) {
-          return;
-        }
-        const cardOnFile = this.estimate?.availablePaymentMethods?.cardOnFile;
-        if (!cardOnFile?.card) {
-          this.accelerateError = 'card_on_file_not_found';
-          return;
-        }
-        this.loadingCardOnFile = false;
-        
-        try {
-          this.isCheckoutLocked += 2;
-          this.isTokenizing += 2;
-          
-          const nameParts = cardOnFile.card.name.split(' ');
-          const assumedGivenName = nameParts[0];
-          const assumedFamilyName = nameParts.length > 1 ? nameParts[1] : undefined;
-          const verificationDetails = {
-            card: {
-              billing: {
-                givenName: assumedGivenName,
-                familyName: assumedFamilyName,
-                addressLines: [cardOnFile.card.billing.addressLine1 ?? ''],
-                city: cardOnFile.card.billing.locality ?? '',
-                state: cardOnFile.card.billing.administrativeDistrictLevel1 ?? '',
-                countyCode: cardOnFile.card.billing.country,
-              }
-            }
-          };
-          const verificationToken = await this.$verifyBuyer(this.payments, cardOnFile.card.card_id, verificationDetails, costUSD.toFixed(2));
-          if (!verificationToken || !verificationToken.token) {
-            console.error(`SCA verification failed`);
-            this.accelerateError = 'SCA Verification Failed. Payment Declined.';
-            this.processing = false;
-            return;
-          }
-
-          this.servicesApiService.accelerateWithCardOnFile$(
-            this.tx.txid,
-            cardOnFile.card.card_id,
-            verificationToken.token,
-            `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
-            costUSD,
-            verificationToken.userChallenged
-          ).subscribe({
-            next: () => {
-              this.processing = false;
-              this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
-              this.audioService.playSound('ascend-chime-cartoon');
-              setTimeout(() => {
-                this.isCheckoutLocked--;
-                this.isTokenizing--;
-                this.moveToStep('paid', true);
-              }, 1000);
-            },
-            error: (response) => {
-              this.processing = false;
-              this.accelerateError = response.error;
-              this.isCheckoutLocked--;
-              this.isTokenizing--;
-              if (!(response.status === 403 && response.error === 'not_available')) {
-                setTimeout(() => {
-                  // Reset everything by reloading the page :D, can be improved
-                  const urlParams = new URLSearchParams(window.location.search);
-                  window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
-                }, 3000);
-              }
-            }
-          });
-
-        } catch (e) {
-          console.log(e);
-          this.isCheckoutLocked--;
-          this.isTokenizing--;
-          this.processing = false;
-          this.accelerateError = e.message;
-
-        } finally {
-          // always unlock the checkout once we're finished
-          this.isCheckoutLocked--;
-          this.isTokenizing--;
-        }
-      }
-    );
-  }
-
   /**
    * CASHAPP
    */
@@ -838,7 +686,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
         }
 
         const redirectHostname = document.location.hostname === 'localhost' ? `http://localhost:4200`: `https://${document.location.hostname}`;
-        const costUSD = this.cost / 100_000_000 * conversions.USD;
+        const costUSD = this.step === 'processing' ? 69.69 : (this.cost / 100_000_000 * conversions.USD); // When we're redirected to this component, the payment data is already linked to the payment token, so does not matter what amonut we put in there, therefore it's 69.69
         const paymentRequest = this.payments.paymentRequest({
           countryCode: 'US',
           currencyCode: 'USD',
@@ -878,7 +726,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                   this.cashAppPay.destroy();
                 }
                 setTimeout(() => {
-                  this.moveToStep('paid', true);
+                  this.moveToStep('paid');
                   if (window.history.replaceState) {
                     const urlParams = new URLSearchParams(window.location.search);
                     window.history.replaceState(null, null, window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ''));
@@ -893,7 +741,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                     // Reset everything by reloading the page :D, can be improved
                     const urlParams = new URLSearchParams(window.location.search);
                     window.location.assign(window.location.toString().replace(`?cash_request_id=${urlParams.get('cash_request_id')}`, ``));
-                  }, 10000);
+                  }, 3000);
                 }
               }
             });
@@ -904,9 +752,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
 
   /**
-   * https://developer.squareup.com/docs/sca-overview
+   * Required in SCA Mandated Regions: Learn more at https://developer.squareup.com/docs/sca-overview
    */
-  async $verifyBuyer(payments, token, details, amount): Promise<{token: string, userChallenged: boolean}> {
+  async $verifyBuyer(payments, token, details, amount) {
     const verificationDetails = {
       amount: amount,
       currencyCode: 'USD',
@@ -926,26 +774,23 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
       token,
       verificationDetails,
     );
-    return verificationResults;
+    return verificationResults.token;
   }
 
   /**
    * BTCPay
    */
   async requestBTCPayInvoice(): Promise<void> {
-    this.loadingBtcpayInvoice = true;
     this.servicesApiService.generateBTCPayAcceleratorInvoice$(this.tx.txid, this.userBid).pipe(
       switchMap(response => {
         return this.servicesApiService.retreiveInvoice$(response.btcpayInvoiceId);
       }),
       catchError(error => {
         console.log(error);
-        this.loadingBtcpayInvoice = false;
         this.btcpayInvoiceFailed = true;
         return of(null);
       })
     ).subscribe((invoice) => {
-        this.loadingBtcpayInvoice = false;
         this.invoice = invoice;
         this.cd.markForCheck();
     });
@@ -955,7 +800,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     this.apiService.logAccelerationRequest$(this.tx.txid).subscribe();
     this.audioService.playSound('ascend-chime-cartoon');
     this.estimateSubscription.unsubscribe();
-    this.moveToStep('paid', true);
+    this.moveToStep('paid');
   }
 
   isLoggedIn(): boolean {
@@ -982,6 +827,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
 
   get couldPayWithCashapp(): boolean {
+    if (!this.cashappEnabled) {
+      return false;
+    }
     return !!this.estimate?.availablePaymentMethods?.cashapp;
   }
 
@@ -1016,7 +864,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
 
   get canPayWithCashapp(): boolean {
-    if (!this.conversions || (!this.isProdDomain && !isDevMode())) {
+    if (!this.cashappEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
       return false;
     }
 
@@ -1063,22 +911,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     return false;
   }
 
-  get canPayWithCardOnFile(): boolean {
-    if (!this.cardOnFileEnabled || !this.conversions || (!this.isProdDomain && !isDevMode())) {
-      return false;
-    }
-
-    const paymentMethod = this.estimate?.availablePaymentMethods?.cardOnFile;
-    if (paymentMethod) {
-      const costUSD = (this.cost / 100_000_000 * this.conversions.USD);
-      if (costUSD >= paymentMethod.min && costUSD <= paymentMethod.max) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
   get canPayWithBalance(): boolean {
     if (!this.hasAccessToBalanceMode) {
       return false;

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

@@ -46,8 +46,6 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
 
   aggregatedHistory$: Observable<any>;
   statsSubscription: Subscription;
-  aggregatedHistorySubscription: Subscription;
-  fragmentSubscription: Subscription;
   isLoading = true;
   formatNumber = formatNumber;
   timespan = '';
@@ -81,8 +79,8 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
     }
     this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
     this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
-
-    this.fragmentSubscription = this.route.fragment.subscribe((fragment) => {
+    
+    this.route.fragment.subscribe((fragment) => {
       if (['24h', '3d', '1w', '1m', '3m', 'all'].indexOf(fragment) > -1) {
         this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
       }
@@ -115,7 +113,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
       share(),
     );
 
-    this.aggregatedHistorySubscription = this.aggregatedHistory$.subscribe();
+    this.aggregatedHistory$.subscribe();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -337,8 +335,8 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
   }
 
   ngOnDestroy(): void {
-    this.aggregatedHistorySubscription?.unsubscribe();
-    this.fragmentSubscription?.unsubscribe();
-    this.statsSubscription?.unsubscribe();
+    if (this.statsSubscription) {
+      this.statsSubscription.unsubscribe();
+    }
   }
 }

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

@@ -14,7 +14,7 @@
           <th class="time text-right" i18n="accelerator.requested">Requested</th>
         </ng-container>
         <ng-container *ngIf="!pending">
-          <th class="fee text-right text-truncate" i18n="transaction.bid-boost|Bid Boost">Bid Boost</th>
+          <th class="fee text-right" i18n="transaction.bid-boost|Bid Boost">Bid Boost</th>
           <th class="block text-right" i18n="shared.block-title">Block</th>
           <th class="pool text-right" i18n="mining.pool-name" *ngIf="!this.widget">Pool</th>
           <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
@@ -64,8 +64,7 @@
               <span *ngIf="acceleration.status === 'accelerating'" class="badge badge-warning" i18n="accelerator.pending">Pending</span>
               <span *ngIf="acceleration.status.includes('completed') && acceleration.minedByPoolUniqueId && pools[acceleration.minedByPoolUniqueId]" class="badge badge-success"><ng-container i18n="accelerator.completed">Completed</ng-container><span *ngIf="acceleration.status === 'completed_provisional'">&nbsp;⌛</span></span>
               <span *ngIf="acceleration.status.includes('completed') && (!acceleration.minedByPoolUniqueId || !pools[acceleration.minedByPoolUniqueId])" class="badge badge-success"><ng-container i18n="transaction.rbf.mined">Mined</ng-container><span *ngIf="acceleration.status === 'completed_provisional'">&nbsp;⌛</span></span>
-              <span *ngIf="acceleration.status.includes('failed') && acceleration.canceled" class="badge badge-danger"><ng-container i18n="accelerator.canceled">Canceled</ng-container><span *ngIf="acceleration.status === 'failed_provisional'">&nbsp;⌛</span></span>
-              <span *ngIf="acceleration.status.includes('failed') && !acceleration.canceled" class="badge badge-danger"><ng-container i18n="accelerator.canceled">Failed</ng-container><span *ngIf="acceleration.status === 'failed_provisional'">&nbsp;⌛</span></span>
+              <span *ngIf="acceleration.status.includes('failed')" class="badge badge-danger"><ng-container i18n="accelerator.canceled">Canceled</ng-container><span *ngIf="acceleration.status === 'failed_provisional'">&nbsp;⌛</span></span>
             </td>
             <td class="date text-right" *ngIf="!this.widget">
               <app-time kind="since" [time]="acceleration.added" [fastRender]="true" [showTooltip]="true"></app-time>

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

@@ -478,30 +478,25 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   }
 
   extendSummary(summary) {
-    const extendedSummary = summary.slice();
+    let extendedSummary = summary.slice();
 
     // Add a point at today's date to make the graph end at the current time
     extendedSummary.unshift({ time: Date.now() / 1000, value: 0 });
+    extendedSummary.reverse();
 
-    let maxTime = Date.now() / 1000;
-
-    const oneHour = 60 * 60;
+    let oneHour = 60 * 60;
     // Fill gaps longer than interval
     for (let i = 0; i < extendedSummary.length - 1; i++) {
-      if (extendedSummary[i].time > maxTime) {
-        extendedSummary[i].time = maxTime - 30;
-      }
-      maxTime = extendedSummary[i].time;
-      const hours = Math.floor((extendedSummary[i].time - extendedSummary[i + 1].time) / oneHour);
+      let hours = Math.floor((extendedSummary[i + 1].time - extendedSummary[i].time) / oneHour);      
       if (hours > 1) {
         for (let j = 1; j < hours; j++) {
-          const newTime = extendedSummary[i].time - oneHour * j;
+          let newTime = extendedSummary[i].time + oneHour * j;
           extendedSummary.splice(i + j, 0, { time: newTime, value: 0 });
         }
         i += hours - 1;
       }
     }
 
-    return extendedSummary;
+    return extendedSummary.reverse();
   }
 }

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

@@ -41,7 +41,7 @@ export class AppComponent implements OnInit {
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvents(event: KeyboardEvent) {
-    if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+    if (event.target instanceof HTMLInputElement) {
       return;
     }
     // prevent arrow key horizontal scrolling

frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.html

@@ -10,10 +10,6 @@
     </span>
   }
 
-  <div class="d-flex justify-content-center">
-    <app-mempool-error *ngIf="paymentErrorMessage" [error]="paymentErrorMessage"></app-mempool-error>
-  </div>
-
   <div *ngIf="paymentStatus === 2">
     
     <form [formGroup]="paymentForm">

frontend/src/app/components/bitcoin-invoice/bitcoin-invoice.component.ts

@@ -1,8 +1,9 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-import { Subscription, of, catchError } from 'rxjs';
-import { retry, tap } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription, of, timer } from 'rxjs';
+import { filter, repeat, retry, switchMap, take, tap } from 'rxjs/operators';
 import { ServicesApiServices } from '@app/services/services-api.service';
 
 @Component({
@@ -17,17 +18,30 @@ export class BitcoinInvoiceComponent implements OnInit, OnChanges, OnDestroy {
   @Output() completed = new EventEmitter();
 
   paymentForm: FormGroup;
+  requestSubscription: Subscription | undefined;
   paymentStatusSubscription: Subscription | undefined;
   paymentStatus = 1; // 1 - Waiting for invoice | 2 - Pending payment | 3 - Payment completed
-  paymentErrorMessage: string = '';
+  paramMapSubscription: Subscription | undefined;
+  invoiceSubscription: Subscription | undefined;
+  invoiceTimeout; // Wait for angular to load all the things before making a request
 
   constructor(
     private formBuilder: FormBuilder,
     private apiService: ServicesApiServices,
-    private sanitizer: DomSanitizer
+    private sanitizer: DomSanitizer,
+    private activatedRoute: ActivatedRoute
   ) { }
 
   ngOnDestroy() {
+    if (this.requestSubscription) {
+      this.requestSubscription.unsubscribe();
+    }
+    if (this.paramMapSubscription) {
+      this.paramMapSubscription.unsubscribe();
+    }
+    if (this.invoiceSubscription) {
+      this.invoiceSubscription.unsubscribe();
+    }
     if (this.paymentStatusSubscription) {
       this.paymentStatusSubscription.unsubscribe();
     }
@@ -58,39 +72,15 @@ export class BitcoinInvoiceComponent implements OnInit, OnChanges, OnDestroy {
     } else {
       this.paymentStatus = 4;
     }
-
-    this.monitorPendingInvoice();
-  }
-
-  monitorPendingInvoice(): void {
-    if (!this.invoice) {
-      return;
-    }
-    if (this.paymentStatusSubscription) {
-      this.paymentStatusSubscription.unsubscribe();
-    }
     this.paymentStatusSubscription = this.apiService.getPaymentStatus$(this.invoice.btcpayInvoiceId).pipe(
-      tap(result => {
-        if (result.status === 204) { // Manually trigger an error in that case so we can retry
-          throw result;
-        } else if (result.status === 200) { // Invoice settled
-          this.paymentStatus = 3;
-          this.completed.emit();
-        }
-      }),
-      catchError(err => {
-        if (err.status === 204 || err.status === 504) {
-          throw err; // Will trigger the retry
-        } else if (err.status === 400) {
-          this.paymentErrorMessage = 'Invoice has expired';
-        } else if (err.status === 404) {
-          this.paymentErrorMessage = 'Invoice is no longer valid';
-        }
-        this.paymentStatus = -1;
-        return of(null);
-      }),
-      retry({ delay: 1000 }),
-    ).subscribe();
+      retry({ delay: () => timer(2000)}),
+      repeat({delay: 2000}),
+      filter((response) => response.status !== 204 && response.status !== 404),
+      take(1),
+    ).subscribe(() => {
+      this.paymentStatus = 3;
+      this.completed.emit();
+    });
   }
 
   get availableMethods(): string[] {

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

@@ -172,19 +172,13 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   ngOnDestroy(): void {
     if (this.animationFrameRequest) {
       cancelAnimationFrame(this.animationFrameRequest);
+      clearTimeout(this.animationHeartBeat);
     }
-    clearTimeout(this.animationHeartBeat);
     if (this.canvas) {
       this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
       this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
+      this.themeChangedSubscription?.unsubscribe();
     }
-    if (this.scene) {
-      this.scene.destroy();
-    }
-    this.vertexArray.destroy();
-    this.vertexArray = null;
-    this.themeChangedSubscription?.unsubscribe();
-    this.searchSubscription?.unsubscribe();
   }
 
   clear(direction): void {
@@ -453,7 +447,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
     this.applyQueuedUpdates();
     // skip re-render if there's no change to the scene
-    if (this.scene && this.gl && this.vertexArray) {
+    if (this.scene && this.gl) {
       /* SET UP SHADER UNIFORMS */
       // screen dimensions
       this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight);
@@ -495,7 +489,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.running && this.scene && now <= (this.scene.animateUntil + 500)) {
       this.doRun();
     } else {
-      clearTimeout(this.animationHeartBeat);
+      if (this.animationHeartBeat) {
+        clearTimeout(this.animationHeartBeat);
+      }
       this.animationHeartBeat = window.setTimeout(() => {
         this.start();
       }, 1000);

frontend/src/app/components/block-overview-graph/fast-vertex-array.ts

@@ -19,7 +19,6 @@ export class FastVertexArray {
   freeSlots: number[];
   lastSlot: number;
   dirty = false;
-  destroyed = false;
 
   constructor(length, stride) {
     this.length = length;
@@ -33,9 +32,6 @@ export class FastVertexArray {
   }
 
   insert(sprite: TxSprite): number {
-    if (this.destroyed) {
-      return;
-    }
     this.count++;
 
     let position;
@@ -49,14 +45,11 @@ export class FastVertexArray {
       }
     }
     this.sprites[position] = sprite;
-    this.dirty = true;
     return position;
+    this.dirty = true;
   }
 
   remove(index: number): void {
-    if (this.destroyed) {
-      return;
-    }
     this.count--;
     this.clearData(index);
     this.freeSlots.push(index);
@@ -68,26 +61,20 @@ export class FastVertexArray {
   }
 
   setData(index: number, dataChunk: number[]): void {
-    if (this.destroyed) {
-      return;
-    }
     this.data.set(dataChunk, (index * this.stride));
     this.dirty = true;
   }
 
-  private clearData(index: number): void {
+  clearData(index: number): void {
     this.data.fill(0, (index * this.stride), ((index + 1) * this.stride));
     this.dirty = true;
   }
 
   getData(index: number): Float32Array {
-    if (this.destroyed) {
-      return;
-    }
     return this.data.subarray(index, this.stride);
   }
 
-  private expand(): void {
+  expand(): void {
     this.length *= 2;
     const newData = new Float32Array(this.length * this.stride);
     newData.set(this.data);
@@ -95,7 +82,7 @@ export class FastVertexArray {
     this.dirty = true;
   }
 
-  private compact(): void {
+  compact(): void {
     // New array length is the smallest power of 2 larger than the sprite count (but no smaller than 512)
     const newLength = Math.max(512, Math.pow(2, Math.ceil(Math.log2(this.count))));
     if (newLength !== this.length) {
@@ -123,13 +110,4 @@ export class FastVertexArray {
   getVertexData(): Float32Array {
     return this.data;
   }
-
-  destroy(): void {
-    this.data = null;
-    this.sprites = null;
-    this.freeSlots = null;
-    this.lastSlot = 0;
-    this.dirty = false;
-    this.destroyed = true;
-  }
 }

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

@@ -116,7 +116,7 @@ export class BlockViewComponent implements OnInit, OnDestroy {
         this.isLoadingBlock = false;
         this.isLoadingOverview = true;
       }),
-      shareReplay({ bufferSize: 1, refCount: true })
+      shareReplay(1)
     );
 
     this.overviewSubscription = block$.pipe(
@@ -176,8 +176,5 @@ export class BlockViewComponent implements OnInit, OnDestroy {
     if (this.queryParamsSubscription) {
       this.queryParamsSubscription.unsubscribe();
     }
-    if (this.blockGraph) {
-      this.blockGraph.destroy();
-    }
   }
 }

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

@@ -117,7 +117,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
         this.openGraphService.waitOver('block-data-' + this.rawId);
       }),
       throttleTime(50, asyncScheduler, { leading: true, trailing: true }),
-      shareReplay({ bufferSize: 1, refCount: true })
+      shareReplay(1)
     );
 
     this.overviewSubscription = block$.pipe(

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

@@ -1,8 +1,8 @@
 import { Component, OnInit, OnDestroy, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';
 import { Location } from '@angular/common';
-import { ActivatedRoute, ParamMap, Params, Router } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ElectrsApiService } from '@app/services/electrs-api.service';
-import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter, take } from 'rxjs/operators';
+import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter } from 'rxjs/operators';
 import { Observable, of, Subscription, asyncScheduler, EMPTY, combineLatest, forkJoin } from 'rxjs';
 import { StateService } from '@app/services/state.service';
 import { SeoService } from '@app/services/seo.service';
@@ -68,7 +68,6 @@ export class BlockComponent implements OnInit, OnDestroy {
   paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
   numUnexpected: number = 0;
   mode: 'projected' | 'actual' = 'projected';
-  currentQueryParams: Params;
 
   overviewSubscription: Subscription;
   accelerationsSubscription: Subscription;
@@ -81,8 +80,8 @@ export class BlockComponent implements OnInit, OnDestroy {
   timeLtr: boolean;
   childChangeSubscription: Subscription;
   auditPrefSubscription: Subscription;
-  isAuditEnabledSubscription: Subscription;
   oobSubscription: Subscription;
+  
   priceSubscription: Subscription;
   blockConversion: Price;
 
@@ -119,7 +118,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.setAuditAvailable(this.auditSupported);
 
     if (this.auditSupported) {
-      this.isAuditEnabledSubscription = this.isAuditEnabledFromParam().subscribe(auditParam => {
+      this.isAuditEnabledFromParam().subscribe(auditParam => {
         if (this.auditParamEnabled) {
           this.auditModeEnabled = auditParam;
         } else {
@@ -282,7 +281,7 @@ export class BlockComponent implements OnInit, OnDestroy {
         }
       }),
       throttleTime(300, asyncScheduler, { leading: true, trailing: true }),
-      shareReplay({ bufferSize: 1, refCount: true })
+      shareReplay(1)
     );
 
     this.overviewSubscription = this.block$.pipe(
@@ -364,7 +363,6 @@ export class BlockComponent implements OnInit, OnDestroy {
       .subscribe((network) => this.network = network);
 
     this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
-      this.currentQueryParams = params;
       if (params.showDetails === 'true') {
         this.showDetails = true;
       } else {
@@ -416,7 +414,6 @@ export class BlockComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.stateService.markBlock$.next({});
     this.overviewSubscription?.unsubscribe();
-    this.accelerationsSubscription?.unsubscribe();
     this.keyNavigationSubscription?.unsubscribe();
     this.blocksSubscription?.unsubscribe();
     this.cacheBlocksSubscription?.unsubscribe();
@@ -424,16 +421,8 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.queryParamsSubscription?.unsubscribe();
     this.timeLtrSubscription?.unsubscribe();
     this.childChangeSubscription?.unsubscribe();
-    this.auditPrefSubscription?.unsubscribe();
-    this.isAuditEnabledSubscription?.unsubscribe();
-    this.oobSubscription?.unsubscribe();
     this.priceSubscription?.unsubscribe();
-    this.blockGraphProjected.forEach(graph => {
-      graph.destroy();
-    });
-    this.blockGraphActual.forEach(graph => {
-      graph.destroy();
-    });
+    this.oobSubscription?.unsubscribe();
   }
 
   // TODO - Refactor this.fees/this.reward for liquid because it is not
@@ -744,18 +733,19 @@ export class BlockComponent implements OnInit, OnDestroy {
   toggleAuditMode(): void {
     this.stateService.hideAudit.next(this.auditModeEnabled);
 
-    const queryParams = { ...this.currentQueryParams };
-    delete queryParams['audit'];
+    this.route.queryParams.subscribe(params => {
+      const queryParams = { ...params };
+      delete queryParams['audit'];
 
-    let newUrl = this.router.url.split('?')[0];
-    const queryString = new URLSearchParams(queryParams).toString();
-    if (queryString) {
-      newUrl += '?' + queryString;
-    }
-    this.location.replaceState(newUrl);
+      let newUrl = this.router.url.split('?')[0];
+      const queryString = new URLSearchParams(queryParams).toString();
+      if (queryString) {
+        newUrl += '?' + queryString;
+      }
+  
+      this.location.replaceState(newUrl);
+    });
 
-    // avoid duplicate subscriptions
-    this.auditPrefSubscription?.unsubscribe();
     this.auditPrefSubscription = this.stateService.hideAudit.subscribe((hide) => {
       this.auditModeEnabled = !hide;
       this.showAudit = this.auditAvailable && this.auditModeEnabled;
@@ -772,7 +762,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     return this.route.queryParams.pipe(
       map(params => {
         this.auditParamEnabled = 'audit' in params;
-
+        
         return this.auditParamEnabled ? !(params['audit'] === 'false') : true;
       })
     );

frontend/src/app/components/custom-dashboard/custom-dashboard.component.html

@@ -281,11 +281,9 @@
           <div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
             <div class="card">
               <div class="card-body">
-                <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/wallet/' + widget.props.wallet | relativeUrl]">
+                <span class="title-link">
                   <h5 class="card-title d-inline" i18n="dashboard.treasury-transactions">Treasury Transactions</h5>
-                  <span>&nbsp;</span>
-                  <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
-                </a>
+                </span>
                 <app-address-transactions-widget [addressSummary$]="walletSummary$"></app-address-transactions-widget>
               </div>
             </div>

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

@@ -162,9 +162,6 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
     this.cacheBlocksSubscription?.unsubscribe();
     this.networkChangedSubscription?.unsubscribe();
     this.queryParamsSubscription?.unsubscribe();
-    this.blockGraphs.forEach(graph => {
-      graph.destroy();
-    });
   }
 
   shiftTestBlocks(): void {

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

@@ -19,10 +19,12 @@
     } @else if (!user) {
       <!-- User not logged in -->
       <div class="alert alert-mempool d-block text-center w-100">
-        <div class="d-inline align-middle pr-2">
-          <span>To use the faucet, please</span>
+        <div class="d-inline align-middle">
+          <span>To use the faucet, please&nbsp;</span>
+          <a routerLink="/login" [queryParams]="{'redirectTo': '/testnet4/faucet'}">login</a>
+          <span class="mr-2">&nbsp;or</span>
         </div>
-        <app-github-login customClass="btn btn-sm" width="150px" redirectTo="/testnet4/faucet" buttonString="Sign up with"></app-github-login>
+        <app-twitter-login customClass="btn btn-sm" width="220px" redirectTo="/testnet4/faucet" buttonString="Sign up with Twitter"></app-twitter-login>
       </div>
     }
     @else if (user && user.status === 'pending' && !user.email && user.snsId) {
@@ -34,18 +36,18 @@
       </div>
     }
     @else if (error === 'not_available') {
-      <!-- User logged in but not a paid user or did not link its Github account -->
+      <!-- User logged in but not a paid user or did not link its Twitter account -->
       <div class="alert alert-mempool d-block text-center w-100">
         <div class="d-inline align-middle">
           <span class="mb-2 mr-2">To use the faucet, please</span>
         </div>
-        <app-github-login customClass="btn btn-sm" width="180px" redirectTo="/testnet4/faucet" buttonString="Link your"></app-github-login>
+        <app-twitter-login customClass="btn btn-sm" width="180px" redirectTo="/testnet4/faucet" buttonString="Link your Twitter"></app-twitter-login>
       </div>
     }
     @else if (error === 'account_limited') {
       <div class="alert alert-mempool d-block text-center w-100">
         <div class="d-inline align-middle">
-          <span class="mb-2 mr-2">Your account does not allow you to access the faucet</span>
+          <span class="mb-2 mr-2">Your Twitter account does not allow you to access the faucet</span>
         </div>
       </div>
     }

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

@@ -24,7 +24,7 @@ export class FaucetComponent implements OnInit, OnDestroy {
     min: number; // minimum amount to request at once (in sats)
     max: number; // maximum amount to request at once
     address?: string; // faucet address
-    code: 'ok' | 'faucet_not_available' | 'faucet_maximum_reached' | 'faucet_too_soon' | 'faucet_not_available_no_utxo';
+    code: 'ok' | 'faucet_not_available' | 'faucet_maximum_reached' | 'faucet_too_soon';
   } | null = null;
   faucetForm: FormGroup;
 

frontend/src/app/components/github-login.component/github-login.component.html

@@ -1,6 +0,0 @@
-<a href="#" (click)="githubLogin()" [class]="(disabled ? 'disabled': '') + (customClass ? customClass : 'w-100 btn mt-1 d-flex justify-content-center align-items-center')" style="background-color: rgb(31, 35, 40)" [style]="width ? 'width: ' + width : ''">
-  <span class="ml-2 text-light align-middle">{{ buttonString }}</span>
-  <svg height="32" viewBox="0 0 18 16" width="32" style="fill: white; padding-left: 5px">
-    <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
-  </svg>
-</a>

frontend/src/app/components/github-login.component/github-login.component.ts

@@ -1,25 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-@Component({
-  selector: 'app-github-login',
-  templateUrl: './github-login.component.html',
-})
-export class GithubLogin {
-  @Input() width: string | null = null;
-  @Input() customClass: string | null = null;
-  @Input() buttonString: string= 'unset';
-  @Input() redirectTo: string | null = null;
-  @Output() clicked = new EventEmitter<boolean>();
-  @Input() disabled: boolean = false;
-
-  constructor() {}
-
-  githubLogin() {
-    this.clicked.emit(true);
-    if (this.redirectTo) {
-      location.replace(`/api/v1/services/auth/login/github?redirectTo=${encodeURIComponent(this.redirectTo)}`);
-    } else {
-      location.replace(`/api/v1/services/auth/login/github?redirectTo=${location.href}`);
-    }
-    return false;
-  }
-}

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

@@ -4,8 +4,9 @@
   <nav class="navbar navbar-expand-md navbar-dark">
   <!-- Hamburger -->
   <ng-container *ngIf="servicesEnabled">
-    <div *ngIf="user" class="profile_image_container" (click)="hamburgerClick($event)">
-      <img [src]="'/api/v1/services/account/images/' + user.username" class="profile_image" onError="this.src = '/resources/anon.svg'; this.className = 'anon'" />
+    <div *ngIf="user" class="profile_image_container" [class]="{'anon': !user.imageMd5}" (click)="hamburgerClick($event)">
+      <img *ngIf="user.imageMd5" [src]="'/api/v1/services/account/images/' + user.username + '/md5=' + user.imageMd5" class="profile_image">
+      <app-svg-images style="color: lightgrey; fill: lightgray" *ngIf="!user.imageMd5" name="anon"></app-svg-images>
     </div>
     <div *ngIf="false && user === null" class="profile_image_container" (click)="hamburgerClick($event)">
       <app-svg-images name="hamburger" height="40"></app-svg-images>
@@ -22,7 +23,7 @@
       } @else {
         <ng-template [ngIf]="subdomain && enterpriseInfo">
           <div class="subdomain_container">
-            <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo'" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+            <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
           </div>
           <div class="vertical-line"></div>
         </ng-template>
@@ -42,7 +43,7 @@
     } @else {
       <ng-template [ngIf]="subdomain && enterpriseInfo">
         <div class="subdomain_container">
-          <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo'" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+          <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
         </div>
         <div class="vertical-line"></div>
       </ng-template>

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

@@ -269,7 +269,7 @@ nav {
   text-align: center;
   align-self: center;
   cursor: pointer;
-  .anon {
+  &.anon {
     border: 1.5px solid lightgrey;
     color: lightgrey;
     border-radius: 5px;

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

@@ -120,7 +120,6 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
   }
 
   ngOnDestroy(): void {
-    this.blockGraph?.destroy();
     this.blockSub.unsubscribe();
     this.timeLtrSubscription.unsubscribe();
     this.websocketService.stopTrackMempoolBlock();

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

@@ -10,7 +10,7 @@
       <h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
     </div>
 
-    <div class="box pool-details">
+    <div class="box">
       <div class="row">
 
         <div class="col-lg-6">
@@ -173,125 +173,7 @@
     <div class="spinner-border text-light"></div>
   </div>
 
-  <!-- Stratum Job -->
-  <ng-container *ngIf="(job$ | async) as job;">
-    <h2 i18n="pool.next_block">Next block</h2>
-    <div class="box mb-3">
-      <div class="row" >
-        <div class="col">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td>
-                  <table class="job-table table table-xs table-borderless table-fixed table-data">
-                    <thead>
-                      <tr>
-                        <th class="data-title clip text-center height" i18n="latest-blocks.height">Height</th>
-                        <th class="data-title clip text-center expected" i18n="next-block.expected-time">Expected</th>
-                        <th class="data-title clip text-center reward" i18n="latest-blocks.reward">Reward</th>
-                        <th class="data-title clip text-center timestamp" i18n="next-block.timestamp">Timestamp</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td class="text-center height">
-                          {{ job.height }}
-                        </td>
-                        <td class="text-center expected">
-                          <ng-container *ngIf="(expectedBlockTime$ | async) as expectedBlockTime; else expectedPlaceholder">
-                            <app-time kind="until" [time]="expectedBlockTime" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
-                          </ng-container>
-                          <ng-template #expectedPlaceholder>~</ng-template>
-                        </td>
-                        <td class="text-center reward">
-                          <app-amount [satoshis]="job.reward"></app-amount>
-                        </td>
-                        <td class="text-center timestamp">
-                          <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="job.timestamp" [precision]="1" minUnit="minute" [hideTimeSince]="true"></app-timestamp>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <table class="job-table table table-xs table-borderless table-fixed table-data">
-                    <thead>
-                      <tr>
-                        <th class="data-title clip text-center coinbase" i18n="latest-blocks.coinbasetag">Coinbase tag</th>
-                        <th class="data-title clip text-center clean" i18n="next-block.clean">Clean</th>
-                        <th class="data-title clip text-center prevhash" i18n="next-block.prevhash">Prevhash</th>
-                        <th class="data-title clip text-center job-received" i18n="next-block.job-received">Job Received</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td class="text-center coinbase">
-                          {{ job.scriptsig | hex2ascii }}
-                        </td>
-                        <td class="text-center clean">
-                          @if (job.cleanJobs) {
-                            <fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true"></fa-icon>
-                          } @else {
-                            <fa-icon [icon]="['fas', 'times-circle']" [fixedWidth]="true"></fa-icon>
-                          }
-                        </td>
-                        <td class="text-center prevhash">
-                          <a [routerLink]="['/block' | relativeUrl, job.prevHash]">
-                            <app-truncate [text]="job.prevHash" [lastChars]="8"></app-truncate>
-                          </a>
-                        </td>
-                        <td class="text-center job-received">
-                          <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="job.received / 1000" [precision]="1" minUnit="minute" [hideTimeSince]="true"></app-timestamp>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <table class="stratum-table">
-                    <thead>
-                      <tr>
-                        <th class="data-title clip text-center" [attr.colspan]="Math.max(job.merkleBranches.length, 12)">
-                          <a class="title-link" href="" [routerLink]="['/stratum' | relativeUrl]">
-                            Merkle Branches
-                            <span>&nbsp;</span>
-                            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
-                          </a>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        @for (branch of job.merkleBranches; track $index) {
-                          <td class="merkle" [style.background-color]="branch ? '#' + branch.slice(0, 6) : ''">
-                            @if ($index === 0 && branch) {
-                              <a [routerLink]="['/tx' | relativeUrl, reverseHash(branch)]" class="cell-link">
-                                <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 14px; color: white"></fa-icon>
-                              </a>
-                            }
-                          </td>
-                        }
-                        @for (_ of [].constructor(Math.max(0, 12 - job.merkleBranches.length)); track $index) {
-                          <td class="merkle empty-branch"></td>
-                        }
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-
   <!-- Blocks list -->
-  <h2 i18n="master-page.blocks">Blocks</h2>
   <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
     [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
     <ng-container *ngIf="blocks$ | async as blocks; else skeleton">

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

@@ -49,110 +49,111 @@ div.scrollable {
   max-height: 75px;
 }
 
-.pool-details {
+.box {
+  padding-bottom: 5px;
   @media (min-width: 767.98px) {
     min-height: 187px;
   }
+}
 
-  .label {
-    width: 25%;
-    @media (min-width: 767.98px) {
-      vertical-align: middle;
-    }
-    @media (max-width: 767.98px) {
-      font-weight: bold;
-    }
-  }
-  .label.addresses {
-    vertical-align: top;
-    padding-top: 25px;
-  }
-  .addresses-data {
-    vertical-align: top;
-    font-family: monospace;
-    font-size: 14px;
-  }
-
-  .data {
-    text-align: right;
-    padding-left: 5%;
-    @media (max-width: 992px) {
-      text-align: left;
-      padding-left: 12px;
-    }
-    @media (max-width: 450px) {
-      text-align: right;
-    }
-  }
-
-  .progress {
-    background-color: var(--secondary);
-  }
-
-  .coinbase {
-    width: 20%;
-    @media (max-width: 875px) {
-      display: none;
-    }
-  }
-
-  .height {
-    width: 10%;
-  }
-
-  .timestamp {
-    @media (max-width: 875px) {
-      padding-left: 50px;
-    }
-    @media (max-width: 685px) {
-      display: none;
-    }
-  }
-
-  .mined {
-    width: 13%;
-    @media (max-width: 1100px) {
-      display: none;
-    }
-  }
-
-  .txs {
-    padding-right: 40px;
-    @media (max-width: 1100px) {
-      padding-right: 10px;
-    }
-    @media (max-width: 875px) {
-      padding-right: 20px;
-    }
-    @media (max-width: 567px) {
-      padding-right: 10px;
-    }
-  }
-
-  .size {
-    width: 12%;
-    @media (max-width: 1000px) {
-      width: 15%;
-    }
-    @media (max-width: 875px) {
-      width: 20%;
-    }
-    @media (max-width: 650px) {
-      width: 20%;
-    }
-    @media (max-width: 450px) {
-      display: none;
-    }
-  }
-
-  .scriptmessage {
-    overflow: hidden;
-    display: inline-block;
-    text-overflow: ellipsis;
+.label {
+  width: 25%;
+  @media (min-width: 767.98px) {
     vertical-align: middle;
-    width: auto;
-    text-align: left;
   }
+  @media (max-width: 767.98px) {
+    font-weight: bold;
+  }
+}
+.label.addresses {
+  vertical-align: top;
+  padding-top: 25px;
+}
+.addresses-data {
+  vertical-align: top;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.data {
+  text-align: right;
+  padding-left: 5%;
+  @media (max-width: 992px) {
+    text-align: left;
+    padding-left: 12px;
+  }
+  @media (max-width: 450px) {
+    text-align: right;
+  }
+}
+
+.progress {
+  background-color: var(--secondary);
+}
+
+.coinbase {
+  width: 20%;
+  @media (max-width: 875px) {
+    display: none;
+  }
+}
+
+.height {
+  width: 10%;
+}
+
+.timestamp {
+  @media (max-width: 875px) {
+    padding-left: 50px;
+  }
+  @media (max-width: 685px) {
+    display: none;
+  }
+}
+
+.mined {
+  width: 13%;
+  @media (max-width: 1100px) {
+    display: none;
+  }
+}
+
+.txs {
+  padding-right: 40px;
+  @media (max-width: 1100px) {
+    padding-right: 10px;
+  }
+  @media (max-width: 875px) {
+    padding-right: 20px;
+  }
+  @media (max-width: 567px) {
+    padding-right: 10px;
+  }
+}
+
+.size {
+  width: 12%;
+  @media (max-width: 1000px) {
+    width: 15%;
+  }
+  @media (max-width: 875px) {
+    width: 20%;
+  }
+  @media (max-width: 650px) {
+    width: 20%;
+  }
+  @media (max-width: 450px) {
+    display: none;
+  }
+}
+
+.scriptmessage {
+	overflow: hidden;
+	display: inline-block;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	width: auto;
+  text-align: left;
 }
 
 .skeleton-loader {
@@ -213,69 +214,4 @@ div.scrollable {
 
 .taller-row {
   height: 75px;
-}
-
-.stratum-table {
-  width: 100%;
-
-  .merkle {
-    width: 100px;
-    text-align: center;
-  }
-
-  .empty-branch {
-    outline: solid 1px white;
-    outline-offset: -1px;
-
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 100%;
-      background: linear-gradient(to top left, transparent, transparent 48%, white 49%, white 51%, transparent 52%, transparent);
-    }
-  }
-
-  td {
-    position: relative;
-    height: 2em;
-
-    .cell-link {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      color: inherit;
-      text-decoration: none;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-
-.job-table {
-  td, th {
-    width: 25%;
-    max-width: 25%;
-    min-width: 25%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0.1rem 0.2rem;
-  }
-
-  @media (max-width: 767.98px) {
-    .expected, .timestamp, .clean, .job-received {
-      display: none;
-    }
-  }
-}
-
-.title-link, .title-link:hover, .title-link:focus, .title-link:active {
-  display: block;
-  text-decoration: none;
-  color: inherit;
 }

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

@@ -10,9 +10,6 @@ import { selectPowerOfTen } from '@app/bitcoin.utils';
 import { formatNumber } from '@angular/common';
 import { SeoService } from '@app/services/seo.service';
 import { HttpErrorResponse } from '@angular/common/http';
-import { StratumJob } from '../../interfaces/websocket.interface';
-import { WebsocketService } from '../../services/websocket.service';
-import { MiningService } from '../../services/mining.service';
 
 interface AccelerationTotal {
   cost: number,
@@ -30,16 +27,12 @@ export class PoolComponent implements OnInit {
   @Input() left: number | string = 75;
 
   gfg = true;
-  stratumEnabled = this.stateService.env.STRATUM_ENABLED;
 
   formatNumber = formatNumber;
-  Math = Math;
   slugSubscription: Subscription;
   poolStats$: Observable<PoolStat>;
   blocks$: Observable<BlockExtended[]>;
   oobFees$: Observable<AccelerationTotal[]>;
-  job$: Observable<StratumJob | null>;
-  expectedBlockTime$: Observable<number>;
   isLoading = true;
   error: HttpErrorResponse | null = null;
 
@@ -60,8 +53,6 @@ export class PoolComponent implements OnInit {
     private apiService: ApiService,
     private route: ActivatedRoute,
     public stateService: StateService,
-    private websocketService: WebsocketService,
-    private miningService: MiningService,
     private seoService: SeoService,
   ) {
     this.auditAvailable = this.stateService.env.AUDIT;
@@ -71,7 +62,7 @@ export class PoolComponent implements OnInit {
     this.slugSubscription = this.route.params.pipe(map((params) => params.slug)).subscribe((slug) => {
       this.isLoading = true;
       this.blocks = [];
-      this.chartOptions = {};
+      this.chartOptions = {};  
       this.slug = slug;
       this.initializeObservables();
     });
@@ -138,31 +129,6 @@ export class PoolComponent implements OnInit {
       }),
       filter(oob => oob.length === 3 && oob[2].count > 0)
     );
-
-    if (this.stratumEnabled) {
-      this.job$ = combineLatest([
-        this.poolStats$.pipe(
-          tap((poolStats) => {
-            this.websocketService.startTrackStratum(poolStats.pool.unique_id);
-          })
-        ),
-        this.stateService.stratumJobs$
-      ]).pipe(
-        map(([poolStats, jobs]) => {
-          return jobs[poolStats.pool.unique_id];
-        })
-      );
-
-      this.expectedBlockTime$ = combineLatest([
-        this.miningService.getMiningStats('1w'),
-        this.poolStats$,
-        this.stateService.difficultyAdjustment$
-      ]).pipe(
-        map(([miningStats, poolStat, da]) => {
-          return (da.timeAvg / ((poolStat.estimatedHashrate || 0) / (miningStats.lastEstimatedHashrate * 1_000_000_000_000_000_000))) + Date.now() + da.timeOffset;
-        })
-      );
-    }
   }
 
   prepareChartOptions(hashrate, share) {
@@ -361,10 +327,6 @@ export class PoolComponent implements OnInit {
     return block.height;
   }
 
-  reverseHash(hash: string) {
-    return hash.match(/../g).reverse().join('');
-  }
-
   ngOnDestroy(): void {
     this.slugSubscription.unsubscribe();
   }

frontend/src/app/components/server-health/server-health.component.ts

@@ -82,10 +82,6 @@ export class ServerHealthComponent implements OnInit {
       return '🇺🇸';
     } else if (host.includes('.va1.')) {
       return '🇺🇸';
-    } else if (host.includes('.sg1.')) {
-      return '🇸🇬';
-    } else if (host.includes('.hnl.')) {
-      return '🤙';
     } else {
       return '';
     }

frontend/src/app/components/stratum/stratum-list/stratum-list.component.html

@@ -1,55 +0,0 @@
-<div class="container-xl" style="min-height: 335px">
-  <h1 class="float-left" i18n="master-page.blocks">Stratum Jobs</h1>
-
-  <div class="clearfix"></div>
-
-  <div style="min-height: 295px">
-    <table *ngIf="poolsReady && (rows$ | async) as rows;" class="stratum-table">
-      <thead>
-        <tr>
-          <td class="merkle" [attr.colspan]="rows[0]?.merkleCells?.length || 4">
-            Merkle Branches
-          </td>
-          <td class="pool">Pool</td>
-          <td class="tag">Coinbase Tag</td>
-          <td class="reward">Reward</td>
-          <td class="height">Height</td>
-        </tr>
-      </thead>
-      <tbody>
-        @for (row of rows; track row.job.pool) {
-          <tr>
-            @for (cell of row.merkleCells; track $index) {
-              <td class="merkle" [style.background-color]="cell.hash ? '#' + cell.hash.slice(0, 6) : ''">
-                @if ($index === 0 && cell.hash) {
-                  <a [routerLink]="['/tx' | relativeUrl, reverseHash(cell.hash)]" class="cell-link">
-                    <div class="pipe-segment" [class]="pipeToClass(cell.type)"></div>
-                  </a>
-                } @else {
-                  <div class="pipe-segment" [class]="pipeToClass(cell.type)"></div>
-                }
-              </td>
-            }
-            <td class="pool">
-              @if (pools[row.job.pool]) {
-                <a class="badge" [routerLink]="[('/mining/pool/' + pools[row.job.pool].slug) | relativeUrl]">
-                  <img class="pool-logo" [src]="'/resources/mining-pools/' + pools[row.job.pool].slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pools[row.job.pool].name + ' mining pool'"> 
-                  {{ pools[row.job.pool].name}}
-                </a>
-              }
-            </td>
-            <td class="tag">
-              {{ row.job.tag }}
-            </td>
-            <td class="reward">
-              <app-amount [satoshis]="row.job.reward"></app-amount>
-            </td>
-            <td class="height">
-              {{ row.job.height }}
-            </td>
-          </tr>
-        }
-      </tbody>
-    </table>
-  </div>
-</div>

frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss

@@ -1,138 +0,0 @@
-.stratum-table {
-  width: 100%;
-}
-
-td {
-  position: relative;
-  height: 2em;
-
-  &.height, &.reward, &.tag {
-    padding: 0 5px;
-  }
-
-  &.tag {
-    max-width: 180px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  &.pool {
-    padding-left: 5px;
-    padding-right: 20px;
-  }
-
-  &.merkle {
-    width: 100px;
-    .pipe-segment {
-      position: absolute;
-      border-color: white;
-      box-sizing: content-box;
-
-      &.vertical {
-        top: 0;
-        right: 0;
-        width: 50%;
-        height: 100%;
-        border-left: solid 4px;
-      }
-      &.horizontal {
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 50%;
-        border-top: solid 4px;
-      }
-      &.branch-top {
-        bottom: 0;
-        right: 0;
-        width: 100%;
-        height: 50%;
-        border-top: solid 4px;
-        &::after {
-          content: "";
-          position: absolute;
-          box-sizing: content-box;
-          top: -4px;
-          right: 0px;
-          bottom: 0;
-          width: 50%;
-          border-top: solid 4px;
-          border-left: solid 4px;
-          border-top-left-radius: 5px;
-        }
-      }
-      &.branch-mid {
-        bottom: 0;
-        right: 0px;
-        width: 50%;
-        height: 100%;
-        border-left: solid 4px;
-        &::after {
-          content: "";
-          position: absolute;
-          box-sizing: content-box;
-          top: -4px;
-          left: -4px;
-          width: 100%;
-          height: 50%;
-          border-bottom: solid 4px;
-          border-left: solid 4px;
-          border-bottom-left-radius: 5px;
-        }
-      }
-      &.branch-end {
-        top: -4px;
-        right: 0;
-        width: 50%;
-        height: 50%;
-        border-bottom-left-radius: 5px;
-        border-bottom: solid 4px;
-        border-left: solid 4px;
-      }
-    }
-  }
-
-  .cell-link {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    color: inherit;
-    text-decoration: none;
-  }
-}
-
-@media (max-width: 800px) {
-  .stratum-table {
-    td {
-      &.tag {
-        display: none;
-      }
-    }
-  }
-}
-
-@media (max-width: 650px) {
-  .stratum-table {
-    td {
-      &.reward {
-        display: none;
-      }
-    }
-  }
-}
-
-.badge {
-  position: relative;
-  color: #FFF;
-}
-
-.pool-logo {
-  width: 15px;
-  height: 15px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-}

frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts

@@ -1,230 +0,0 @@
-import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { StateService } from '../../../services/state.service';
-import { WebsocketService } from '../../../services/websocket.service';
-import { map, Observable } from 'rxjs';
-import { StratumJob } from '../../../interfaces/websocket.interface';
-import { MiningService } from '../../../services/mining.service';
-import { SinglePoolStats } from '../../../interfaces/node-api.interface';
-
-type MerkleCellType = ' ' | '┬' | '├' | '└' | '│' | '─' | 'leaf';
-
-
-interface TaggedStratumJob extends StratumJob {
-  tag: string;
-  merkleBranchIds: string[];
-}
-
-interface MerkleCell {
-  hash: string;
-  type: MerkleCellType;
-  job?: TaggedStratumJob;
-}
-
-interface MerkleTree {
-  hash?: string;
-  job: string;
-  size: number;
-  children?: MerkleTree[];
-}
-
-interface PoolRow {
-  job: TaggedStratumJob;
-  merkleCells: MerkleCell[];
-}
-
-function parseTag(scriptSig: string): string {
-  const hex = scriptSig.slice(8).replace(/6d6d.{64}/, '');
-  const bytes: number[] = [];
-  for (let i = 0; i < hex.length; i += 2) {
-    bytes.push(parseInt(hex.substr(i, 2), 16));
-  }
-  // eslint-disable-next-line no-control-regex
-  const ascii = new TextDecoder('utf8').decode(Uint8Array.from(bytes)).replace(/\uFFFD/g, '').replace(/\\0/g, '').replace(/[\x00-\x1F\x7F-\x9F]/g, '');
-  if (ascii.includes('/ViaBTC/')) {
-    return '/ViaBTC/';
-  } else if (ascii.includes('SpiderPool/')) {
-    return 'SpiderPool/';
-  }
-  return (ascii.match(/\/.*\//)?.[0] || ascii).trim();
-}
-
-function getMerkleBranchIds(merkleBranches: string[], numBranches: number, poolId: number): string[] {
-  let lastHash = '';
-  const ids: string[] = [];
-  for (let i = 0; i < numBranches; i++) {
-    if (merkleBranches[i]) {
-      lastHash = merkleBranches[i];
-      ids.push(`${i}-${lastHash}`);
-    } else {
-      ids.push(`${i}-${lastHash}-${poolId}`);
-    }
-  }
-  return ids;
-}
-
-@Component({
-  selector: 'app-stratum-list',
-  templateUrl: './stratum-list.component.html',
-  styleUrls: ['./stratum-list.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class StratumList implements OnInit, OnDestroy {
-  rows$: Observable<PoolRow[]>;
-  pools: { [id: number]: SinglePoolStats } = {};
-  poolsReady: boolean = false;
-
-  constructor(
-    private stateService: StateService,
-    private websocketService: WebsocketService,
-    private miningService: MiningService,
-    private cd: ChangeDetectorRef,
-  ) {}
-
-  ngOnInit(): void {
-    this.websocketService.want(['stats', 'blocks', 'mempool-blocks']);
-    this.miningService.getPools().subscribe(pools => {
-      this.pools = {};
-      for (const pool of pools) {
-        this.pools[pool.unique_id] = pool;
-      }
-      this.poolsReady = true;
-      this.cd.markForCheck();
-    });
-    this.rows$ = this.stateService.stratumJobs$.pipe(
-      map((jobs) => this.processJobs(jobs)),
-    );
-    this.websocketService.startTrackStratum('all');
-  }
-
-  processJobs(rawJobs: Record<string, StratumJob>): PoolRow[] {
-    const numBranches = Math.max(...Object.values(rawJobs).map(job => job.merkleBranches.length));
-    const jobs: Record<string, TaggedStratumJob> = {};
-    for (const [id, job] of Object.entries(rawJobs)) {
-      jobs[id] = { ...job, tag: parseTag(job.scriptsig), merkleBranchIds: getMerkleBranchIds(job.merkleBranches, numBranches, job.pool) };
-    }
-    if (Object.keys(jobs).length === 0) {
-      return [];
-    }
-
-    let trees: MerkleTree[] = Object.keys(jobs).map(job => ({
-      job,
-      size: 1,
-    }));
-
-    // build tree from bottom up
-    for (let col = numBranches - 1; col >= 0; col--) {
-      const groups: Record<string, MerkleTree[]> = {};
-      for (const tree of trees) {
-        const branchId = jobs[tree.job].merkleBranchIds[col];
-        if (!groups[branchId]) {
-          groups[branchId] = [];
-        }
-        groups[branchId].push(tree);
-      }
-
-      trees = Object.values(groups).map(group => ({
-        hash: jobs[group[0].job].merkleBranches[col],
-        job: group[0].job,
-        children: group,
-        size: group.reduce((acc, tree) => acc + tree.size, 0),
-      }));
-    }
-
-    // initialize grid of cells
-    const rows: (MerkleCell | null)[][] = [];
-    for (let i = 0; i < Object.keys(jobs).length; i++) {
-      const row: (MerkleCell | null)[] = [];
-      for (let j = 0; j <= numBranches; j++) {
-        row.push(null);
-      }
-      rows.push(row);
-    }
-
-    // fill in the cells
-    let colTrees = [trees.sort((a, b) => {
-      if (a.size !== b.size) {
-        return b.size - a.size;
-      }
-      return a.job.localeCompare(b.job);
-    })];
-    for (let col = 0; col <= numBranches; col++) {
-      let row = 0;
-      const nextTrees: MerkleTree[][] = [];
-      for (let g = 0; g < colTrees.length; g++) {
-        for (let t = 0; t < colTrees[g].length; t++) {
-          const tree = colTrees[g][t];
-          const isFirstTree = (t === 0);
-          const isLastTree = (t === colTrees[g].length - 1);
-          for (let i = 0; i < tree.size; i++) {
-            const isFirstCell = (i === 0);
-            const isLeaf = (col === numBranches);
-            rows[row][col] = {
-              hash: tree.hash,
-              job: isLeaf ? jobs[tree.job] : undefined,
-              type: 'leaf',
-            };
-            if (col > 0) {
-              rows[row][col - 1].type = getCellType(isFirstCell, isFirstTree, isLastTree);
-            }
-            row++;
-          }
-          if (tree.children) {
-            nextTrees.push(tree.children.sort((a, b) => {
-              if (a.size !== b.size) {
-                return b.size - a.size;
-              }
-              return a.job.localeCompare(b.job);
-            }));
-          }
-        }
-      }
-      colTrees = nextTrees;
-    }
-    return rows.map(row => ({
-      job: row[row.length - 1].job,
-      merkleCells: row.slice(0, -1),
-    }));
-  }
-
-  pipeToClass(type: MerkleCellType): string {
-    return {
-      ' ': 'empty',
-      '┬': 'branch-top',
-      '├': 'branch-mid',
-      '└': 'branch-end',
-      '│': 'vertical',
-      '─': 'horizontal',
-      'leaf': 'leaf'
-    }[type];
-  }
-
-  reverseHash(hash: string) {
-    return hash.match(/../g).reverse().join('');
-  }
-
-  ngOnDestroy(): void {
-    this.websocketService.stopTrackStratum();
-  }
-}
-
-function getCellType(isFirstCell, isFirstTree, isLastTree): MerkleCellType {
-  if (isFirstCell) {
-    if (isFirstTree) {
-      if (isLastTree) {
-        return '─';
-      } else {
-        return '┬';
-      }
-    } else if (isLastTree) {
-      return '└';
-    } else {
-      return '├';
-    }
-  } else {
-    if (isLastTree) {
-      return ' ';
-    } else {
-      return '│';
-    }
-  }
-}

frontend/src/app/components/svg-images/svg-images.component.html

@@ -1,47 +1,4 @@
 <ng-container [ngSwitch]="name">
-  <ng-container *ngSwitchCase="'VISA'">
-    <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" viewBox="0 0 576 512" fill="white" xmlns="http://www.w3.org/2000/svg">
-      <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
-      <path d="M470.1 231.3s7.6 37.2 9.3 45H446c3.3-8.9 16-43.5 16-43.5-.2 .3 3.3-9.1 5.3-14.9l2.8 13.4zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM152.5 331.2L215.7 176h-42.5l-39.3 106-4.3-21.5-14-71.4c-2.3-9.9-9.4-12.7-18.2-13.1H32.7l-.7 3.1c15.8 4 29.9 9.8 42.2 17.1l35.8 135h42.5zm94.4 .2L272.1 176h-40.2l-25.1 155.4h40.1zm139.9-50.8c.2-17.7-10.6-31.2-33.7-42.3-14.1-7.1-22.7-11.9-22.7-19.2 .2-6.6 7.3-13.4 23.1-13.4 13.1-.3 22.7 2.8 29.9 5.9l3.6 1.7 5.5-33.6c-7.9-3.1-20.5-6.6-36-6.6-39.7 0-67.6 21.2-67.8 51.4-.3 22.3 20 34.7 35.2 42.2 15.5 7.6 20.8 12.6 20.8 19.3-.2 10.4-12.6 15.2-24.1 15.2-16 0-24.6-2.5-37.7-8.3l-5.3-2.5-5.6 34.9c9.4 4.3 26.8 8.1 44.8 8.3 42.2 .1 69.7-20.8 70-53zM528 331.4L495.6 176h-31.1c-9.6 0-16.9 2.8-21 12.9l-59.7 142.5H426s6.9-19.2 8.4-23.3H486c1.2 5.5 4.8 23.3 4.8 23.3H528z"/>
-    </svg>
-  </ng-container>
-
-  <ng-container *ngSwitchCase="'MASTERCARD'">
-    <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" viewBox="0 0 576 512" fill="white" xmlns="http://www.w3.org/2000/svg">
-      <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M482.9 410.3c0 6.8-4.6 11.7-11.2 11.7-6.8 0-11.2-5.2-11.2-11.7 0-6.5 4.4-11.7 11.2-11.7 6.6 0 11.2 5.2 11.2 11.7zm-310.8-11.7c-7.1 0-11.2 5.2-11.2 11.7 0 6.5 4.1 11.7 11.2 11.7 6.5 0 10.9-4.9 10.9-11.7-.1-6.5-4.4-11.7-10.9-11.7zm117.5-.3c-5.4 0-8.7 3.5-9.5 8.7h19.1c-.9-5.7-4.4-8.7-9.6-8.7zm107.8 .3c-6.8 0-10.9 5.2-10.9 11.7 0 6.5 4.1 11.7 10.9 11.7 6.8 0 11.2-4.9 11.2-11.7 0-6.5-4.4-11.7-11.2-11.7zm105.9 26.1c0 .3 .3 .5 .3 1.1 0 .3-.3 .5-.3 1.1-.3 .3-.3 .5-.5 .8-.3 .3-.5 .5-1.1 .5-.3 .3-.5 .3-1.1 .3-.3 0-.5 0-1.1-.3-.3 0-.5-.3-.8-.5-.3-.3-.5-.5-.5-.8-.3-.5-.3-.8-.3-1.1 0-.5 0-.8 .3-1.1 0-.5 .3-.8 .5-1.1 .3-.3 .5-.3 .8-.5 .5-.3 .8-.3 1.1-.3 .5 0 .8 0 1.1 .3 .5 .3 .8 .3 1.1 .5s.2 .6 .5 1.1zm-2.2 1.4c.5 0 .5-.3 .8-.3 .3-.3 .3-.5 .3-.8 0-.3 0-.5-.3-.8-.3 0-.5-.3-1.1-.3h-1.6v3.5h.8V426h.3l1.1 1.4h.8l-1.1-1.3zM576 81v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V81c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM64 220.6c0 76.5 62.1 138.5 138.5 138.5 27.2 0 53.9-8.2 76.5-23.1-72.9-59.3-72.4-171.2 0-230.5-22.6-15-49.3-23.1-76.5-23.1-76.4-.1-138.5 62-138.5 138.2zm224 108.8c70.5-55 70.2-162.2 0-217.5-70.2 55.3-70.5 162.6 0 217.5zm-142.3 76.3c0-8.7-5.7-14.4-14.7-14.7-4.6 0-9.5 1.4-12.8 6.5-2.4-4.1-6.5-6.5-12.2-6.5-3.8 0-7.6 1.4-10.6 5.4V392h-8.2v36.7h8.2c0-18.9-2.5-30.2 9-30.2 10.2 0 8.2 10.2 8.2 30.2h7.9c0-18.3-2.5-30.2 9-30.2 10.2 0 8.2 10 8.2 30.2h8.2v-23zm44.9-13.7h-7.9v4.4c-2.7-3.3-6.5-5.4-11.7-5.4-10.3 0-18.2 8.2-18.2 19.3 0 11.2 7.9 19.3 18.2 19.3 5.2 0 9-1.9 11.7-5.4v4.6h7.9V392zm40.5 25.6c0-15-22.9-8.2-22.9-15.2 0-5.7 11.9-4.8 18.5-1.1l3.3-6.5c-9.4-6.1-30.2-6-30.2 8.2 0 14.3 22.9 8.3 22.9 15 0 6.3-13.5 5.8-20.7 .8l-3.5 6.3c11.2 7.6 32.6 6 32.6-7.5zm35.4 9.3l-2.2-6.8c-3.8 2.1-12.2 4.4-12.2-4.1v-16.6h13.1V392h-13.1v-11.2h-8.2V392h-7.6v7.3h7.6V416c0 17.6 17.3 14.4 22.6 10.9zm13.3-13.4h27.5c0-16.2-7.4-22.6-17.4-22.6-10.6 0-18.2 7.9-18.2 19.3 0 20.5 22.6 23.9 33.8 14.2l-3.8-6c-7.8 6.4-19.6 5.8-21.9-4.9zm59.1-21.5c-4.6-2-11.6-1.8-15.2 4.4V392h-8.2v36.7h8.2V408c0-11.6 9.5-10.1 12.8-8.4l2.4-7.6zm10.6 18.3c0-11.4 11.6-15.1 20.7-8.4l3.8-6.5c-11.6-9.1-32.7-4.1-32.7 15 0 19.8 22.4 23.8 32.7 15l-3.8-6.5c-9.2 6.5-20.7 2.6-20.7-8.6zm66.7-18.3H408v4.4c-8.3-11-29.9-4.8-29.9 13.9 0 19.2 22.4 24.7 29.9 13.9v4.6h8.2V392zm33.7 0c-2.4-1.2-11-2.9-15.2 4.4V392h-7.9v36.7h7.9V408c0-11 9-10.3 12.8-8.4l2.4-7.6zm40.3-14.9h-7.9v19.3c-8.2-10.9-29.9-5.1-29.9 13.9 0 19.4 22.5 24.6 29.9 13.9v4.6h7.9v-51.7zm7.6-75.1v4.6h.8V302h1.9v-.8h-4.6v.8h1.9zm6.6 123.8c0-.5 0-1.1-.3-1.6-.3-.3-.5-.8-.8-1.1-.3-.3-.8-.5-1.1-.8-.5 0-1.1-.3-1.6-.3-.3 0-.8 .3-1.4 .3-.5 .3-.8 .5-1.1 .8-.5 .3-.8 .8-.8 1.1-.3 .5-.3 1.1-.3 1.6 0 .3 0 .8 .3 1.4 0 .3 .3 .8 .8 1.1 .3 .3 .5 .5 1.1 .8 .5 .3 1.1 .3 1.4 .3 .5 0 1.1 0 1.6-.3 .3-.3 .8-.5 1.1-.8 .3-.3 .5-.8 .8-1.1 .3-.6 .3-1.1 .3-1.4zm3.2-124.7h-1.4l-1.6 3.5-1.6-3.5h-1.4v5.4h.8v-4.1l1.6 3.5h1.1l1.4-3.5v4.1h1.1v-5.4zm4.4-80.5c0-76.2-62.1-138.3-138.5-138.3-27.2 0-53.9 8.2-76.5 23.1 72.1 59.3 73.2 171.5 0 230.5 22.6 15 49.5 23.1 76.5 23.1 76.4 .1 138.5-61.9 138.5-138.4z"/>
-    </svg>
-  </ng-container>
-
-  <ng-container *ngSwitchCase="'JCB'">
-    <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" viewBox="0 0 576 512" fill="white" xmlns="http://www.w3.org/2000/svg">
-      <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M431.5 244.3V212c41.2 0 38.5 .2 38.5 .2 7.3 1.3 13.3 7.3 13.3 16 0 8.8-6 14.5-13.3 15.8-1.2 .4-3.3 .3-38.5 .3zm42.8 20.2c-2.8-.7-3.3-.5-42.8-.5v35c39.6 0 40 .2 42.8-.5 7.5-1.5 13.5-8 13.5-17 0-8.7-6-15.5-13.5-17zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM182 192.3h-57c0 67.1 10.7 109.7-35.8 109.7-19.5 0-38.8-5.7-57.2-14.8v28c30 8.3 68 8.3 68 8.3 97.9 0 82-47.7 82-131.2zm178.5 4.5c-63.4-16-165-14.9-165 59.3 0 77.1 108.2 73.6 165 59.2V287C312.9 311.7 253 309 253 256s59.8-55.6 107.5-31.2v-28zM544 286.5c0-18.5-16.5-30.5-38-32v-.8c19.5-2.7 30.3-15.5 30.3-30.2 0-19-15.7-30-37-31 0 0 6.3-.3-120.3-.3v127.5h122.7c24.3 .1 42.3-12.9 42.3-33.2z"/>
-    </svg>
-  </ng-container>
-
-  <ng-container *ngSwitchCase="'DISCOVER'">
-    <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" viewBox="0 0 576 512" fill="white" xmlns="http://www.w3.org/2000/svg">
-      <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M520.4 196.1c0-7.9-5.5-12.1-15.6-12.1h-4.9v24.9h4.7c10.3 0 15.8-4.4 15.8-12.8zM528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-44.1 138.9c22.6 0 52.9-4.1 52.9 24.4 0 12.6-6.6 20.7-18.7 23.2l25.8 34.4h-19.6l-22.2-32.8h-2.2v32.8h-16zm-55.9 .1h45.3v14H444v18.2h28.3V217H444v22.2h29.3V253H428zm-68.7 0l21.9 55.2 22.2-55.2h17.5l-35.5 84.2h-8.6l-35-84.2zm-55.9-3c24.7 0 44.6 20 44.6 44.6 0 24.7-20 44.6-44.6 44.6-24.7 0-44.6-20-44.6-44.6 0-24.7 20-44.6 44.6-44.6zm-49.3 6.1v19c-20.1-20.1-46.8-4.7-46.8 19 0 25 27.5 38.5 46.8 19.2v19c-29.7 14.3-63.3-5.7-63.3-38.2 0-31.2 33.1-53 63.3-38zm-97.2 66.3c11.4 0 22.4-15.3-3.3-24.4-15-5.5-20.2-11.4-20.2-22.7 0-23.2 30.6-31.4 49.7-14.3l-8.4 10.8c-10.4-11.6-24.9-6.2-24.9 2.5 0 4.4 2.7 6.9 12.3 10.3 18.2 6.6 23.6 12.5 23.6 25.6 0 29.5-38.8 37.4-56.6 11.3l10.3-9.9c3.7 7.1 9.9 10.8 17.5 10.8zM55.4 253H32v-82h23.4c26.1 0 44.1 17 44.1 41.1 0 18.5-13.2 40.9-44.1 40.9zm67.5 0h-16v-82h16zM544 433c0 8.2-6.8 15-15 15H128c189.6-35.6 382.7-139.2 416-160zM74.1 191.6c-5.2-4.9-11.6-6.6-21.9-6.6H48v54.2h4.2c10.3 0 17-2 21.9-6.4 5.7-5.2 8.9-12.8 8.9-20.7s-3.2-15.5-8.9-20.5z"/>
-    </svg>
-  </ng-container>
-
-  <ng-container *ngSwitchCase="'DISCOVER_DINERS'">
-    <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" viewBox="0 0 576 512" fill="white" xmlns="http://www.w3.org/2000/svg">
-      <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M239.7 79.9c-96.9 0-175.8 78.6-175.8 175.8 0 96.9 78.9 175.8 175.8 175.8 97.2 0 175.8-78.9 175.8-175.8 0-97.2-78.6-175.8-175.8-175.8zm-39.9 279.6c-41.7-15.9-71.4-56.4-71.4-103.8s29.7-87.9 71.4-104.1v207.9zm79.8 .3V151.6c41.7 16.2 71.4 56.7 71.4 104.1s-29.7 87.9-71.4 104.1zM528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM329.7 448h-90.3c-106.2 0-193.8-85.5-193.8-190.2C45.6 143.2 133.2 64 239.4 64h90.3c105 0 200.7 79.2 200.7 193.8 0 104.7-95.7 190.2-200.7 190.2z"/>
-    </svg>
-  </ng-container>
-
-  <ng-container *ngSwitchCase="'AMERICAN_EXPRESS'">
-    <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" viewBox="0 0 576 512" fill="white" xmlns="http://www.w3.org/2000/svg">
-      <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M0 432c0 26.5 21.5 48 48 48H528c26.5 0 48-21.5 48-48v-1.1H514.3l-31.9-35.1-31.9 35.1H246.8V267.1H181L262.7 82.4h78.6l28.1 63.2V82.4h97.2L483.5 130l17-47.6H576V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80V432zm440.4-21.7L482.6 364l42 46.3H576l-68-72.1 68-72.1H525.4l-42 46.7-41.5-46.7H390.5L458 338.6l-67.4 71.6V377.1h-83V354.9h80.9V322.6H307.6V300.2h83V267.1h-122V410.3H440.4zm96.3-72L576 380.2V296.9l-39.3 41.4zm-36.3-92l36.9-100.6V246.3H576V103H515.8l-32.2 89.3L451.7 103H390.5V246.1L327.3 103H276.1L213.7 246.3h43l11.9-28.7h65.9l12 28.7h82.7V146L466 246.3h34.4zM282 185.4l19.5-46.9 19.4 46.9H282z"/>
-    </svg>
-  </ng-container>
-
-  <ng-container *ngSwitchCase="'OTHER_BRAND'">
-    <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" viewBox="0 0 576 512" fill="white" xmlns="http://www.w3.org/2000/svg">
-      <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M512 80c8.8 0 16 7.2 16 16l0 32L48 128l0-32c0-8.8 7.2-16 16-16l448 0zm16 144l0 192c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16l0-192 480 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm56 304c-13.3 0-24 10.7-24 24s10.7 24 24 24l48 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0zm128 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-112 0z"/>
-    </svg>
-  </ng-container>
-
   <ng-container *ngSwitchCase="'officialMempoolSpace'">
     <svg [class]="class" [style]="style" [attr.width]="width" [attr.height]="height" [attr.viewBox]="viewBox" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M163.658 113.263C161.089 113.263 158.992 111.146 158.992 108.535C158.992 105.966 161.048 103.951 163.658 103.951C166.269 103.951 168.325 105.966 168.325 108.535C168.325 111.125 166.228 113.263 163.658 113.263Z" fill="#9857FF"/>

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

@@ -8,7 +8,7 @@
           </a>
         } @else if (enterpriseInfo?.img || enterpriseInfo?.imageMd5) {
           <a [routerLink]="['/' | relativeUrl]">
-            <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + enterpriseInfo.name + '/logo'" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+            <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + enterpriseInfo.name + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
           </a>
           <div class="vertical-line"></div>
         }
@@ -124,6 +124,7 @@
           <ng-container *ngIf="(ETA$ | async) as eta;">
             <app-accelerate-checkout
               *ngIf="(da$ | async) as da;"
+              [cashappEnabled]="cashappEligible"
               [advancedEnabled]="false"
               [forceMobile]="true"
               [tx]="tx"

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

@@ -756,6 +756,10 @@ export class TrackerComponent implements OnInit, OnDestroy {
     }
   }
 
+  get cashappEligible(): boolean {
+    return this.mempoolPosition?.block > 0 && this.tx.weight < 4000;
+  }
+
   get showAccelerationSummary(): boolean {
     return (
       this.tx

frontend/src/app/components/transaction/cpfp-info.component.html

@@ -0,0 +1,56 @@
+<br>
+<div class="title">
+  <h2 class="text-left" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
+</div>
+<div class="box cpfp-details">
+  <table class="table table-fixed table-borderless table-striped">
+    <thead>
+      <tr>
+        <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
+        <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
+        <th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
+        <th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
+        <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
+        <th class="d-none d-lg-table-cell"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <ng-template [ngIf]="cpfpInfo?.descendants?.length">
+        <tr *ngFor="let cpfpTx of cpfpInfo.descendants">
+          <td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
+          <td>
+            <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon  *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)"  class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+      <ng-template [ngIf]="cpfpInfo?.bestDescendant">
+        <tr>
+          <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
+          <td class="txids">
+            <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+      <ng-template [ngIf]="cpfpInfo?.ancestors?.length">
+        <tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
+          <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
+          <td class="txids">
+            <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
+          </td>
+          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
+          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
+          <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
+          <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
+        </tr>
+      </ng-template>
+    </tbody>
+  </table>
+</div>

frontend/src/app/components/transaction/cpfp-info.component.scss

@@ -0,0 +1,32 @@
+.title {
+  h2 {
+    line-height: 1;
+    margin: 0;
+    padding-bottom: 5px;
+  }
+}
+
+.cpfp-details {
+  .txids {
+    width: 60%;
+  }
+
+  @media (max-width: 500px) {
+    .txids {
+      width: 40%;
+    }
+  }
+}
+
+.arrow-green {
+	color: var(--success);
+}
+
+.arrow-red {
+	color: var(--red);
+}
+
+.badge {
+	position: relative;
+	top: -1px;
+}

frontend/src/app/components/transaction/cpfp-info.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { CpfpInfo } from '@interfaces/node-api.interface';
+import { Transaction } from '@interfaces/electrs.interface';
+
+@Component({
+  selector: 'app-cpfp-info',
+  templateUrl: './cpfp-info.component.html',
+  styleUrls: ['./cpfp-info.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CpfpInfoComponent implements OnInit {
+  @Input() cpfpInfo: CpfpInfo;
+  @Input() tx: Transaction;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  roundToOneDecimal(cpfpTx: any): number {
+    return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
+  }
+}

frontend/src/app/components/transaction/transaction-raw.component.html

@@ -0,0 +1,205 @@
+<div class="container-xl">
+
+  @if (!transaction) {
+
+    <h1 style="margin-top: 19px;" i18n="shared.preview-transaction|Preview Transaction">Preview Transaction</h1>
+
+    <form [formGroup]="pushTxForm" (submit)="decodeTransaction()" novalidate>
+      <div class="mb-3">
+        <textarea formControlName="txRaw" class="form-control" rows="5" i18n-placeholder="transaction.hex" placeholder="Transaction hex"></textarea>
+      </div>
+      <button [disabled]="isLoading" type="submit" class="btn btn-primary mr-2" i18n="shared.preview-transaction|Preview Transaction">Preview Transaction</button>
+      <input type="checkbox" [checked]="!offlineMode" id="offline-mode" (change)="onOfflineModeChange($event)">
+      <label class="label" for="offline-mode">
+        <span i18n="transaction.fetch-prevout-data">Fetch prevout data</span>
+      </label>
+      <p *ngIf="error" class="red-color d-inline">Error decoding transaction, reason: {{ error }}</p>
+    </form>
+  }
+
+  @if (transaction && !error && !isLoading) {
+    <div class="title-block">
+      <h1 i18n="shared.preview-transaction|Preview Transaction">Preview Transaction</h1>
+
+      <span class="tx-link">
+        <span class="txid">
+          <app-truncate [text]="transaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, transaction.txid]" [disabled]="!successBroadcast">
+            <app-clipboard [text]="transaction.txid"></app-clipboard>
+          </app-truncate>
+        </span>
+      </span>
+
+      <div class="container-buttons">
+        <button *ngIf="!successBroadcast" [disabled]="isLoadingBroadcast" type="button" class="btn btn-sm btn-primary" i18n="transaction.broadcast|Broadcast" (click)="postTx()">Broadcast</button>
+        <button *ngIf="successBroadcast" type="button" class="btn btn-sm btn-success no-cursor" i18n="transaction.broadcasted|Broadcasted">Broadcasted</button>
+        <button class="btn btn-sm" style="margin-left: 10px; padding: 0;" (click)="resetForm()">&#10005;</button>
+      </div>
+
+    </div>
+
+    <p class="red-color d-inline">{{ errorBroadcast }}</p>
+
+    <div class="clearfix"></div>
+
+    @if (!hasPrevouts) {
+      <div class="alert alert-mempool">
+        @if (offlineMode) {
+          <span><strong>Prevouts are not loaded, some fields like fee rate cannot be displayed.</strong></span>
+        } @else {
+          <span><strong>Error loading prevouts</strong>. {{ errorPrevouts ? 'Reason: ' + errorPrevouts : '' }}</span>
+        }
+      </div>
+    }
+
+    @if (errorCpfpInfo) {
+      <div class="alert alert-mempool">
+        <span><strong>Error loading CPFP data</strong>. Reason: {{ errorCpfpInfo }}</span>
+      </div>
+    }
+
+    <app-transaction-details
+      [network]="stateService.network"
+      [tx]="transaction"
+      [isLoadingTx]="false"
+      [isMobile]="isMobile"
+      [isLoadingFirstSeen]="false"
+      [featuresEnabled]="true"
+      [filters]="filters"
+      [hasEffectiveFeeRate]="false"
+      [cpfpInfo]="null"
+      [ETA$]="ETA$"
+      [hasEffectiveFeeRate]="hasEffectiveFeeRate"
+      [cpfpInfo]="cpfpInfo"
+      [hasCpfp]="hasCpfp"
+      (toggleCpfp$)="this.showCpfpDetails = !this.showCpfpDetails"
+    ></app-transaction-details>
+  
+    <app-cpfp-info *ngIf="showCpfpDetails" [cpfpInfo]="cpfpInfo" [tx]="transaction"></app-cpfp-info>
+    <br>
+
+    <ng-container *ngIf="flowEnabled; else flowPlaceholder">
+      <div class="title float-left">
+        <h2 id="flow" i18n="transaction.flow|Transaction flow">Flow</h2>
+      </div>
+
+      <button type="button" class="btn btn-outline-info flow-toggle btn-sm float-right" (click)="toggleGraph()" i18n="hide-diagram">Hide diagram</button>
+
+      <div class="clearfix"></div>
+
+      <div class="box">
+        <div class="graph-container" #graphContainer>
+          <tx-bowtie-graph
+            [tx]="transaction"
+            [cached]="true"
+            [width]="graphWidth"
+            [height]="graphHeight"
+            [lineLimit]="inOutLimit"
+            [maxStrands]="graphExpanded ? maxInOut : 24"
+            [network]="stateService.network"
+            [tooltip]="true"
+            [connectors]="true"
+            [inputIndex]="null" [outputIndex]="null"
+          >
+          </tx-bowtie-graph>
+        </div>
+        <div class="toggle-wrapper" *ngIf="maxInOut > 24">
+          <button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>
+          <ng-template #collapseBtn>
+            <button class="btn btn-sm btn-primary graph-toggle" (click)="collapseGraph();"><span i18n="show-less">Show less</span></button>
+          </ng-template>
+        </div>
+      </div>
+
+      <br>
+    </ng-container>
+    <ng-template #flowPlaceholder>
+      <div class="box hidden">
+        <div class="graph-container" #graphContainer>
+        </div>
+      </div>
+    </ng-template>
+
+    <div class="subtitle-block">
+      <div class="title">
+        <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+      </div>
+
+      <div class="title-buttons">
+        <button *ngIf="!flowEnabled" type="button" class="btn btn-outline-info flow-toggle btn-sm" (click)="toggleGraph()" i18n="show-diagram">Show diagram</button>
+        <button type="button" class="btn btn-outline-info btn-sm" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
+      </div>
+    </div>
+
+
+    <app-transactions-list #txList [transactions]="[transaction]" [transactionPage]="true" [txPreview]="true"></app-transactions-list>
+
+    <div class="title text-left">
+      <h2 i18n="transaction.details|Transaction Details">Details</h2>
+    </div>
+    <div class="box">
+      <div class="row">
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td i18n="block.size">Size</td>
+                <td [innerHTML]="'&lrm;' + (transaction.size | bytes: 2)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
+                <td [innerHTML]="'&lrm;' + (transaction.weight / 4 | vbytes: 2)"></td>
+              </tr>
+              <tr *ngIf="adjustedVsize">
+                <td><ng-container i18n="transaction.adjusted-vsize|Transaction Adjusted VSize">Adjusted vsize</ng-container>
+                  <a class="info-link" [routerLink]="['/docs/faq/' | relativeUrl]" fragment="what-is-adjusted-vsize">
+                    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                  </a>
+                </td>
+                <td [innerHTML]="'&lrm;' + (adjustedVsize | vbytes: 2)"></td>
+              </tr>
+              <tr>
+                <td i18n="block.weight">Weight</td>
+                <td [innerHTML]="'&lrm;' + (transaction.weight | wuBytes: 2)"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td i18n="transaction.version">Version</td>
+                <td [innerHTML]="'&lrm;' + (transaction.version | number)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.locktime">Locktime</td>
+                <td [innerHTML]="'&lrm;' + (transaction.locktime | number)"></td>
+              </tr>
+              <tr *ngIf="transaction.sigops >= 0">
+                <td><ng-container i18n="transaction.sigops|Transaction Sigops">Sigops</ng-container>
+                  <a class="info-link" [routerLink]="['/docs/faq/' | relativeUrl]" fragment="what-are-sigops">
+                    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                  </a>
+                </td>
+                <td [innerHTML]="'&lrm;' + (transaction.sigops | number)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.hex">Transaction hex</td>
+                <td><app-clipboard [text]="pushTxForm.get('txRaw').value" [leftPadding]="false"></app-clipboard></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  }
+
+  @if (isLoading) {
+    <div class="text-center">
+      <div class="spinner-border text-light mt-2 mb-2"></div>
+      <h3 i18n="transaction.error.loading-prevouts">
+        Loading {{ isLoadingPrevouts ? 'transaction prevouts' : isLoadingCpfpInfo ? 'CPFP' : '' }}
+      </h3>
+    </div>
+  }
+</div>

frontend/src/app/components/transaction/transaction-raw.component.scss

@@ -0,0 +1,194 @@
+.label {
+  margin: 0 5px;
+}
+
+.container-buttons {
+  align-self: center;
+}
+
+.title-block {
+  flex-wrap: wrap;
+  align-items: baseline;
+  @media (min-width: 650px) {
+    flex-direction: row;
+  }
+  h1 {
+    margin: 0rem;
+    margin-right: 15px;
+    line-height: 1;
+  }
+}
+
+.tx-link {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: baseline;
+  width: 0;
+  max-width: 100%;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  margin-top: 8px;
+  @media (min-width: 651px) {
+    flex-grow: 1;
+    margin-bottom: 0px;
+    margin-right: 1em;
+    top: 1px;
+    position: relative;
+  }
+  @media (max-width: 650px) {
+    width: 100%;
+    order: 3;
+  }
+
+  .txid {
+    width: 200px;
+    min-width: 200px;
+    flex-grow: 1;
+  }
+}
+
+.container-xl {
+	margin-bottom: 40px;
+}
+
+.row {
+	flex-direction: column;
+	@media (min-width: 850px) {
+		flex-direction: row;
+	}
+}
+
+.box.hidden {
+  visibility: hidden;
+  height: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.graph-container {
+  position: relative;
+  width: 100%;
+  background: var(--stat-box-bg);
+  padding: 10px 0;
+  padding-bottom: 0;
+}
+
+.toggle-wrapper {
+  width: 100%;
+  text-align: center;
+  margin: 1.25em 0 0;
+}
+
+.graph-toggle {
+  margin: auto;
+}
+
+.table {
+  tr td {
+		padding: 0.75rem 0.5rem;
+		@media (min-width: 576px) {
+			padding: 0.75rem 0.75rem;
+		}
+		&:last-child {
+			text-align: right;
+			@media (min-width: 850px) {
+        text-align: left;
+			}
+		}
+		.btn {
+			display: block;
+		}
+
+    &.wrap-cell {
+      white-space: normal;
+    }
+	}
+}
+
+.effective-fee-container {
+	display: block;
+	@media (min-width: 768px){
+		display: inline-block;
+	}
+  @media (max-width: 425px){
+		display: flex;
+    flex-direction: column;
+	}
+}
+
+.effective-fee-rating {
+  @media (max-width: 767px){
+    margin-right: 0px !important;
+  }
+}
+
+.title {
+  h2 {
+    line-height: 1;
+    margin: 0;
+    padding-bottom: 5px;
+  }
+}
+
+.btn-outline-info {
+	margin-top: 5px;
+	@media (min-width: 768px){
+		margin-top: 0px;
+	}
+}
+
+.flow-toggle {
+  margin-top: -5px;
+  margin-left: 10px;
+	@media (min-width: 768px){
+		display: inline-block;
+    margin-top: 0px;
+    margin-bottom: 0px;
+	}
+}
+
+.subtitle-block {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+
+  .title {
+    flex-shrink: 0;
+  }
+
+  .title-buttons {
+    flex-shrink: 1;
+    text-align: right;
+    .btn {
+      margin-top: 0;
+      margin-bottom: 8px;
+      margin-left: 8px;
+    }
+  }
+}
+
+.cpfp-details {
+  .txids {
+    width: 60%;
+  }
+
+  @media (max-width: 500px) {
+    .txids {
+      width: 40%;
+    }
+  }
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.no-cursor {
+  cursor: default !important;
+  pointer-events: none;
+}

frontend/src/app/components/transaction/transaction-raw.component.ts

@@ -0,0 +1,328 @@
+import { Component, OnInit, HostListener, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { Transaction, Vout } from '@interfaces/electrs.interface';
+import { StateService } from '../../services/state.service';
+import { Filter, toFilters } from '../../shared/filters.utils';
+import { decodeRawTransaction, getTransactionFlags, addInnerScriptsToVin, countSigops } from '../../shared/transaction.utils';
+import { ETA, EtaService } from '../../services/eta.service';
+import { combineLatest, firstValueFrom, map, Observable, startWith, Subscription } from 'rxjs';
+import { WebsocketService } from '../../services/websocket.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { SeoService } from '../../services/seo.service';
+import { seoDescriptionNetwork } from '@app/shared/common.utils';
+import { ApiService } from '../../services/api.service';
+import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { CpfpInfo } from '../../interfaces/node-api.interface';
+
+@Component({
+  selector: 'app-transaction-raw',
+  templateUrl: './transaction-raw.component.html',
+  styleUrls: ['./transaction-raw.component.scss'],
+})
+export class TransactionRawComponent implements OnInit, OnDestroy {
+
+  pushTxForm: UntypedFormGroup;
+  isLoading: boolean;
+  isLoadingPrevouts: boolean;
+  isLoadingCpfpInfo: boolean;
+  offlineMode: boolean = false;
+  transaction: Transaction;
+  error: string;
+  errorPrevouts: string;
+  errorCpfpInfo: string;
+  hasPrevouts: boolean;
+  missingPrevouts: string[];
+  isLoadingBroadcast: boolean;
+  errorBroadcast: string;
+  successBroadcast: boolean;
+
+  isMobile: boolean;
+  @ViewChild('graphContainer')
+  graphContainer: ElementRef;
+  graphExpanded: boolean = false;
+  graphWidth: number = 1068;
+  graphHeight: number = 360;
+  inOutLimit: number = 150;
+  maxInOut: number = 0;
+  flowPrefSubscription: Subscription;
+  hideFlow: boolean = this.stateService.hideFlow.value;
+  flowEnabled: boolean;
+  adjustedVsize: number;
+  filters: Filter[] = [];
+  hasEffectiveFeeRate: boolean;
+  fetchCpfp: boolean;
+  cpfpInfo: CpfpInfo | null;
+  hasCpfp: boolean = false;
+  showCpfpDetails = false;
+  ETA$: Observable<ETA | null>;
+  mempoolBlocksSubscription: Subscription;
+
+  constructor(
+    public route: ActivatedRoute,
+    public router: Router,
+    public stateService: StateService,
+    public etaService: EtaService,
+    public electrsApi: ElectrsApiService,
+    public websocketService: WebsocketService,
+    public formBuilder: UntypedFormBuilder,
+    public seoService: SeoService,
+    public apiService: ApiService,
+    public relativeUrlPipe: RelativeUrlPipe,
+  ) {}
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`:@@meta.title.preview-tx:Preview Transaction`);
+    this.seoService.setDescription($localize`:@@meta.description.preview-tx:Preview a transaction to the Bitcoin${seoDescriptionNetwork(this.stateService.network)} network using the transaction's raw hex data.`);
+    this.websocketService.want(['blocks', 'mempool-blocks']);
+    this.pushTxForm = this.formBuilder.group({
+      txRaw: ['', Validators.required],
+    });
+  }
+
+  async decodeTransaction(): Promise<void> {
+    this.resetState();
+    this.isLoading = true;
+    try {
+      const tx = decodeRawTransaction(this.pushTxForm.get('txRaw').value, this.stateService.network);
+      await this.fetchPrevouts(tx);
+      await this.fetchCpfpInfo(tx);
+      this.processTransaction(tx);
+    } catch (error) {
+      this.error = error.message;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async fetchPrevouts(transaction: Transaction): Promise<void> {
+    if (this.offlineMode) {
+      return;
+    }
+
+    const prevoutsToFetch = transaction.vin.map((input) => ({ txid: input.txid, vout: input.vout }));
+
+    if (!prevoutsToFetch.length || transaction.vin[0].is_coinbase) {
+      this.hasPrevouts = true;
+      return;
+    }
+
+    try {
+      this.missingPrevouts = [];
+      this.isLoadingPrevouts = true;
+
+      const prevouts: { prevout: Vout, unconfirmed: boolean }[] = await firstValueFrom(this.apiService.getPrevouts$(prevoutsToFetch));
+
+      if (prevouts?.length !== prevoutsToFetch.length) {
+        throw new Error();
+      }
+
+      transaction.vin = transaction.vin.map((input, index) => {
+        if (prevouts[index]) {
+          input.prevout = prevouts[index].prevout;
+          addInnerScriptsToVin(input);
+        } else {
+          this.missingPrevouts.push(`${input.txid}:${input.vout}`);
+        }
+        return input;
+      });
+
+      if (this.missingPrevouts.length) {
+        throw new Error(`Some prevouts do not exist or are already spent (${this.missingPrevouts.length})`);
+      }
+
+      transaction.fee = transaction.vin.some(input => input.is_coinbase)
+        ? 0
+        : transaction.vin.reduce((fee, input) => {
+          return fee + (input.prevout?.value || 0);
+        }, 0) - transaction.vout.reduce((sum, output) => sum + output.value, 0);
+      transaction.feePerVsize = transaction.fee / (transaction.weight / 4);
+      transaction.sigops = countSigops(transaction);
+
+      this.hasPrevouts = true;
+      this.isLoadingPrevouts = false;
+      this.fetchCpfp = prevouts.some(prevout => prevout?.unconfirmed);
+    } catch (error) {
+      console.log(error);
+      this.errorPrevouts = error?.error?.error || error?.message;
+      this.isLoadingPrevouts = false;
+    }
+  }
+
+  async fetchCpfpInfo(transaction: Transaction): Promise<void> {
+    // Fetch potential cpfp data if all prevouts were parsed successfully and at least one of them is unconfirmed
+    if (this.hasPrevouts && this.fetchCpfp) {
+      try {
+        this.isLoadingCpfpInfo = true;
+        const cpfpInfo: CpfpInfo[] = await firstValueFrom(this.apiService.getCpfpLocalTx$([{
+          txid: transaction.txid,
+          weight: transaction.weight,
+          sigops: transaction.sigops,
+          fee: transaction.fee,
+          vin: transaction.vin,
+          vout: transaction.vout
+        }]));
+
+        if (cpfpInfo?.[0]?.ancestors?.length) {
+          const { ancestors, effectiveFeePerVsize } = cpfpInfo[0];
+          transaction.effectiveFeePerVsize = effectiveFeePerVsize;
+          this.cpfpInfo = { ancestors, effectiveFeePerVsize };
+          this.hasCpfp = true;
+          this.hasEffectiveFeeRate = true;
+        }
+        this.isLoadingCpfpInfo = false;
+      } catch (error) {
+        this.errorCpfpInfo = error?.error?.error || error?.message;
+        this.isLoadingCpfpInfo = false;
+      }
+    }
+  }
+
+  processTransaction(tx: Transaction): void {
+    this.transaction = tx;
+
+    this.transaction.flags = getTransactionFlags(this.transaction, null, null, null, this.stateService.network);
+    this.filters = this.transaction.flags ? toFilters(this.transaction.flags).filter(f => f.txPage) : [];
+    if (this.transaction.sigops >= 0) {
+      this.adjustedVsize = Math.max(this.transaction.weight / 4, this.transaction.sigops * 5);
+    }
+
+    this.setupGraph();
+    this.setFlowEnabled();
+    this.flowPrefSubscription = this.stateService.hideFlow.subscribe((hide) => {
+      this.hideFlow = !!hide;
+      this.setFlowEnabled();
+    });
+    this.setGraphSize();
+
+    this.ETA$ = combineLatest([
+      this.stateService.mempoolBlocks$.pipe(startWith(null)),
+      this.stateService.difficultyAdjustment$.pipe(startWith(null)),
+    ]).pipe(
+      map(([mempoolBlocks, da]) => {
+        return this.etaService.calculateETA(
+          this.stateService.network,
+          this.transaction,
+          mempoolBlocks,
+          null,
+          da,
+          null,
+          null,
+          null
+        );
+      })
+    );
+
+    this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$.subscribe(() => {
+      if (this.transaction) {
+        this.stateService.markBlock$.next({
+          txid: this.transaction.txid,
+          txFeePerVSize: this.transaction.effectiveFeePerVsize || this.transaction.feePerVsize,
+        });
+      }
+    });
+  }
+
+  async postTx(): Promise<string> {
+    this.isLoadingBroadcast = true;
+    this.errorBroadcast = null;
+    return new Promise((resolve, reject) => {
+      this.apiService.postTransaction$(this.pushTxForm.get('txRaw').value)
+      .subscribe((result) => {
+        this.isLoadingBroadcast = false;
+        this.successBroadcast = true;
+        this.transaction.txid = result;
+        resolve(result);
+      },
+      (error) => {
+        if (typeof error.error === 'string') {
+          const matchText = error.error.replace(/\\/g, '').match('"message":"(.*?)"');
+          this.errorBroadcast = 'Failed to broadcast transaction, reason: ' + (matchText && matchText[1] || error.error);
+        } else if (error.message) {
+          this.errorBroadcast = 'Failed to broadcast transaction, reason: ' + error.message;
+        }
+        this.isLoadingBroadcast = false;
+        reject(this.error);
+      });
+    });
+  }
+
+  resetState() {
+    this.transaction = null;
+    this.error = null;
+    this.errorPrevouts = null;
+    this.errorBroadcast = null;
+    this.successBroadcast = false;
+    this.isLoading = false;
+    this.isLoadingPrevouts = false;
+    this.isLoadingCpfpInfo = false;
+    this.isLoadingBroadcast = false;
+    this.adjustedVsize = null;
+    this.showCpfpDetails = false;
+    this.hasCpfp = false;
+    this.fetchCpfp = false;
+    this.cpfpInfo = null;
+    this.hasEffectiveFeeRate = false;
+    this.filters = [];
+    this.hasPrevouts = false;
+    this.missingPrevouts = [];
+    this.stateService.markBlock$.next({});
+    this.mempoolBlocksSubscription?.unsubscribe();
+  }
+
+  resetForm() {
+    this.resetState();
+    this.pushTxForm.reset();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  setGraphSize(): void {
+    this.isMobile = window.innerWidth < 850;
+    if (this.graphContainer?.nativeElement && this.stateService.isBrowser) {
+      setTimeout(() => {
+        if (this.graphContainer?.nativeElement?.clientWidth) {
+          this.graphWidth = this.graphContainer.nativeElement.clientWidth;
+        } else {
+          setTimeout(() => { this.setGraphSize(); }, 1);
+        }
+      }, 1);
+    } else {
+      setTimeout(() => { this.setGraphSize(); }, 1);
+    }
+  }
+
+  setupGraph() {
+    this.maxInOut = Math.min(this.inOutLimit, Math.max(this.transaction?.vin?.length || 1, this.transaction?.vout?.length + 1 || 1));
+    this.graphHeight = this.graphExpanded ? this.maxInOut * 15 : Math.min(360, this.maxInOut * 80);
+  }
+
+  toggleGraph() {
+    const showFlow = !this.flowEnabled;
+    this.stateService.hideFlow.next(!showFlow);
+  }
+
+  setFlowEnabled() {
+    this.flowEnabled = !this.hideFlow;
+  }
+
+  expandGraph() {
+    this.graphExpanded = true;
+    this.graphHeight = this.maxInOut * 15;
+  }
+
+  collapseGraph() {
+    this.graphExpanded = false;
+    this.graphHeight = Math.min(360, this.maxInOut * 80);
+  }
+
+  onOfflineModeChange(e): void {
+    this.offlineMode = !e.target.checked;
+  }
+
+  ngOnDestroy(): void {
+    this.mempoolBlocksSubscription?.unsubscribe();
+    this.flowPrefSubscription?.unsubscribe();
+    this.stateService.markBlock$.next({});
+  }
+
+}

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

@@ -24,7 +24,6 @@
           [height]="tx?.status?.block_height"
           [replaced]="replaced"
           [removed]="this.rbfInfo?.mined && !this.tx?.status?.confirmed"
-          [cached]="isCached"
         ></app-confirmations>
       </div>
     </ng-container>
@@ -67,64 +66,7 @@
   <ng-template [ngIf]="!isLoadingTx && !error">
 
     <!-- CPFP Details -->
-    <ng-template [ngIf]="showCpfpDetails">
-      <br>
-      <div class="title">
-        <h2 class="text-left" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
-      </div>
-      <div class="box cpfp-details">
-        <table class="table table-fixed table-borderless table-striped">
-          <thead>
-            <tr>
-              <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
-              <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
-              <th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
-              <th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
-              <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
-              <th class="d-none d-lg-table-cell"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <ng-template [ngIf]="cpfpInfo?.descendants?.length">
-              <tr *ngFor="let cpfpTx of cpfpInfo.descendants">
-                <td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                <td>
-                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon  *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)"  class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-            <ng-template [ngIf]="cpfpInfo?.bestDescendant">
-              <tr>
-                <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                <td class="txids">
-                  <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-            <ng-template [ngIf]="cpfpInfo?.ancestors?.length">
-              <tr *ngFor="let cpfpTx of cpfpInfo.ancestors">
-                <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
-                <td class="txids">
-                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
-                </td>
-                <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
-                <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
-                <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
-                <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
-              </tr>
-            </ng-template>
-          </tbody>
-        </table>
-      </div>
-    </ng-template>
+    <app-cpfp-info *ngIf="showCpfpDetails" [cpfpInfo]="cpfpInfo" [tx]="tx"></app-cpfp-info>
 
     <!-- Accelerator -->
     <ng-container *ngIf="!tx?.status?.confirmed && showAccelerationSummary && (ETA$ | async) as eta;">
@@ -139,6 +81,7 @@
 
       <app-accelerate-checkout
         *ngIf="(da$ | async) as da;"
+        [cashappEnabled]="cashappEligible"
         [advancedEnabled]="true"
         [tx]="tx"
         [accelerating]="isAcceleration"

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

@@ -227,18 +227,6 @@
   }
 }
 
-.cpfp-details {
-  .txids {
-    width: 60%;
-  }
-
-  @media (max-width: 500px) {
-    .txids {
-      width: 40%;
-    }
-  }
-}
-
 .tx-list {
   .alert-link {
     display: block;

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

@@ -156,6 +156,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   showAccelerationDetails = false;
   hasAccelerationDetails = false;
   scrollIntoAccelPreview = false;
+  cashappEligible = false;
   auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;
   isMempoolSpaceBuild = this.stateService.isMempoolSpaceBuild;
 
@@ -239,7 +240,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         retry({ count: 2, delay: 2000 }),
         // Try again until we either get a valid response, or the transaction is confirmed
         repeat({ delay: 2000 }),
-        filter((transactionTimes) => transactionTimes?.[0] > 0 || this.tx.status?.confirmed),
+        filter((transactionTimes) => transactionTimes?.length && transactionTimes[0] > 0 && !this.tx.status?.confirmed),
         take(1),
       )),
     )
@@ -527,6 +528,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
                   this.miningStats = stats;
                 });
               }
+              if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
+                this.cashappEligible = true;
+              }
               if (!this.gotInitialPosition && txPosition.position?.block === 0 && txPosition.position?.vsize < 750_000) {
                 this.accelerationFlowCompleted = true;
               }
@@ -1032,6 +1036,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.showAccelerationDetails = false;
     this.accelerationFlowCompleted = false;
     this.accelerationInfo = null;
+    this.cashappEligible = false;
     this.txInBlockIndex = null;
     this.mempoolPosition = null;
     this.pool = null;
@@ -1049,10 +1054,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.stateService.markBlock$.next({});
   }
 
-  roundToOneDecimal(cpfpTx: any): number {
-    return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
-  }
-
   setupGraph() {
     this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
     this.graphHeight = this.graphExpanded ? this.maxInOut * 15 : Math.min(360, this.maxInOut * 80);

frontend/src/app/components/transaction/transaction.module.ts

@@ -9,6 +9,8 @@ import { TransactionExtrasModule } from '@components/transaction/transaction-ext
 import { GraphsModule } from '@app/graphs/graphs.module';
 import { AccelerateCheckout } from '@components/accelerate-checkout/accelerate-checkout.component';
 import { AccelerateFeeGraphComponent } from '@components/accelerate-checkout/accelerate-fee-graph.component';
+import { TransactionRawComponent } from '@components/transaction/transaction-raw.component';
+import { CpfpInfoComponent } from '@components/transaction/cpfp-info.component';
 
 const routes: Routes = [
   {
@@ -16,6 +18,10 @@ const routes: Routes = [
     redirectTo: '/',
     pathMatch: 'full',
   },
+  {
+    path: 'preview',
+    component: TransactionRawComponent,
+  },
   {
     path: ':id',
     component: TransactionComponent,
@@ -49,12 +55,15 @@ export class TransactionRoutingModule { }
     TransactionDetailsComponent,
     AccelerateCheckout,
     AccelerateFeeGraphComponent,
+    TransactionRawComponent,
+    CpfpInfoComponent,
   ],
   exports: [
     TransactionComponent,
     TransactionDetailsComponent,
     AccelerateCheckout,
     AccelerateFeeGraphComponent,
+    CpfpInfoComponent,
   ]
 })
 export class TransactionModule { }

frontend/src/app/components/transactions-list/transactions-list.component.ts

@@ -37,6 +37,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   @Input() addresses: string[] = [];
   @Input() rowLimit = 12;
   @Input() blockTime: number = 0; // Used for price calculation if all the transactions are in the same block
+  @Input() txPreview = false;
 
   @Output() loadMore = new EventEmitter();
 
@@ -81,7 +82,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       this.refreshOutspends$
         .pipe(
           switchMap((txIds) => {
-            if (!this.cached) {
+            if (!this.cached && !this.txPreview) {
               // break list into batches of 50 (maximum supported by esplora)
               const batches = [];
               for (let i = 0; i < txIds.length; i += 50) {
@@ -119,7 +120,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
         ),
         this.refreshChannels$
           .pipe(
-            filter(() => this.stateService.networkSupportsLightning()),
+            filter(() => this.stateService.networkSupportsLightning() && !this.txPreview),
             switchMap((txIds) => this.apiService.getChannelByTxIds$(txIds)),
             catchError((error) => {
               // handle 404
@@ -187,7 +188,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       }
 
       this.transactionsLength = this.transactions.length;
-      this.cacheService.setTxCache(this.transactions);
+      
+      if (!this.txPreview) {
+        this.cacheService.setTxCache(this.transactions);
+      }
 
       const confirmedTxs = this.transactions.filter((tx) => tx.status.confirmed).length;
       this.transactions.forEach((tx) => {
@@ -202,12 +206,12 @@ export class TransactionsListComponent implements OnInit, OnChanges {
             for (const address of this.addresses) {
               switch (address.length) {
                 case 130: {
-                  if (v.scriptpubkey === '41' + address + 'ac') {
+                  if (v.scriptpubkey === '21' + address + 'ac') {
                     return v.value;
                   }
                 } break;
                 case 66: {
-                  if (v.scriptpubkey === '21' + address + 'ac') {
+                  if (v.scriptpubkey === '41' + address + 'ac') {
                     return v.value;
                   }
                 } break;
@@ -224,12 +228,12 @@ export class TransactionsListComponent implements OnInit, OnChanges {
             for (const address of this.addresses) {
               switch (address.length) {
                 case 130: {
-                  if (v.prevout?.scriptpubkey === '41' + address + 'ac') {
+                  if (v.prevout?.scriptpubkey === '21' + address + 'ac') {
                     return v.prevout?.value;
                   }
                 } break;
                 case 66: {
-                  if (v.prevout?.scriptpubkey === '21' + address + 'ac') {
+                  if (v.prevout?.scriptpubkey === '41' + address + 'ac') {
                     return v.prevout?.value;
                   }
                 } break;
@@ -351,7 +355,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   }
 
   loadMoreInputs(tx: Transaction): void {
-    if (!tx['@vinLoaded']) {
+    if (!tx['@vinLoaded'] && !this.txPreview) {
       this.electrsApiService.getTransaction$(tx.txid)
         .subscribe((newTx) => {
           tx['@vinLoaded'] = true;

frontend/src/app/components/twitter-login/twitter-login.component.html

@@ -1,6 +1,6 @@
 <a href="#" (click)="twitterLogin()"
   [class]="(disabled ? 'disabled': '') + (customClass ? customClass : 'w-100 btn mt-1 d-flex justify-content-center align-items-center')"
-  style="background-color: rgb(31, 35, 40)" [style]="width ? 'width: ' + width : ''">
+  style="background-color: #1DA1F2" [style]="width ? 'width: ' + width : ''">
+  <img src="./resources/twitter.svg" height="25" style="padding: 2px" [alt]="buttonString + ' with Twitter'" />
   <span class="ml-2 text-light align-middle">{{ buttonString }}</span>
-  <img src="./resources/x.svg" height="25" style="padding: 2px; padding-left: 5px" [alt]="buttonString + ' with Twitter'" />
 </a>

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

@@ -1,6 +1,6 @@
 <div class="container-xl" [class.liquid-address]="network === 'liquid' || network === 'liquidtestnet'">
   <div class="title-address">
-    <h1>{{ walletName }}</h1>
+    <h1 i18n="shared.wallet">Wallet</h1>
   </div>
 
   <div class="clearfix"></div>
@@ -74,36 +74,6 @@
     </ng-container>
   </ng-container>
 
-  <br>
-
-  <div class="title-tx">
-    <h2 class="text-left" i18n="address.transactions">Transactions</h2>
-  </div>
-
-  <app-transactions-list [transactions]="transactions" [showConfirmations]="true" [addresses]="addressStrings" (loadMore)="loadMore()"></app-transactions-list>
-
-  <div class="text-center">
-    <ng-template [ngIf]="isLoadingTransactions">
-      <div class="header-bg box">
-        <div class="row" style="height: 107px;">
-          <div class="col-sm">
-            <span class="skeleton-loader"></span>
-          </div>
-          <div class="col-sm">
-            <span class="skeleton-loader"></span>
-          </div>
-        </div>
-      </div>
-
-    </ng-template>
-
-    <ng-template [ngIf]="retryLoadMore">
-      <br>
-      <button type="button" class="btn btn-outline-info btn-sm" (click)="loadMore()"><fa-icon [icon]="['fas', 'redo-alt']" [fixedWidth]="true"></fa-icon></button>
-    </ng-template>
-  </div>
-
-
   <ng-template #loadingTemplate>
 
     <div class="box" *ngIf="!error; else errorTemplate">

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

@@ -9,8 +9,6 @@ import { of, Observable, Subscription } from 'rxjs';
 import { SeoService } from '@app/services/seo.service';
 import { seoDescriptionNetwork } from '@app/shared/common.utils';
 import { WalletAddress } from '@interfaces/node-api.interface';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
-import { AudioService } from '@app/services/audio.service';
 
 class WalletStats implements ChainStats {
   addresses: string[];
@@ -26,7 +24,6 @@ class WalletStats implements ChainStats {
         acc.funded_txo_sum += stat.funded_txo_sum;
         acc.spent_txo_count += stat.spent_txo_count;
         acc.spent_txo_sum += stat.spent_txo_sum;
-        acc.tx_count += stat.tx_count;
         return acc;
       }, {
         funded_txo_count: 0,
@@ -112,17 +109,12 @@ export class WalletComponent implements OnInit, OnDestroy {
   addressStrings: string[] = [];
   walletName: string;
   isLoadingWallet = true;
-  isLoadingTransactions = true;
-  transactions: Transaction[];
-  totalTransactionCount: number;
-  retryLoadMore = false;
   wallet$: Observable<Record<string, WalletAddress>>;
   walletAddresses$: Observable<Record<string, Address>>;
   walletSummary$: Observable<AddressTxSummary[]>;
   walletStats$: Observable<WalletStats>;
   error: any;
   walletSubscription: Subscription;
-  transactionSubscription: Subscription;
 
   collapseAddresses: boolean = true;
 
@@ -137,8 +129,6 @@ export class WalletComponent implements OnInit, OnDestroy {
     private websocketService: WebsocketService,
     private stateService: StateService,
     private apiService: ApiService,
-    private electrsApiService: ElectrsApiService,
-    private audioService: AudioService,
     private seoService: SeoService,
   ) { }
 
@@ -182,21 +172,6 @@ export class WalletComponent implements OnInit, OnDestroy {
       }),
       switchMap(initial => this.stateService.walletTransactions$.pipe(
         startWith(null),
-        tap((transactions) => {
-          if (!transactions?.length) {
-            return;
-          }
-          for (const transaction of transactions) {
-            const tx = this.transactions.find((t) => t.txid === transaction.txid);
-            if (tx) {
-              tx.status = transaction.status;
-            } else {
-              this.transactions.unshift(transaction);
-            }
-          }
-          this.transactions = this.transactions.slice();
-          this.audioService.playSound('magic');
-        }),
         scan((wallet, walletTransactions) => {
           for (const tx of (walletTransactions || [])) {
             const funded: Record<string, number> = {};
@@ -292,57 +267,8 @@ export class WalletComponent implements OnInit, OnDestroy {
             return stats;
           }, walletStats),
         );
-      })
+      }),
     );
-
-    this.transactionSubscription = this.wallet$.pipe(
-      switchMap(wallet => {
-        const addresses = Object.keys(wallet).map(addr => this.normalizeAddress(addr));
-        return this.electrsApiService.getAddressesTransactions$(addresses);
-      }),
-      map(transactions => {
-        // only confirmed transactions supported for now
-        return transactions.filter(tx => tx.status.confirmed).sort((a, b) => b.status.block_height - a.status.block_height);
-      }),
-      catchError((error) => {
-        console.log(error);
-        this.error = error;
-        this.seoService.logSoft404();
-        this.isLoadingWallet = false;
-        return of([]);
-      })
-    ).subscribe((transactions: Transaction[] | null) => {
-      if (!transactions) {
-        return;
-      }
-      this.transactions = transactions;
-      this.isLoadingTransactions = false;
-    });
-  }
-
-  loadMore(): void {
-    if (this.isLoadingTransactions || this.fullyLoaded) {
-      return;
-    }
-    this.isLoadingTransactions = true;
-    this.retryLoadMore = false;
-    this.electrsApiService.getAddressesTransactions$(this.addressStrings, this.transactions[this.transactions.length - 1].txid)
-      .subscribe((transactions: Transaction[]) => {
-        if (transactions && transactions.length) {
-          this.transactions = this.transactions.concat(transactions.sort((a, b) => b.status.block_height - a.status.block_height));
-        } else {
-          this.fullyLoaded = true;
-        }
-        this.isLoadingTransactions = false;
-      },
-      (error) => {
-        this.isLoadingTransactions = false;
-        this.retryLoadMore = true;
-        // In the unlikely event of the txid wasn't found in the mempool anymore and we must reload the page.
-        if (error.status === 422) {
-          window.location.reload();
-        }
-      });
   }
 
   deduplicateWalletTransactions(walletTransactions: AddressTxSummary[]): AddressTxSummary[] {
@@ -373,6 +299,5 @@ export class WalletComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.websocketService.stopTrackingWallet();
     this.walletSubscription.unsubscribe();
-    this.transactionSubscription.unsubscribe();
   }
 }

frontend/src/app/docs/api-docs/api-docs-nav.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Env, StateService } from '@app/services/state.service';
-import { restApiDocsData, wsApiDocsData } from '@app/docs/api-docs/api-docs-data';
+import { restApiDocsData } from '@app/docs/api-docs/api-docs-data';
 import { faqData } from '@app/docs/api-docs/api-docs-data';
 
 @Component({
@@ -28,8 +28,6 @@ export class ApiDocsNavComponent implements OnInit {
     this.auditEnabled = this.env.AUDIT;
     if (this.whichTab === 'rest') {
       this.tabData = restApiDocsData;
-    } else if (this.whichTab === 'websocket') {
-      this.tabData = wsApiDocsData;
     } else if (this.whichTab === 'faq') {
       this.tabData = faqData;
     }

frontend/src/app/docs/api-docs/api-docs.component.html

@@ -108,43 +108,18 @@
       </div>
     </div>
 
-    <div id="websocketAPI" *ngIf="whichTab === 'websocket'">
-
-      <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
-        <app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }" [whichTab]="whichTab"></app-api-docs-nav>
-      </div>
-
-      <div class="doc-content">
-
-        <div id="enterprise-cta-mobile" *ngIf="officialMempoolInstance && showMobileEnterpriseUpsell">
-          <p>Get higher API limits with <span class="no-line-break">Mempool Enterprise®</span></p>
-          <div class="button-group">
-            <a class="btn btn-small btn-secondary" (click)="showMobileEnterpriseUpsell = false">No Thanks</a>
-            <a class="btn btn-small btn-purple" href="https://mempool.space/enterprise">More Info <fa-icon [icon]="['fas', 'angle-right']" [styles]="{'font-size': '12px'}"></fa-icon></a>
+    <div id="websocketAPI" *ngIf="( whichTab === 'websocket' )">
+      <div class="api-category">
+        <div class="websocket">
+          <div class="endpoint">
+            <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+            {{ wrapUrl(network.val, wsDocs, true) }}
           </div>
-        </div>
-
-        <p class="doc-welcome-note">Below is a reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title-websocket">Websocket service</ng-container> running at {{ websocketUrl(network.val) }}.</p>
-        <p class="doc-welcome-note api-note" *ngIf="officialMempoolInstance">Note that usage limits apply to our WebSocket API. Consider an <a href="https://mempool.space/enterprise">enterprise sponsorship</a> if you need higher API limits, such as higher tracking limits.</p>
-
-        <div class="doc-item-container" *ngFor="let item of wsDocs">
-          <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: $event, fragment: item.fragment})">{{ item.title }} <span>{{ item.category }}</span></a>
-              <div class="endpoint-content">
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div [innerHTML]="item.description.default" i18n></div>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Payload</div>
-                  <pre><code [innerText]="item.payload"></code></pre>
-                </div>
-                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.default" [network]="network.val" [showCodeExample]="item.showJsExamples"></app-code-template>
-              </div>
-            </div>
+          <div class="description">
+            <div class="subtitle" i18n>Description</div>
+            <div i18n="api-docs.websocket.websocket">Default push: <code>{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</code> to express what you want pushed. Available: <code>blocks</code>, <code>mempool-blocks</code>, <code>live-2h-chart</code>, and <code>stats</code>.<br><br>Push transactions related to address: <code>{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</code> to receive all new transactions containing that address as input or output. Returns an array of transactions. <code>address-transactions</code> for new mempool transactions, and <code>block-transactions</code> for new block confirmed transactions.</div>
           </div>
+          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="wsDocs" [network]="network.val" [showCodeExample]="wsDocs.showJsExamples"></app-code-template>
         </div>
       </div>
     </div>

frontend/src/app/docs/api-docs/api-docs.component.scss

@@ -470,21 +470,3 @@ dd {
     margin-left: 1em;
   }
 }
-
-code {
-  background-color: var(--bg);
-  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
-}
-
-pre {
-  display: block;
-  font-size: 87.5%;
-  color: #f18920;
-  background-color: var(--bg);
-  padding: 30px;
-  code{
-    background-color: transparent;
-    white-space: break-spaces;
-    word-break: break-all;
-  }
-}

frontend/src/app/docs/api-docs/api-docs.component.ts

@@ -145,7 +145,7 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
     if (document.getElementById( targetId + "-tab-header" )) {
       tabHeaderHeight = document.getElementById( targetId + "-tab-header" ).scrollHeight;
     }
-    if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) || ( this.whichTab === 'websocket' ) ) && targetId ) {
+    if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) ) && targetId ) {
       const endpointContainerEl = document.querySelector<HTMLElement>( "#" + targetId );
       const endpointContentEl = document.querySelector<HTMLElement>( "#" + targetId + " .endpoint-content" );
       const endPointContentElHeight = endpointContentEl.clientHeight;
@@ -207,29 +207,13 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
       text = text.replace('%{' + indexNumber + '}', curlText);
     }
 
+    if (websocket) {
+      const wsHostname = this.hostname.replace('https://', 'wss://');
+      wsHostname.replace('http://', 'ws://');
+      return `${wsHostname}${curlNetwork}${text}`;
+    }
     return `${this.hostname}${curlNetwork}${text}`;
   }
 
-  websocketUrl(network: string) {
-    let curlNetwork = '';
-    if (this.env.BASE_MODULE === 'mempool') {
-      if (!['', 'mainnet'].includes(network)) {
-        curlNetwork = `/${network}`;
-      }
-    } else if (this.env.BASE_MODULE === 'liquid') {
-      if (!['', 'liquid'].includes(network)) {
-        curlNetwork = `/${network}`;
-      }
-    }
-
-    if (network === this.env.ROOT_NETWORK) {
-      curlNetwork = '';
-    }
-
-    let wsHostname = this.hostname.replace('https://', 'wss://');
-    wsHostname = wsHostname.replace('http://', 'ws://');
-    return `${wsHostname}${curlNetwork}/api/v1/ws`;
-  }
-
 }
 

frontend/src/app/interfaces/node-api.interface.ts

@@ -1,4 +1,4 @@
-import { AddressTxSummary, Block, ChainStats } from "./electrs.interface";
+import { AddressTxSummary, Block, ChainStats, Transaction } from "./electrs.interface";
 
 export interface OptimizedMempoolStats {
   added: number;
@@ -412,13 +412,13 @@ export interface Acceleration {
   feeDelta: number;
   blockHash: string;
   blockHeight: number;
+
   acceleratedFeeRate?: number;
   boost?: number;
   bidBoost?: number;
   boostCost?: number;
   boostRate?: number;
   minedByPoolUniqueId?: number;
-  canceled?: number;
 }
 
 export interface AccelerationHistoryParams {

frontend/src/app/interfaces/websocket.interface.ts

@@ -21,8 +21,6 @@ export interface WebsocketResponse {
   rbfInfo?: RbfTree;
   rbfLatest?: RbfTree[];
   rbfLatestSummary?: ReplacementInfo[];
-  stratumJob?: StratumJob;
-  stratumJobs?: Record<number, StratumJob>;
   utxoSpent?: object;
   transactions?: TransactionStripped[];
   loadingIndicators?: ILoadingIndicators;
@@ -39,7 +37,6 @@ export interface WebsocketResponse {
   'track-rbf-summary'?: boolean;
   'track-accelerations'?: boolean;
   'track-wallet'?: string;
-  'track-stratum'?: string | number;
   'watch-mempool'?: boolean;
   'refresh-blocks'?: boolean;
 }
@@ -153,24 +150,3 @@ export interface HealthCheckHost {
     electrs?: string;
   }
 }
-
-export interface StratumJob {
-  pool: number;
-  height: number;
-  coinbase: string;
-  scriptsig: string;
-  reward: number;
-  jobId: string;
-  extraNonce: string;
-  extraNonce2Size: number;
-  prevHash: string;
-  coinbase1: string;
-  coinbase2: string;
-  merkleBranches: string[];
-  version: string;
-  bits: string;
-  time: string;
-  timestamp: number;
-  cleanJobs: boolean;
-  received: number;
-}

frontend/src/app/master-page.module.ts

@@ -10,10 +10,9 @@ import { TestTransactionsComponent } from '@components/test-transactions/test-tr
 import { CalculatorComponent } from '@components/calculator/calculator.component';
 import { BlocksList } from '@components/blocks-list/blocks-list.component';
 import { RbfList } from '@components/rbf-list/rbf-list.component';
-import { StratumList } from '@components/stratum/stratum-list/stratum-list.component';
 import { ServerHealthComponent } from '@components/server-health/server-health.component';
 import { ServerStatusComponent } from '@components/server-health/server-status.component';
-import { FaucetComponent } from '@components/faucet/faucet.component';
+import { FaucetComponent } from '@components/faucet/faucet.component'
 
 const browserWindow = window || {};
 // @ts-ignore
@@ -57,16 +56,6 @@ const routes: Routes = [
         path: 'rbf',
         component: RbfList,
       },
-      ...(browserWindowEnv.STRATUM_ENABLED ? [{
-        path: 'stratum',
-        component: StartComponent,
-        children: [
-          {
-            path: '',
-            component: StratumList,
-          }
-        ]
-      }] : []),
       {
         path: 'terms-of-service',
         loadChildren: () => import('@components/terms-of-service/terms-of-service.module').then(m => m.TermsOfServiceModule),

frontend/src/app/route-guards.ts

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

frontend/src/app/services/api.service.ts

@@ -565,6 +565,14 @@ export class ApiService {
     return this.httpClient.post(this.apiBaseUrl + this.apiBasePath + '/api/v1/acceleration/request/' + txid, '');
   }
 
+  getPrevouts$(outpoints: {txid: string; vout: number}[]): Observable<any> {
+    return this.httpClient.post(this.apiBaseUrl + this.apiBasePath + '/api/v1/prevouts', outpoints);
+  }
+
+  getCpfpLocalTx$(tx: any[]): Observable<CpfpInfo[]> {
+    return this.httpClient.post<CpfpInfo[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/cpfp', tx);
+  }
+
   // Cache methods
   async setBlockAuditLoaded(hash: string) {
     this.blockAuditLoaded[hash] = true;

frontend/src/app/services/auth.service.ts

@@ -58,7 +58,6 @@ export class AuthServiceMempool {
   setAuth(auth: any) {
     if (!auth) {
       localStorage.removeItem('auth');
-      localStorage.removeItem('authenticatorStatus');
     } else {
       localStorage.setItem('auth', JSON.stringify(auth));
     }

frontend/src/app/services/electrs-api.service.ts

@@ -142,16 +142,12 @@ export class ElectrsApiService {
     return this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + '/api/address/' + address + '/txs', { params });
   }
 
-  getAddressesTransactions$(addresses: string[], txid?: string): Observable<Transaction[]> {
+  getAddressesTransactions$(addresses: string[],  txid?: string): Observable<Transaction[]> {
     let params = new HttpParams();
     if (txid) {
       params = params.append('after_txid', txid);
     }
-    return this.httpClient.post<Transaction[]>(
-      this.apiBaseUrl + this.apiBasePath + '/api/addresses/txs',
-      addresses,
-      { params }
-    );
+    return this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + `/api/addresses/txs?addresses=${addresses.join(',')}`, { params });
   }
 
   getAddressSummary$(address: string,  txid?: string): Observable<AddressTxSummary[]> {
@@ -167,7 +163,7 @@ export class ElectrsApiService {
     if (txid) {
       params = params.append('after_txid', txid);
     }
-    return this.httpClient.post<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + '/api/addresses/txs/summary', addresses, { params });
+    return this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + `/api/addresses/txs/summary?addresses=${addresses.join(',')}`, { params });
   }
 
   getScriptHashTransactions$(script: string,  txid?: string): Observable<Transaction[]> {
@@ -186,7 +182,7 @@ export class ElectrsApiService {
       params = params.append('after_txid', txid);
     }
     return from(Promise.all(scripts.map(script => calcScriptHash$(script)))).pipe(
-      switchMap(scriptHashes => this.httpClient.post<Transaction[]>(this.apiBaseUrl + this.apiBasePath + '/api/scripthashes/txs', scriptHashes, { params })),
+      switchMap(scriptHashes => this.httpClient.get<Transaction[]>(this.apiBaseUrl + this.apiBasePath + `/api/scripthashes/txs?scripthashes=${scriptHashes.join(',')}`, { params })),
     );
   }
 
@@ -216,7 +212,7 @@ export class ElectrsApiService {
       params = params.append('after_txid', txid);
     }
     return from(Promise.all(scripts.map(script => calcScriptHash$(script)))).pipe(
-      switchMap(scriptHashes => this.httpClient.post<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + '/api/scripthashes/txs/summary', scriptHashes, { params })),
+      switchMap(scriptHashes => this.httpClient.get<AddressTxSummary[]>(this.apiBaseUrl + this.apiBasePath + `/api/scripthashes/txs/summary?scripthashes=${scriptHashes.join(',')}`, { params })),
     );
   }
 

frontend/src/app/services/mining.service.ts

@@ -64,8 +64,8 @@ export class MiningService {
       );
     }
   }
-
-  /**
+  
+  /** 
    * Get names and slugs of all pools
    */
   public getPools(): Observable<any[]> {
@@ -75,6 +75,7 @@ export class MiningService {
         return this.poolsData;
       })
     );
+    
   }
   /**
    * Set the hashrate power of ten we want to display

frontend/src/app/services/services-api.service.ts

@@ -18,6 +18,7 @@ export interface IUser {
   subscription_tag: string;
   status: 'pending' | 'verified' | 'disabled';
   features: string | null;
+  fullName: string | null;
   countryCode: string | null;
   imageMd5: string;
   ogRank: number | null;
@@ -142,12 +143,8 @@ export class ServicesApiServices {
     return this.httpClient.post<any>(`${this.stateService.env.SERVICES_API}/accelerator/accelerate/applePay`, { txInput: txInput, cardTag: cardTag, token: token, referenceId: referenceId, userApprovedUSD: userApprovedUSD });
   }
 
-  accelerateWithGooglePay$(txInput: string, token: string, verificationToken: string, cardTag: string, referenceId: string, userApprovedUSD: number, userChallenged: boolean) {
-    return this.httpClient.post<any>(`${this.stateService.env.SERVICES_API}/accelerator/accelerate/googlePay`, { txInput: txInput, cardTag: cardTag, token: token, verificationToken: verificationToken, referenceId: referenceId, userApprovedUSD: userApprovedUSD, userChallenged: userChallenged });
-  }
-
-  accelerateWithCardOnFile$(txInput: string, token: string, verificationToken: string, referenceId: string, userApprovedUSD: number, userChallenged: boolean) {
-    return this.httpClient.post<any>(`${this.stateService.env.SERVICES_API}/accelerator/accelerate/cardOnFile`, { txInput: txInput, token: token, verificationToken: verificationToken, referenceId: referenceId, userApprovedUSD: userApprovedUSD, userChallenged: userChallenged });
+  accelerateWithGooglePay$(txInput: string, token: string, verificationToken: string, cardTag: string, referenceId: string, userApprovedUSD: number) {
+    return this.httpClient.post<any>(`${this.stateService.env.SERVICES_API}/accelerator/accelerate/googlePay`, { txInput: txInput, cardTag: cardTag, token: token, verificationToken: verificationToken, referenceId: referenceId, userApprovedUSD: userApprovedUSD });
   }
 
   getAccelerations$(): Observable<Acceleration[]> {

frontend/src/app/services/state.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable, PLATFORM_ID, LOCALE_ID } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable } from 'rxjs';
-import { Transaction } from '@interfaces/electrs.interface';
-import { AccelerationDelta, HealthCheckHost, IBackendInfo, MempoolBlock, MempoolBlockUpdate, MempoolInfo, Recommendedfees, ReplacedTransaction, ReplacementInfo, StratumJob, isMempoolState } from '@interfaces/websocket.interface';
+import { AddressTxSummary, Transaction } from '@interfaces/electrs.interface';
+import { AccelerationDelta, HealthCheckHost, IBackendInfo, MempoolBlock, MempoolBlockUpdate, MempoolInfo, Recommendedfees, ReplacedTransaction, ReplacementInfo, isMempoolState } from '@interfaces/websocket.interface';
 import { Acceleration, AccelerationPosition, BlockExtended, CpfpInfo, DifficultyAdjustment, MempoolPosition, OptimizedMempoolStats, RbfTree, TransactionStripped } from '@interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
 import { isPlatformBrowser } from '@angular/common';
@@ -81,7 +81,6 @@ export interface Env {
   ADDITIONAL_CURRENCIES: boolean;
   GIT_COMMIT_HASH_MEMPOOL_SPACE?: string;
   PACKAGE_JSON_VERSION_MEMPOOL_SPACE?: string;
-  STRATUM_ENABLED: boolean;
   SERVICES_API?: string;
   customize?: Customization;
   PROD_DOMAINS: string[];
@@ -124,7 +123,6 @@ const defaultEnv: Env = {
   'ACCELERATOR_BUTTON': true,
   'PUBLIC_ACCELERATIONS': false,
   'ADDITIONAL_CURRENCIES': false,
-  'STRATUM_ENABLED': false,
   'SERVICES_API': 'https://mempool.space/api/v1/services',
   'PROD_DOMAINS': [],
 };
@@ -161,8 +159,6 @@ export class StateService {
   liveMempoolBlockTransactions$: Observable<{ block: number, transactions: { [txid: string]: TransactionStripped} }>;
   accelerations$ = new Subject<AccelerationDelta>();
   liveAccelerations$: Observable<Acceleration[]>;
-  stratumJobUpdate$ = new Subject<{ state: Record<string, StratumJob> } | { job: StratumJob }>();
-  stratumJobs$ = new BehaviorSubject<Record<string, StratumJob>>({});
   txConfirmed$ = new Subject<[string, BlockExtended]>();
   txReplaced$ = new Subject<ReplacedTransaction>();
   txRbfInfo$ = new Subject<RbfTree>();
@@ -307,24 +303,6 @@ export class StateService {
       map((accMap) => Object.values(accMap).sort((a,b) => b.added - a.added))
     );
 
-    this.stratumJobUpdate$.pipe(
-      scan((acc: Record<string, StratumJob>, update: { state: Record<string, StratumJob> } | { job: StratumJob }) => {
-        if ('state' in update) {
-          // Replace the entire state
-          return update.state;
-        } else {
-          // Update or create a single job entry
-          return {
-            ...acc,
-            [update.job.pool]: update.job
-          };
-        }
-      }, {}),
-      shareReplay(1)
-    ).subscribe(val => {
-      this.stratumJobs$.next(val);
-    });
-
     this.networkChanged$.subscribe((network) => {
       this.transactions$ = new BehaviorSubject<TransactionStripped[]>(null);
       this.blocksSubject$.next([]);

frontend/src/app/services/websocket.service.ts

@@ -36,7 +36,6 @@ export class WebsocketService {
   private isTrackingAccelerations: boolean = false;
   private isTrackingWallet: boolean = false;
   private trackingWalletName: string;
-  private isTrackingStratum: string | number | false = false;
   private trackingMempoolBlock: number;
   private trackingMempoolBlockNetwork: string;
   private stoppingTrackMempoolBlock: any | null = null;
@@ -144,9 +143,6 @@ export class WebsocketService {
           if (this.isTrackingWallet) {
             this.startTrackingWallet(this.trackingWalletName);
           }
-          if (this.isTrackingStratum !== false) {
-            this.startTrackStratum(this.isTrackingStratum);
-          }
           this.stateService.connectionState$.next(2);
         }
 
@@ -293,18 +289,6 @@ export class WebsocketService {
     }
   }
 
-  startTrackStratum(pool: number | string) {
-    this.websocketSubject.next({ 'track-stratum': pool });
-    this.isTrackingStratum = pool;
-  }
-
-  stopTrackStratum() {
-    if (this.isTrackingStratum) {
-      this.websocketSubject.next({ 'track-stratum': null });
-      this.isTrackingStratum = false;
-    }
-  }
-
   fetchStatistics(historicalDate: string) {
     this.websocketSubject.next({ historicalDate });
   }
@@ -528,14 +512,6 @@ export class WebsocketService {
       this.stateService.previousRetarget$.next(response.previousRetarget);
     }
 
-    if (response.stratumJobs) {
-      this.stateService.stratumJobUpdate$.next({ state: response.stratumJobs });
-    }
-
-    if (response.stratumJob) {
-      this.stateService.stratumJobUpdate$.next({ job: response.stratumJob });
-    }
-
     if (response['tomahawk']) {
       this.stateService.serverHealth$.next(response['tomahawk']);
     }

frontend/src/app/shared/components/confirmations/confirmations.component.html

@@ -11,9 +11,9 @@
 <ng-template [ngIf]="!hideUnconfirmed && !confirmations && replaced">
   <button type="button" class="btn btn-sm btn-warning no-cursor {{buttonClass}}" i18n="transaction.replaced|Transaction replaced state">Replaced</button>
 </ng-template>
-<ng-template [ngIf]="!hideUnconfirmed && !confirmations && !replaced && (removed || cached)">
+<ng-template [ngIf]="!hideUnconfirmed && !confirmations && !replaced && removed">
   <button type="button" class="btn btn-sm btn-warning no-cursor {{buttonClass}}" i18n="transaction.audit.removed|Transaction removed state">Removed</button>
 </ng-template>
-<ng-template [ngIf]="!hideUnconfirmed && chainTip != null && !confirmations && !replaced && !(removed || cached)">
+<ng-template [ngIf]="!hideUnconfirmed && chainTip != null && !confirmations && !replaced && !removed">
   <button type="button" class="btn btn-sm btn-danger no-cursor {{buttonClass}}" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
 </ng-template>

frontend/src/app/shared/components/confirmations/confirmations.component.ts

@@ -12,7 +12,6 @@ export class ConfirmationsComponent implements OnChanges {
   @Input() height: number;
   @Input() replaced: boolean = false;
   @Input() removed: boolean = false;
-  @Input() cached: boolean = false;
   @Input() hideUnconfirmed: boolean = false;
   @Input() buttonClass: string = '';
 

frontend/src/app/shared/components/global-footer/global-footer.component.html

@@ -76,6 +76,7 @@
           <p><a [routerLink]="['/blocks' | relativeUrl]" i18n="dashboard.recent-blocks">Recent Blocks</a></p>
           <p><a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a></p>
           <p><a [routerLink]="['/tx/test' | relativeUrl]" i18n="shared.test-transaction|Test Transaction">Test Transaction</a></p>
+          <p><a [routerLink]="['/tx/preview' | relativeUrl]" i18n="shared.preview-transaction|Preview Transaction">Preview Transaction</a></p>
           <p *ngIf="officialMempoolSpace"><a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]" i18n="footer.connect-to-our-nodes">Connect to our Nodes</a></p>
           <p><a [routerLink]="['/docs/api' | relativeUrl]" i18n="footer.api-documentation">API Documentation</a></p>
         </div>

frontend/src/app/shared/components/mempool-error/mempool-error.component.ts

@@ -26,7 +26,6 @@ export const MempoolErrors = {
   'unauthorized': `You are not authorized to do this`,
   'faucet_too_soon': `You cannot request any more coins right now. Try again later.`,
   'faucet_not_available': `The faucet is not available right now. Try again later.`,
-  'faucet_not_available_no_utxo': `The faucet is not available right now. Please try again once a new block has been mined.`,
   'faucet_maximum_reached': `You are not allowed to request more coins`,
   'faucet_address_not_allowed': `You cannot use this address`,
   'faucet_below_minimum': `Requested amount is too small`,

frontend/src/app/shared/components/truncate/truncate.component.html

@@ -1,6 +1,6 @@
 <span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
     <ng-container *ngIf="link">
-      <a [routerLink]="link" [queryParams]="queryParams" class="truncate-link" [target]="external ? '_blank' : '_self'">
+      <a [routerLink]="link" [queryParams]="queryParams" class="truncate-link" [target]="external ? '_blank' : '_self'" [class.disabled]="disabled">
         <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
       </a>
     </ng-container>