Use minfee second node to supply alt rbf policy mempool txs

Support inner links in truncated string component

.github/dependabot.yml

@@ -6,23 +6,42 @@ updates:
       interval: daily
     open-pull-requests-limit: 10
     ignore:
-      - update-types: ["version-update:semver-major"]
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+    allow:
+      - dependency-type: "production"
+
   - package-ecosystem: npm
     directory: "/frontend"
     schedule:
       interval: daily
     open-pull-requests-limit: 10
     ignore:
-      - update-types: ["version-update:semver-major"]
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+    allow:
+      - dependency-type: "production"
+
   - package-ecosystem: docker
     directory: "/docker/backend"
     schedule:
-      interval: daily
+      interval: weekly
     ignore:
-      - update-types: ["version-update:semver-major"]
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+
+  - package-ecosystem: docker
+    directory: "/docker/frontend"
+    schedule:
+      interval: weekly
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
+
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
-      interval: daily
+      interval: weekly
     ignore:
-      - update-types: ["version-update:semver-major"]
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]

.github/workflows/cypress.yml

@@ -2,7 +2,7 @@ name: Cypress Tests
 
 on:
   pull_request:
-    types: [ opened, review_requested, synchronize ]
+    types: [opened, review_requested, synchronize]
 jobs:
   cypress:
     if: "!contains(github.event.pull_request.labels.*.name, 'ops') && !contains(github.head_ref, 'ops/')"
@@ -24,36 +24,36 @@ jobs:
           - module: "bisq"
             spec: |
               cypress/e2e/bisq/bisq.spec.ts
-          
+
     name: E2E tests for ${{ matrix.module }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           path: ${{ matrix.module }}
-          
+
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.15.0
-          cache: 'npm'
+          cache: "npm"
           cache-dependency-path: ${{ matrix.module }}/frontend/package-lock.json
 
       - name: Chrome browser tests (${{ matrix.module }})
-        uses: cypress-io/github-action@v4
+        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: "http://localhost:4200"
           wait-on-timeout: 120
           record: true
           parallel: true
           spec: ${{ matrix.spec }}
           group: Tests on Chrome (${{ matrix.module }})
           browser: "chrome"
-          ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
+          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/workflows/on-tag.yml

@@ -31,7 +31,7 @@ jobs:
         run: |
           sudo swapoff /mnt/swapfile
           sudo rm -v /mnt/swapfile
-          sudo fallocate -l 10G /mnt/swapfile
+          sudo fallocate -l 13G /mnt/swapfile
           sudo chmod 600 /mnt/swapfile
           sudo mkswap /mnt/swapfile
           sudo swapon /mnt/swapfile
@@ -68,24 +68,24 @@ jobs:
         run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
 
       - name: Checkout project
-        uses: actions/checkout@e2f20e631ae6d7dd3b768f56a5d2af784dd54791 # v2.5.0
+        uses: actions/checkout@v3
 
       - name: Init repo for Dockerization
         run: docker/init.sh "$TAG"
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@e81a89b1732b9c48d79cd809d8d81d79c4647a18 # v2.1.0
+        uses: docker/setup-qemu-action@v2
         id: qemu
 
       - name: Setup Docker buildx action
-        uses: docker/setup-buildx-action@8c0edbc76e98fa90f69d9a2c020dcb50019dc325 # v2.2.1
+        uses: docker/setup-buildx-action@v2
         id: buildx
 
       - name: Available platforms
         run: echo ${{ steps.buildx.outputs.platforms }}
 
       - name: Cache Docker layers
-        uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
+        uses: actions/cache@v3
         id: cache
         with:
           path: /tmp/.buildx-cache

backend/mempool-config.sample.json

@@ -27,7 +27,8 @@
     "POOLS_JSON_TREE_URL": "https://api.github.com/repos/mempool/mining-pools/git/trees/master",
     "ADVANCED_GBT_AUDIT": false,
     "ADVANCED_GBT_MEMPOOL": false,
-    "TRANSACTION_INDEXING": false
+    "CPFP_INDEXING": false,
+    "RBF_DUAL_NODE": false
   },
   "CORE_RPC": {
     "HOST": "127.0.0.1",

backend/package.json

@@ -34,11 +34,11 @@
     "prettier": "./node_modules/.bin/prettier --write \"src/**/*.{js,ts}\""
   },
   "dependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.12",
     "@mempool/electrum-client": "^1.1.7",
-    "@types/node": "^16.11.41",
+    "@types/node": "^16.18.11",
     "axios": "~0.27.2",
-    "bitcoinjs-lib": "~6.0.2",
+    "bitcoinjs-lib": "~6.1.0",
     "crypto-js": "~4.1.1",
     "express": "~4.18.2",
     "maxmind": "~4.3.8",
@@ -49,19 +49,19 @@
     "ws": "~8.11.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.7",
     "@babel/code-frame": "^7.18.6",
     "@types/compression": "^1.7.2",
     "@types/crypto-js": "^4.1.1",
-    "@types/express": "^4.17.14",
-    "@types/jest": "^29.2.3",
-    "@types/ws": "~8.5.3",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
+    "@types/express": "^4.17.15",
+    "@types/jest": "^29.2.5",
+    "@types/ws": "~8.5.4",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.5.0",
     "jest": "^29.3.1",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.2",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1"
   }

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

@@ -28,7 +28,8 @@
     "POOLS_JSON_URL": "__POOLS_JSON_URL__",
     "ADVANCED_GBT_AUDIT": "__ADVANCED_GBT_AUDIT__",
     "ADVANCED_GBT_MEMPOOL": "__ADVANCED_GBT_MEMPOOL__",
-    "TRANSACTION_INDEXING": "__TRANSACTION_INDEXING__"
+    "CPFP_INDEXING": "__CPFP_INDEXING__",
+    "RBF_DUAL_NODE": "__RBF_DUAL_NODE__"
   },
   "CORE_RPC": {
     "HOST": "__CORE_RPC_HOST__",

backend/src/__tests__/config.test.ts

@@ -40,7 +40,8 @@ describe('Mempool Backend Config', () => {
         POOLS_JSON_URL: 'https://raw.githubusercontent.com/mempool/mining-pools/master/pools.json',
         ADVANCED_GBT_AUDIT: false,
         ADVANCED_GBT_MEMPOOL: false,
-        TRANSACTION_INDEXING: false,
+        CPFP_INDEXING: false,
+        RBF_DUAL_NODE: false,
       });
 
       expect(config.ELECTRUM).toStrictEqual({ HOST: '127.0.0.1', PORT: 3306, TLS_ENABLED: true });

backend/src/api/alt-mempool.ts

@@ -0,0 +1,175 @@
+import config from '../config';
+import { TransactionExtended } from '../mempool.interfaces';
+import logger from '../logger';
+import { Common } from './common';
+import { IBitcoinApi } from './bitcoin/bitcoin-api.interface';
+import BitcoinApi from './bitcoin/bitcoin-api';
+import bitcoinApi from './bitcoin/bitcoin-api-factory';
+import bitcoinSecondClient from './bitcoin/bitcoin-second-client';
+import { IEsploraApi } from './bitcoin/esplora-api.interface';
+import { Mempool } from './mempool';
+
+class AltMempool extends Mempool {
+  private bitcoinSecondApi: BitcoinApi;
+
+  constructor() {
+    super();
+    this.bitcoinSecondApi = new BitcoinApi(bitcoinSecondClient, this, bitcoinApi);
+  }
+
+  protected init(): void {
+    // override
+  }
+
+  public setOutOfSync(): void {
+    this.inSync = false;
+  }
+
+  public setMempool(mempoolData: { [txId: string]: TransactionExtended }): void {
+    this.mempoolCache = mempoolData;
+  }
+
+  public getFirstSeenForTransactions(txIds: string[]): number[] {
+    const txTimes: number[] = [];
+    txIds.forEach((txId: string) => {
+      const tx = this.mempoolCache[txId];
+      if (tx && tx.firstSeen) {
+        txTimes.push(tx.firstSeen);
+      } else {
+        txTimes.push(0);
+      }
+    });
+    return txTimes;
+  }
+
+  public async $updateMempool(): Promise<void> {
+    logger.debug(`Updating alternative mempool...`);
+    const start = new Date().getTime();
+    const currentMempoolSize = Object.keys(this.mempoolCache).length;
+    const transactions = await this.bitcoinSecondApi.$getRawMempool();
+    const diff = transactions.length - currentMempoolSize;
+
+    this.mempoolCacheDelta = Math.abs(diff);
+    const loadingMempool = this.mempoolCacheDelta > 100;
+
+    for (const txid of transactions) {
+      if (!this.mempoolCache[txid]) {
+        try {
+          const transaction = await this.$fetchTransaction(txid);
+          this.mempoolCache[txid] = transaction;
+          if (loadingMempool && Object.keys(this.mempoolCache).length % 50 === 0) {
+            logger.info(`loaded ${Object.keys(this.mempoolCache).length}/${transactions.length} alternative mempool transactions`);
+          }
+        } catch (e) {
+          logger.debug(`Error finding transaction '${txid}' in the alternative mempool: ` + (e instanceof Error ? e.message : e));
+        }
+      }
+
+      if ((new Date().getTime()) - start > Mempool.WEBSOCKET_REFRESH_RATE_MS) {
+        break;
+      }
+    }
+    if (loadingMempool) {
+      logger.info(`loaded ${Object.keys(this.mempoolCache).length}/${transactions.length} alternative mempool transactions`);
+    }
+
+    // Prevent mempool from clear on bitcoind restart by delaying the deletion
+    if (this.mempoolProtection === 0
+      && currentMempoolSize > 20000
+      && transactions.length / currentMempoolSize <= 0.80
+    ) {
+      this.mempoolProtection = 1;
+      setTimeout(() => {
+        this.mempoolProtection = 2;
+      }, 1000 * 60 * config.MEMPOOL.CLEAR_PROTECTION_MINUTES);
+    }
+
+    const deletedTransactions: string[] = [];
+
+    if (this.mempoolProtection !== 1) {
+      this.mempoolProtection = 0;
+      // Index object for faster search
+      const transactionsObject = {};
+      transactions.forEach((txId) => transactionsObject[txId] = true);
+
+      // Flag transactions for lazy deletion
+      for (const tx in this.mempoolCache) {
+        if (!transactionsObject[tx] && !this.mempoolCache[tx].deleteAfter) {
+          deletedTransactions.push(this.mempoolCache[tx].txid);
+        }
+      }
+      for (const txid of deletedTransactions) {
+        delete this.mempoolCache[txid];
+      }
+    }
+
+    this.mempoolCacheDelta = Math.abs(transactions.length - Object.keys(this.mempoolCache).length);
+
+    const end = new Date().getTime();
+    const time = end - start;
+    logger.debug(`Alt mempool updated in ${time / 1000} seconds. New size: ${Object.keys(this.mempoolCache).length} (${diff > 0 ? '+' + diff : diff})`);
+  }
+
+  public getTransaction(txid: string): TransactionExtended {
+    return this.mempoolCache[txid] || null;
+  }
+
+  protected async $fetchTransaction(txid: string): Promise<TransactionExtended> {
+    const rawTx = await this.bitcoinSecondApi.$getRawTransaction(txid, false, true, false);
+    return this.extendTransaction(rawTx);
+  }
+
+  protected extendTransaction(transaction: IEsploraApi.Transaction): TransactionExtended {
+    // @ts-ignore
+    if (transaction.vsize) {
+      // @ts-ignore
+      return transaction;
+    }
+    const feePerVbytes = Math.max(Common.isLiquid() ? 0.1 : 1,
+      (transaction.fee || 0) / (transaction.weight / 4));
+    const transactionExtended: TransactionExtended = Object.assign({
+      vsize: Math.round(transaction.weight / 4),
+      feePerVsize: feePerVbytes,
+      effectiveFeePerVsize: feePerVbytes,
+    }, transaction);
+    if (!transaction.status.confirmed) {
+      transactionExtended.firstSeen = Math.round((new Date().getTime() / 1000));
+    }
+    return transactionExtended;
+  }
+
+  public async $updateMemPoolInfo(): Promise<void> {
+    this.mempoolInfo = await this.$getMempoolInfo();
+  }
+
+  public getMempoolInfo(): IBitcoinApi.MempoolInfo {
+    return this.mempoolInfo;
+  }
+
+  public getTxPerSecond(): number {
+    return this.txPerSecond;
+  }
+
+  public getVBytesPerSecond(): number {
+    return this.vBytesPerSecond;
+  }
+
+  public handleRbfTransactions(rbfTransactions: { [txid: string]: TransactionExtended; }): void {
+    for (const rbfTransaction in rbfTransactions) {
+      if (this.mempoolCache[rbfTransaction]) {
+        // Erase the replaced transactions from the local mempool
+        delete this.mempoolCache[rbfTransaction];
+      }
+    }
+  }
+
+  protected updateTxPerSecond(): void {}
+
+  protected deleteExpiredTransactions(): void {}
+
+  protected $getMempoolInfo(): any {
+    return bitcoinSecondClient.getMempoolInfo();
+  }
+}
+
+export default new AltMempool();

backend/src/api/audit.ts

@@ -1,10 +1,5 @@
 import config from '../config';
-import bitcoinApi from './bitcoin/bitcoin-api-factory';
-import { Common } from './common';
-import { TransactionExtended, MempoolBlockWithTransactions, AuditScore } from '../mempool.interfaces';
-import blocksRepository from '../repositories/BlocksRepository';
-import blocksAuditsRepository from '../repositories/BlocksAuditsRepository';
-import blocks from '../api/blocks';
+import { TransactionExtended, MempoolBlockWithTransactions } from '../mempool.interfaces';
 
 const PROPAGATION_MARGIN = 180; // in seconds, time since a transaction is first seen after which it is assumed to have propagated to all miners
 

backend/src/api/backend-info.ts

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import os from 'os';
 import { IBackendInfo } from '../mempool.interfaces';
+import config from '../config';
 
 class BackendInfo {
   private backendInfo: IBackendInfo;
@@ -22,7 +23,8 @@ class BackendInfo {
     this.backendInfo = {
       hostname: os.hostname(),
       version: versionInfo.version,
-      gitCommit: versionInfo.gitCommit
+      gitCommit: versionInfo.gitCommit,
+      lightning: config.LIGHTNING.ENABLED
     };
   }
 

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

@@ -4,17 +4,20 @@ import EsploraApi from './esplora-api';
 import BitcoinApi from './bitcoin-api';
 import ElectrumApi from './electrum-api';
 import bitcoinClient from './bitcoin-client';
+import mempool from '../mempool';
 
 function bitcoinApiFactory(): AbstractBitcoinApi {
   switch (config.MEMPOOL.BACKEND) {
     case 'esplora':
       return new EsploraApi();
     case 'electrum':
-      return new ElectrumApi(bitcoinClient);
+      return new ElectrumApi(bitcoinClient, mempool);
     case 'none':
     default:
-      return new BitcoinApi(bitcoinClient);
+      return new BitcoinApi(bitcoinClient, mempool);
   }
 }
 
+export const bitcoinCoreApi = new BitcoinApi(bitcoinClient, mempool);
+
 export default bitcoinApiFactory();

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

@@ -3,15 +3,18 @@ import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
 import { IBitcoinApi } from './bitcoin-api.interface';
 import { IEsploraApi } from './esplora-api.interface';
 import blocks from '../blocks';
-import mempool from '../mempool';
-import { TransactionExtended } from '../../mempool.interfaces';
+import { MempoolBlock, TransactionExtended } from '../../mempool.interfaces';
 
 class BitcoinApi implements AbstractBitcoinApi {
+  private mempool: any = null;
   private rawMempoolCache: IBitcoinApi.RawMempool | null = null;
   protected bitcoindClient: any;
+  protected backupBitcoinApi: BitcoinApi;
 
-  constructor(bitcoinClient: any) {
+  constructor(bitcoinClient: any, mempool: any, backupBitcoinApi: any = null) {
     this.bitcoindClient = bitcoinClient;
+    this.mempool = mempool;
+    this.backupBitcoinApi = backupBitcoinApi;
   }
 
   static convertBlock(block: IBitcoinApi.Block): IEsploraApi.Block {
@@ -34,7 +37,7 @@ class BitcoinApi implements AbstractBitcoinApi {
 
   $getRawTransaction(txId: string, skipConversion = false, addPrevout = false, lazyPrevouts = false): Promise<IEsploraApi.Transaction> {
     // If the transaction is in the mempool we already converted and fetched the fee. Only prevouts are missing
-    const txInMempool = mempool.getMempool()[txId];
+    const txInMempool = this.mempool.getMempool()[txId];
     if (txInMempool && addPrevout) {
       return this.$addPrevouts(txInMempool);
     }
@@ -118,7 +121,7 @@ class BitcoinApi implements AbstractBitcoinApi {
 
   $getAddressPrefix(prefix: string): string[] {
     const found: { [address: string]: string } = {};
-    const mp = mempool.getMempool();
+    const mp = this.mempool.getMempool();
     for (const tx in mp) {
       for (const vout of mp[tx].vout) {
         if (vout.scriptpubkey_address.indexOf(prefix) === 0) {
@@ -260,7 +263,7 @@ class BitcoinApi implements AbstractBitcoinApi {
       return transaction;
     }
     let mempoolEntry: IBitcoinApi.MempoolEntry;
-    if (!mempool.isInSync() && !this.rawMempoolCache) {
+    if (!this.mempool.isInSync() && !this.rawMempoolCache) {
       this.rawMempoolCache = await this.$getRawMempoolVerbose();
     }
     if (this.rawMempoolCache && this.rawMempoolCache[transaction.txid]) {
@@ -316,10 +319,23 @@ class BitcoinApi implements AbstractBitcoinApi {
         transaction.vin[i].lazy = true;
         continue;
       }
-      const innerTx = await this.$getRawTransaction(transaction.vin[i].txid, false, false);
-      transaction.vin[i].prevout = innerTx.vout[transaction.vin[i].vout];
-      this.addInnerScriptsToVin(transaction.vin[i]);
-      totalIn += innerTx.vout[transaction.vin[i].vout].value;
+      let innerTx;
+      try {
+        innerTx = await this.$getRawTransaction(transaction.vin[i].txid, false, false);
+      } catch (e) {
+        if (this.backupBitcoinApi) {
+          // input tx is confirmed, but the preferred client has txindex=0, so fetch from the backup client instead.
+          const backupTx = await this.backupBitcoinApi.$getRawTransaction(transaction.vin[i].txid);
+          innerTx = JSON.parse(JSON.stringify(backupTx));
+        } else {
+          throw e;
+        }
+      }
+      if (innerTx) {
+        transaction.vin[i].prevout = innerTx.vout[transaction.vin[i].vout];
+        this.addInnerScriptsToVin(transaction.vin[i]);
+        totalIn += innerTx.vout[transaction.vin[i].vout].value;
+      }
     }
     if (lazyPrevouts && transaction.vin.length > 12) {
       transaction.fee = -1;

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

@@ -18,6 +18,8 @@ import blocks from '../blocks';
 import bitcoinClient from './bitcoin-client';
 import difficultyAdjustment from '../difficulty-adjustment';
 import transactionRepository from '../../repositories/TransactionRepository';
+import rbfCache from '../rbf-cache';
+import altMempool from '../alt-mempool';
 
 class BitcoinRoutes {
   public initRoutes(app: Application) {
@@ -31,6 +33,9 @@ class BitcoinRoutes {
       .get(config.MEMPOOL.API_URL_PREFIX + 'backend-info', this.getBackendInfo)
       .get(config.MEMPOOL.API_URL_PREFIX + 'init-data', this.getInitData)
       .get(config.MEMPOOL.API_URL_PREFIX + 'validate-address/:address', this.validateAddress)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'tx/alt/:txId', this.getAltTransaction)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/replaces', this.getRbfHistory)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/cached', this.getCachedTx)
       .post(config.MEMPOOL.API_URL_PREFIX + 'tx/push', this.$postTransactionForm)
       .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
         try {
@@ -238,6 +243,23 @@ class BitcoinRoutes {
     }
   }
 
+  private async getAltTransaction(req: Request, res: Response) {
+    try {
+      const transaction = altMempool.getTransaction(req.params.txId);
+      if (transaction) {
+        res.json(transaction);
+      } else {
+        res.status(404).send('No such transaction in the alternate mempool');
+      }
+    } catch (e) {
+      let statusCode = 500;
+      if (e instanceof Error && e instanceof Error && e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
+        statusCode = 404;
+      }
+      res.status(statusCode).send(e instanceof Error ? e.message : e);
+    }
+  }
+
   private async getRawTransaction(req: Request, res: Response) {
     try {
       const transaction: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(req.params.txId, true);
@@ -402,7 +424,8 @@ class BitcoinRoutes {
   private async getLegacyBlocks(req: Request, res: Response) {
     try {
       const returnBlocks: IEsploraApi.Block[] = [];
-      const fromHeight = parseInt(req.params.height, 10) || blocks.getCurrentBlockHeight();
+      const tip = blocks.getCurrentBlockHeight();
+      const fromHeight = Math.min(parseInt(req.params.height, 10) || tip, tip);
 
       // Check if block height exist in local cache to skip the hash lookup
       const blockByHeight = blocks.getBlocks().find((b) => b.height === fromHeight);
@@ -588,6 +611,28 @@ class BitcoinRoutes {
     }
   }
 
+  private async getRbfHistory(req: Request, res: Response) {
+    try {
+      const result = rbfCache.getReplaces(req.params.txId);
+      res.json(result || []);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async getCachedTx(req: Request, res: Response) {
+    try {
+      const result = rbfCache.getTx(req.params.txId);
+      if (result) {
+        res.json(result);
+      } else {
+        res.status(404).send('not found');
+      }
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
   private async getTransactionOutspends(req: Request, res: Response) {
     try {
       const result = await bitcoinApi.$getOutspends(req.params.txId);

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

@@ -12,8 +12,8 @@ import memoryCache from '../memory-cache';
 class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
   private electrumClient: any;
 
-  constructor(bitcoinClient: any) {
-    super(bitcoinClient);
+  constructor(bitcoinClient: any, mempool: any) {
+    super(bitcoinClient, mempool);
 
     const electrumConfig = { client: 'mempool-v2', version: '1.4' };
     const electrumPersistencePolicy = { retryPeriod: 10000, maxRetry: 1000, callback: null };

backend/src/api/blocks.ts

@@ -22,12 +22,10 @@ import poolsParser from './pools-parser';
 import BlocksSummariesRepository from '../repositories/BlocksSummariesRepository';
 import BlocksAuditsRepository from '../repositories/BlocksAuditsRepository';
 import cpfpRepository from '../repositories/CpfpRepository';
-import transactionRepository from '../repositories/TransactionRepository';
 import mining from './mining/mining';
 import DifficultyAdjustmentsRepository from '../repositories/DifficultyAdjustmentsRepository';
 import PricesRepository from '../repositories/PricesRepository';
 import priceUpdater from '../tasks/price-updater';
-import { Block } from 'bitcoinjs-lib';
 
 class Blocks {
   private blocks: BlockExtended[] = [];
@@ -101,12 +99,23 @@ class Blocks {
           transactions.push(tx);
           transactionsFetched++;
         } catch (e) {
-          if (i === 0) {
-            const msg = `Cannot fetch coinbase tx ${txIds[i]}. Reason: ` + (e instanceof Error ? e.message : e); 
-            logger.err(msg);
-            throw new Error(msg);
-          } else {
-            logger.err(`Cannot fetch tx ${txIds[i]}. Reason: ` + (e instanceof Error ? e.message : e));
+          try {
+            if (config.MEMPOOL.BACKEND === 'esplora') {
+              // Try again with core
+              const tx = await transactionUtils.$getTransactionExtended(txIds[i], false, false, true);
+              transactions.push(tx);
+              transactionsFetched++;
+            } else {
+              throw e;
+            }
+          } catch (e) {
+            if (i === 0) {
+              const msg = `Cannot fetch coinbase tx ${txIds[i]}. Reason: ` + (e instanceof Error ? e.message : e); 
+              logger.err(msg);
+              throw new Error(msg);
+            } else {
+              logger.err(`Cannot fetch tx ${txIds[i]}. Reason: ` + (e instanceof Error ? e.message : e));
+            }
           }
         }
       }
@@ -296,7 +305,7 @@ class Blocks {
           const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
           const blockPerSeconds = Math.max(1, indexedThisRun / elapsedSeconds);
           const progress = Math.round(totalIndexed / indexedBlocks.length * 10000) / 100;
-          logger.debug(`Indexing block summary for #${block.height} | ~${blockPerSeconds.toFixed(2)} blocks/sec | total: ${totalIndexed}/${indexedBlocks.length} (${progress}%) | elapsed: ${runningFor} seconds`);
+          logger.debug(`Indexing block summary for #${block.height} | ~${blockPerSeconds.toFixed(2)} blocks/sec | total: ${totalIndexed}/${indexedBlocks.length} (${progress}%) | elapsed: ${runningFor} seconds`, logger.tags.mining);
           timer = new Date().getTime() / 1000;
           indexedThisRun = 0;
         }
@@ -309,12 +318,12 @@ class Blocks {
         newlyIndexed++;
       }
       if (newlyIndexed > 0) {
-        logger.notice(`Blocks summaries indexing completed: indexed ${newlyIndexed} blocks`);
+        logger.notice(`Blocks summaries indexing completed: indexed ${newlyIndexed} blocks`, logger.tags.mining);
       } else {
-        logger.debug(`Blocks summaries indexing completed: indexed ${newlyIndexed} blocks`);
+        logger.debug(`Blocks summaries indexing completed: indexed ${newlyIndexed} blocks`, logger.tags.mining);
       }
     } catch (e) {
-      logger.err(`Blocks summaries indexing failed. Trying again in 10 seconds. Reason: ${(e instanceof Error ? e.message : e)}`);
+      logger.err(`Blocks summaries indexing failed. Trying again in 10 seconds. Reason: ${(e instanceof Error ? e.message : e)}`, logger.tags.mining);
       throw e;
     }
   }
@@ -329,9 +338,10 @@ class Blocks {
 
     try {
       // Get all indexed block hash
-      const unindexedBlocks = await blocksRepository.$getCPFPUnindexedBlocks();
+      const unindexedBlockHeights = await blocksRepository.$getCPFPUnindexedBlocks();
+      logger.info(`Indexing cpfp data for ${unindexedBlockHeights.length} blocks`);
 
-      if (!unindexedBlocks?.length) {
+      if (!unindexedBlockHeights?.length) {
         return;
       }
 
@@ -340,30 +350,26 @@ class Blocks {
       let countThisRun = 0;
       let timer = new Date().getTime() / 1000;
       const startedAt = new Date().getTime() / 1000;
-
-      for (const block of unindexedBlocks) {
+      for (const height of unindexedBlockHeights) {
         // Logging
+        const hash = await bitcoinApi.$getBlockHash(height);
         const elapsedSeconds = Math.max(1, new Date().getTime() / 1000 - timer);
         if (elapsedSeconds > 5) {
           const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
-          const blockPerSeconds = Math.max(1, countThisRun / elapsedSeconds);
-          const progress = Math.round(count / unindexedBlocks.length * 10000) / 100;
-          logger.debug(`Indexing cpfp clusters for #${block.height} | ~${blockPerSeconds.toFixed(2)} blocks/sec | total: ${count}/${unindexedBlocks.length} (${progress}%) | elapsed: ${runningFor} seconds`);
+          const blockPerSeconds = (countThisRun / elapsedSeconds);
+          const progress = Math.round(count / unindexedBlockHeights.length * 10000) / 100;
+          logger.debug(`Indexing cpfp clusters for #${height} | ~${blockPerSeconds.toFixed(2)} blocks/sec | total: ${count}/${unindexedBlockHeights.length} (${progress}%) | elapsed: ${runningFor} seconds`);
           timer = new Date().getTime() / 1000;
           countThisRun = 0;
         }
 
-        await this.$indexCPFP(block.hash, block.height); // Calculate and save CPFP data for transactions in this block
+        await this.$indexCPFP(hash, height); // Calculate and save CPFP data for transactions in this block
 
         // Logging
         count++;
         countThisRun++;
       }
-      if (count > 0) {
-        logger.notice(`CPFP indexing completed: indexed ${count} blocks`);
-      } else {
-        logger.debug(`CPFP indexing completed: indexed ${count} blocks`);
-      }
+      logger.notice(`CPFP indexing completed: indexed ${count} blocks`);
     } catch (e) {
       logger.err(`CPFP indexing failed. Trying again in 10 seconds. Reason: ${(e instanceof Error ? e.message : e)}`);
       throw e;
@@ -385,7 +391,7 @@ class Blocks {
 
       const lastBlockToIndex = Math.max(0, currentBlockHeight - indexingBlockAmount + 1);
 
-      logger.debug(`Indexing blocks from #${currentBlockHeight} to #${lastBlockToIndex}`);
+      logger.debug(`Indexing blocks from #${currentBlockHeight} to #${lastBlockToIndex}`, logger.tags.mining);
       loadingIndicators.setProgress('block-indexing', 0);
 
       const chunkSize = 10000;
@@ -405,7 +411,7 @@ class Blocks {
           continue;
         }
 
-        logger.info(`Indexing ${missingBlockHeights.length} blocks from #${currentBlockHeight} to #${endBlock}`);
+        logger.info(`Indexing ${missingBlockHeights.length} blocks from #${currentBlockHeight} to #${endBlock}`, logger.tags.mining);
 
         for (const blockHeight of missingBlockHeights) {
           if (blockHeight < lastBlockToIndex) {
@@ -418,7 +424,7 @@ class Blocks {
             const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
             const blockPerSeconds = Math.max(1, indexedThisRun / elapsedSeconds);
             const progress = Math.round(totalIndexed / indexingBlockAmount * 10000) / 100;
-            logger.debug(`Indexing block #${blockHeight} | ~${blockPerSeconds.toFixed(2)} blocks/sec | total: ${totalIndexed}/${indexingBlockAmount} (${progress}%) | elapsed: ${runningFor} seconds`);
+            logger.debug(`Indexing block #${blockHeight} | ~${blockPerSeconds.toFixed(2)} blocks/sec | total: ${totalIndexed}/${indexingBlockAmount} (${progress}%) | elapsed: ${runningFor} seconds`, logger.tags.mining);
             timer = new Date().getTime() / 1000;
             indexedThisRun = 0;
             loadingIndicators.setProgress('block-indexing', progress, false);
@@ -435,13 +441,13 @@ class Blocks {
         currentBlockHeight -= chunkSize;
       }
       if (newlyIndexed > 0) {
-        logger.notice(`Block indexing completed: indexed ${newlyIndexed} blocks`);
+        logger.notice(`Block indexing completed: indexed ${newlyIndexed} blocks`, logger.tags.mining);
       } else {
-        logger.debug(`Block indexing completed: indexed ${newlyIndexed} blocks`);
+        logger.debug(`Block indexing completed: indexed ${newlyIndexed} blocks`, logger.tags.mining);
       }
       loadingIndicators.setProgress('block-indexing', 100);
     } catch (e) {
-      logger.err('Block indexing failed. Trying again in 10 seconds. Reason: ' + (e instanceof Error ? e.message : e));
+      logger.err('Block indexing failed. Trying again in 10 seconds. Reason: ' + (e instanceof Error ? e.message : e), logger.tags.mining);
       loadingIndicators.setProgress('block-indexing', 100);
       throw e;
     }
@@ -519,7 +525,7 @@ class Blocks {
             for (let i = 10; i >= 0; --i) {
               const newBlock = await this.$indexBlock(lastBlock['height'] - i);
               await this.$getStrippedBlockTransactions(newBlock.id, true, true);
-              if (config.MEMPOOL.TRANSACTION_INDEXING) {
+              if (config.MEMPOOL.CPFP_INDEXING) {
                 await this.$indexCPFP(newBlock.id, lastBlock['height'] - i);
               }
             }
@@ -537,7 +543,7 @@ class Blocks {
               priceId: lastestPriceId,
             }]);
           } else {
-            logger.info(`Cannot save block price for ${blockExtended.height} because the price updater hasnt completed yet. Trying again in 10 seconds.`)
+            logger.info(`Cannot save block price for ${blockExtended.height} because the price updater hasnt completed yet. Trying again in 10 seconds.`, logger.tags.mining);
             setTimeout(() => {
               indexer.runSingleTask('blocksPrices');
             }, 10000);
@@ -547,7 +553,7 @@ class Blocks {
           if (Common.blocksSummariesIndexingEnabled() === true) {
             await this.$getStrippedBlockTransactions(blockExtended.id, true);
           }
-          if (config.MEMPOOL.TRANSACTION_INDEXING) {
+          if (config.MEMPOOL.CPFP_INDEXING) {
             this.$indexCPFP(blockExtended.id, this.currentBlockHeight);
           }
         }
@@ -677,7 +683,12 @@ class Blocks {
   }
 
   public async $getBlocks(fromHeight?: number, limit: number = 15): Promise<BlockExtended[]> {
-    let currentHeight = fromHeight !== undefined ? fromHeight : await blocksRepository.$mostRecentBlockHeight();
+
+    let currentHeight = fromHeight !== undefined ? fromHeight : this.currentBlockHeight;
+    if (currentHeight > this.currentBlockHeight) {
+      limit -= currentHeight - this.currentBlockHeight;
+      currentHeight = this.currentBlockHeight;
+    }
     const returnBlocks: BlockExtended[] = [];
 
     if (currentHeight < 0) {
@@ -741,32 +752,15 @@ class Blocks {
   }
 
   public async $indexCPFP(hash: string, height: number): Promise<void> {
-    let transactions;
-    if (false/*Common.blocksSummariesIndexingEnabled()*/) {
-      transactions = await this.$getStrippedBlockTransactions(hash);
-      const rawBlock = await bitcoinApi.$getRawBlock(hash);
-      const block = Block.fromBuffer(rawBlock);
-      const txMap = {};
-      for (const tx of block.transactions || []) {
-        txMap[tx.getId()] = tx;
-      }
-      for (const tx of transactions) {
-        if (txMap[tx.txid]?.ins) {
-          tx.vin = txMap[tx.txid].ins.map(vin => {
-            return {
-              txid: vin.hash
-            };
-          });
-        }
-      }
-    } else {
-      const block = await bitcoinClient.getBlock(hash, 2);
-      transactions = block.tx.map(tx => {
-        tx.vsize = tx.weight / 4;
-        return tx;
-      });
-    }
- 
+    const block = await bitcoinClient.getBlock(hash, 2);
+    const transactions = block.tx.map(tx => {
+      tx.vsize = tx.weight / 4;
+      tx.fee *= 100_000_000;
+      return tx;
+    });
+
+    const clusters: any[] = [];
+
     let cluster: TransactionStripped[] = [];
     let ancestors: { [txid: string]: boolean } = {};
     for (let i = transactions.length - 1; i >= 0; i--) {
@@ -778,12 +772,14 @@ class Blocks {
           totalFee += tx?.fee || 0;
           totalVSize += tx.vsize;
         });
-        const effectiveFeePerVsize = (totalFee * 100_000_000) / totalVSize;
+        const effectiveFeePerVsize = totalFee / totalVSize;
         if (cluster.length > 1) {
-          await cpfpRepository.$saveCluster(height, cluster.map(tx => { return { txid: tx.txid, weight: tx.vsize * 4, fee: (tx.fee || 0) * 100_000_000 }; }), effectiveFeePerVsize);
-          for (const tx of cluster) {
-            await transactionRepository.$setCluster(tx.txid, cluster[0].txid);
-          }
+          clusters.push({
+            root: cluster[0].txid,
+            height,
+            txs: cluster.map(tx => { return { txid: tx.txid, weight: tx.vsize * 4, fee: tx.fee || 0 }; }),
+            effectiveFeePerVsize,
+          });
         }
         cluster = [];
         ancestors = {};
@@ -793,7 +789,10 @@ class Blocks {
         ancestors[vin.txid] = true;
       });
     }
-    await blocksRepository.$setCPFPIndexed(hash);
+    const result = await cpfpRepository.$batchSaveClusters(clusters);
+    if (!result) {
+      await cpfpRepository.$insertProgressMarker(height);
+    }
   }
 }
 

backend/src/api/common.ts

@@ -51,8 +51,6 @@ export class Common {
   static findRbfTransactions(added: TransactionExtended[], deleted: TransactionExtended[]): { [txid: string]: TransactionExtended } {
     const matches: { [txid: string]: TransactionExtended } = {};
     deleted
-      // The replaced tx must have at least one input with nSequence < maxint-1 (That’s the opt-in)
-      .filter((tx) => tx.vin.some((vin) => vin.sequence < 0xfffffffe))
       .forEach((deletedTx) => {
         const foundMatches = added.find((addedTx) => {
           // The new tx must, absolutely speaking, pay at least as much fee as the replaced tx.
@@ -61,7 +59,7 @@ export class Common {
             && addedTx.feePerVsize > deletedTx.feePerVsize
             // Spends one or more of the same inputs
             && deletedTx.vin.some((deletedVin) =>
-              addedTx.vin.some((vin) => vin.txid === deletedVin.txid));
+              addedTx.vin.some((vin) => vin.txid === deletedVin.txid && vin.vout === deletedVin.vout));
             });
         if (foundMatches) {
           matches[deletedTx.txid] = foundMatches;
@@ -190,7 +188,7 @@ export class Common {
   static cpfpIndexingEnabled(): boolean {
     return (
       Common.indexingEnabled() &&
-      config.MEMPOOL.TRANSACTION_INDEXING === true
+      config.MEMPOOL.CPFP_INDEXING === true
     );
   }
 

backend/src/api/database-migration.ts

@@ -2,9 +2,12 @@ import config from '../config';
 import DB from '../database';
 import logger from '../logger';
 import { Common } from './common';
+import blocksRepository from '../repositories/BlocksRepository';
+import cpfpRepository from '../repositories/CpfpRepository';
+import { RowDataPacket } from 'mysql2';
 
 class DatabaseMigration {
-  private static currentVersion = 49;
+  private static currentVersion = 52;
   private queryTimeout = 3600_000;
   private statisticsAddedIndexed = false;
   private uniqueLogs: string[] = [];
@@ -442,6 +445,29 @@ class DatabaseMigration {
       await this.$executeQuery('TRUNCATE TABLE `blocks_audits`');
       await this.updateToSchemaVersion(49);
     }
+
+    if (databaseSchemaVersion < 50) {
+      await this.$executeQuery('ALTER TABLE `blocks` DROP COLUMN `cpfp_indexed`');
+      await this.updateToSchemaVersion(50);
+    }
+
+    if (databaseSchemaVersion < 51) {
+      await this.$executeQuery('ALTER TABLE `cpfp_clusters` ADD INDEX `height` (`height`)');
+      await this.updateToSchemaVersion(51);
+    }
+
+    if (databaseSchemaVersion < 52) {
+      await this.$executeQuery(this.getCreateCompactCPFPTableQuery(), await this.$checkIfTableExists('compact_cpfp_clusters'));
+      await this.$executeQuery(this.getCreateCompactTransactionsTableQuery(), await this.$checkIfTableExists('compact_transactions'));
+      try {
+        await this.$convertCompactCpfpTables();
+        await this.$executeQuery('DROP TABLE IF EXISTS `cpfp_clusters`');
+        await this.$executeQuery('DROP TABLE IF EXISTS `transactions`');
+        await this.updateToSchemaVersion(52);
+      } catch(e) {
+        logger.warn('' + (e instanceof Error ? e.message : e));
+      }
+    }
   }
 
   /**
@@ -913,6 +939,25 @@ class DatabaseMigration {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
   }
 
+  private getCreateCompactCPFPTableQuery(): string {
+    return `CREATE TABLE IF NOT EXISTS compact_cpfp_clusters (
+      root binary(32) NOT NULL,
+      height int(10) NOT NULL,
+      txs BLOB DEFAULT NULL,
+      fee_rate float unsigned,
+      PRIMARY KEY (root),
+      INDEX (height)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
+  }
+
+  private getCreateCompactTransactionsTableQuery(): string {
+    return `CREATE TABLE IF NOT EXISTS compact_transactions (
+      txid binary(32) NOT NULL,
+      cluster binary(32) DEFAULT NULL,
+      PRIMARY KEY (txid)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
+  }
+
   public async $truncateIndexedData(tables: string[]) {
     const allowedTables = ['blocks', 'hashrates', 'prices'];
 
@@ -933,6 +978,49 @@ class DatabaseMigration {
       logger.warn(`Unable to erase indexed data`);
     }
   }
+
+  private async $convertCompactCpfpTables(): Promise<void> {
+    try {
+      const batchSize = 250;
+      const maxHeight = await blocksRepository.$mostRecentBlockHeight() || 0;
+      const [minHeightRows]: any = await DB.query(`SELECT MIN(height) AS minHeight from cpfp_clusters`);
+      const minHeight = (minHeightRows.length && minHeightRows[0].minHeight != null) ? minHeightRows[0].minHeight : maxHeight;
+      let height = maxHeight;
+
+      // Logging
+      let timer = new Date().getTime() / 1000;
+      const startedAt = new Date().getTime() / 1000;
+
+      while (height > minHeight) {
+        const [rows] = await DB.query(
+          `
+            SELECT * from cpfp_clusters
+            WHERE height <= ? AND height > ?
+            ORDER BY height
+          `,
+          [height, height - batchSize]
+        ) as RowDataPacket[][];
+        if (rows?.length) {
+          await cpfpRepository.$batchSaveClusters(rows.map(row => {
+            return {
+              root: row.root,
+              height: row.height,
+              txs: JSON.parse(row.txs),
+              effectiveFeePerVsize: row.fee_rate,
+            };
+          }));
+        }
+
+        const elapsed = new Date().getTime() / 1000 - timer;
+        const runningFor = new Date().getTime() / 1000 - startedAt;
+        logger.debug(`Migrated cpfp data from block ${height} to ${height - batchSize} in ${elapsed.toFixed(2)} seconds | total elapsed: ${runningFor.toFixed(2)} seconds`);
+        timer = new Date().getTime() / 1000;
+        height -= batchSize;
+      }
+    } catch (e) {
+      logger.warn(`Failed to migrate cpfp transaction data`);
+    }
+  }
 }
 
 export default new DatabaseMigration();

backend/src/api/explorer/channels.api.ts

@@ -670,9 +670,7 @@ class ChannelsApi {
         AND status != 2
       `);
       if (result[0].changedRows ?? 0 > 0) {
-        logger.info(`Marked ${result[0].changedRows} channels as inactive because they are not in the graph`);
-      } else {
-        logger.debug(`Marked ${result[0].changedRows} channels as inactive because they are not in the graph`);
+        logger.debug(`Marked ${result[0].changedRows} channels as inactive because they are not in the graph`, logger.tags.ln);
       }
     } catch (e) {
       logger.err('$setChannelsInactive() error: ' + (e instanceof Error ? e.message : e));

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

@@ -685,9 +685,7 @@ class NodesApi {
         )
       `);
       if (result[0].changedRows ?? 0 > 0) {
-        logger.info(`Marked ${result[0].changedRows} nodes as inactive because they are not in the graph`);
-      } else {
-        logger.debug(`Marked ${result[0].changedRows} nodes as inactive because they are not in the graph`);
+        logger.debug(`Marked ${result[0].changedRows} nodes as inactive because they are not in the graph`, logger.tags.ln);
       }
     } catch (e) {
       logger.err('$setNodesInactive() error: ' + (e instanceof Error ? e.message : e));

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

@@ -41,13 +41,70 @@ class NodesRoutes {
       let nodes: any[] = [];
       switch (config.MEMPOOL.NETWORK) {
         case 'testnet':
-          nodesList = ['032c7c7819276c4f706a04df1a0f1e10a5495994a7be4c1d3d28ca766e5a2b957b', '025a7e38c2834dd843591a4d23d5f09cdeb77ddca85f673c2d944a14220ff14cf7', '0395e2731a1673ef21d7a16a727c4fc4d4c35a861c428ce2c819c53d2b81c8bd55', '032ab2028c0b614c6d87824e2373529652fd7e4221b4c70cc4da7c7005c49afcf0', '029001b22fe70b48bee12d014df91982eb85ff1bd404ec772d5c83c4ee3e88d2c3', '0212e2848d79f928411da5f2ff0a8c95ec6ccb5a09d2031b6f71e91309dcde63af', '03e871a2229523d34f76e6311ff197cfe7f26c2fbec13554b93a46f4e710c47dab', '032202ec98d976b0e928bd1d91924e8bd3eab07231fc39feb3737b010071073df8', '02fa7c5a948d03d563a9f36940c2205a814e594d17c0042ced242c71a857d72605', '039c14fdec2d958e3d14cebf657451bbd9e039196615785e82c917f274e3fb2205', '033589bbcb233ffc416cefd5437c7f37e9d7cb7942d405e39e72c4c846d9b37f18', '029293110441c6e2eacb57e1255bf6ef05c41a6a676fe474922d33c19f98a7d584'];
+          nodesList = [
+            '032c7c7819276c4f706a04df1a0f1e10a5495994a7be4c1d3d28ca766e5a2b957b',
+            '025a7e38c2834dd843591a4d23d5f09cdeb77ddca85f673c2d944a14220ff14cf7',
+            '0395e2731a1673ef21d7a16a727c4fc4d4c35a861c428ce2c819c53d2b81c8bd55',
+            '032ab2028c0b614c6d87824e2373529652fd7e4221b4c70cc4da7c7005c49afcf0',
+            '029001b22fe70b48bee12d014df91982eb85ff1bd404ec772d5c83c4ee3e88d2c3',
+            '0212e2848d79f928411da5f2ff0a8c95ec6ccb5a09d2031b6f71e91309dcde63af',
+            '03e871a2229523d34f76e6311ff197cfe7f26c2fbec13554b93a46f4e710c47dab',
+            '032202ec98d976b0e928bd1d91924e8bd3eab07231fc39feb3737b010071073df8',
+            '02fa7c5a948d03d563a9f36940c2205a814e594d17c0042ced242c71a857d72605',
+            '039c14fdec2d958e3d14cebf657451bbd9e039196615785e82c917f274e3fb2205',
+            '033589bbcb233ffc416cefd5437c7f37e9d7cb7942d405e39e72c4c846d9b37f18',
+            '029293110441c6e2eacb57e1255bf6ef05c41a6a676fe474922d33c19f98a7d584',
+            '0235ad0b56ed8c42c4354444c24e971c05e769ec0b5fb0ccea42880095dc02ea2c',
+            '029700819a37afea630f80e6cc461f3fd3c4ace2598a21cfbbe64d1c78d0ee69a5',
+            '02c2d8b2dbf87c7894af2f1d321290e2fe6db5446cd35323987cee98f06e2e0075',
+            '030b0ca1ea7b1075716d2a555630e6fd47ef11bc7391fe68963ec06cf370a5e382',
+            '031adb9eb2d66693f85fa31a4adca0319ba68219f3ad5f9a2ef9b34a6b40755fa1',
+            '02ccd07faa47eda810ecf5591ccf5ca50f6c1034d0d175052898d32a00b9bae24f',
+          ];
           break;
         case 'signet':
-          nodesList = ['03ddab321b760433cbf561b615ef62ac7d318630c5f51d523aaf5395b90b751956', '033d92c7bfd213ef1b34c90e985fb5dc77f9ec2409d391492484e57a44c4aca1de', '02ad010dda54253c1eb9efe38b0760657a3b43ecad62198c359c051c9d99d45781', '025196512905b8a3f1597428b867bec63ec9a95e5089eb7dc7e63e2d2691669029', '027c625aa1fbe3768db68ebcb05b53b6dc0ce68b7b54b8900d326d167363e684fe', '03f1629af3101fcc56b7aac2667016be84e3defbf3d0c8719f836c9b41c9a57a43', '02dfb81e2f7a3c4c9e8a51b70ef82b4a24549cc2fab1f5b2fd636501774a918991', '02d01ccf832944c68f10d39006093769c5b8bda886d561b128534e313d729fdb34', '02499ed23027d4698a6904ff4ec1b6085a61f10b9a6937f90438f9947e38e8ea86', '038310e3a786340f2bd7770704c7ccfe560fd163d9a1c99d67894597419d12cbf7', '03e5e9d879b72c7d67ecd483bae023bd33e695bb32b981a4021260f7b9d62bc761', '028d16e1a0ace4c0c0a421536d8d32ce484dfe6e2f726b7b0e7c30f12a195f8cc7'];
+          nodesList = [
+            '03ddab321b760433cbf561b615ef62ac7d318630c5f51d523aaf5395b90b751956',
+            '033d92c7bfd213ef1b34c90e985fb5dc77f9ec2409d391492484e57a44c4aca1de',
+            '02ad010dda54253c1eb9efe38b0760657a3b43ecad62198c359c051c9d99d45781',
+            '025196512905b8a3f1597428b867bec63ec9a95e5089eb7dc7e63e2d2691669029',
+            '027c625aa1fbe3768db68ebcb05b53b6dc0ce68b7b54b8900d326d167363e684fe',
+            '03f1629af3101fcc56b7aac2667016be84e3defbf3d0c8719f836c9b41c9a57a43',
+            '02dfb81e2f7a3c4c9e8a51b70ef82b4a24549cc2fab1f5b2fd636501774a918991',
+            '02d01ccf832944c68f10d39006093769c5b8bda886d561b128534e313d729fdb34',
+            '02499ed23027d4698a6904ff4ec1b6085a61f10b9a6937f90438f9947e38e8ea86',
+            '038310e3a786340f2bd7770704c7ccfe560fd163d9a1c99d67894597419d12cbf7',
+            '03e5e9d879b72c7d67ecd483bae023bd33e695bb32b981a4021260f7b9d62bc761',
+            '028d16e1a0ace4c0c0a421536d8d32ce484dfe6e2f726b7b0e7c30f12a195f8cc7',
+            '02ff690d06c187ab994bf83c5a2114fe5bf50112c2c817af0f788f736be9fa2070',
+            '02a9f570c51a2526a5ee85802e88f9281bed771eb66a0c8a7d898430dd5d0eae45',
+            '038c3de773255d3bd7a50e31e58d423baac5c90826a74d75e64b74c95475de1097',
+            '0242c7f7d315095f37ad1421ae0a2fc967d4cbe65b61b079c5395a769436959853',
+            '02a909e70eb03742f12666ebb1f56ac42a5fbaab0c0e8b5b1df4aa9f10f8a09240',
+            '03a26efa12489803c07f3ac2f1dba63812e38f0f6e866ce3ebb34df7de1f458cd2',
+          ];
           break;
         default:
-          nodesList = ['03fbc17549ec667bccf397ababbcb4cdc0e3394345e4773079ab2774612ec9be61', '03da9a8623241ccf95f19cd645c6cecd4019ac91570e976eb0a128bebbc4d8a437', '03ca5340cf85cb2e7cf076e489f785410838de174e40be62723e8a60972ad75144', '0238bd27f02d67d6c51e269692bc8c9a32357a00e7777cba7f4f1f18a2a700b108', '03f983dcabed6baa1eab5b56c8b2e8fdc846ab3fd931155377897335e85a9fa57c', '03e399589533581e48796e29a825839a010036a61b20744fda929d6709fcbffcc5', '021f5288b5f72c42cd0d8801086af7ce09a816d8ee9a4c47a4b436399b26cb601a', '032b01b7585f781420cd4148841a82831ba37fa952342052cec16750852d4f2dd9', '02848036488d4b8fb1f1c4064261ec36151f43b085f0b51bd239ade3ddfc940c34', '02b6b1640fe029e304c216951af9fbefdb23b0bdc9baaf327540d31b6107841fdf', '03694289827203a5b3156d753071ddd5bf92e371f5a462943f9555eef6d2d6606c', '0283d850db7c3e8ea7cc9c4abc7afaab12bbdf72b677dcba1d608350d2537d7d43'];
+          nodesList = [
+            '03fbc17549ec667bccf397ababbcb4cdc0e3394345e4773079ab2774612ec9be61',
+            '03da9a8623241ccf95f19cd645c6cecd4019ac91570e976eb0a128bebbc4d8a437',
+            '03ca5340cf85cb2e7cf076e489f785410838de174e40be62723e8a60972ad75144',
+            '0238bd27f02d67d6c51e269692bc8c9a32357a00e7777cba7f4f1f18a2a700b108',
+            '03f983dcabed6baa1eab5b56c8b2e8fdc846ab3fd931155377897335e85a9fa57c',
+            '03e399589533581e48796e29a825839a010036a61b20744fda929d6709fcbffcc5',
+            '021f5288b5f72c42cd0d8801086af7ce09a816d8ee9a4c47a4b436399b26cb601a',
+            '032b01b7585f781420cd4148841a82831ba37fa952342052cec16750852d4f2dd9',
+            '02848036488d4b8fb1f1c4064261ec36151f43b085f0b51bd239ade3ddfc940c34',
+            '02b6b1640fe029e304c216951af9fbefdb23b0bdc9baaf327540d31b6107841fdf',
+            '03694289827203a5b3156d753071ddd5bf92e371f5a462943f9555eef6d2d6606c',
+            '0283d850db7c3e8ea7cc9c4abc7afaab12bbdf72b677dcba1d608350d2537d7d43',
+            '02521287789f851268a39c9eccc9d6180d2c614315b583c9e6ae0addbd6d79df06',
+            '0258c2a7b7f8af2585b4411b1ec945f70988f30412bb1df179de941f14d0b1bc3e',
+            '03c3389ff1a896f84d921ed01a19fc99c6724ce8dc4b960cd3b7b2362b62cd60d7',
+            '038d118996b3eaa15dcd317b32a539c9ecfdd7698f204acf8a087336af655a9192',
+            '02a928903d93d78877dacc3642b696128a3636e9566dd42d2d132325b2c8891c09',
+            '0328cd17f3a9d3d90b532ade0d1a67e05eb8a51835b3dce0a2e38eac04b5a62a57',
+          ];
       }
 
       for (let pubKey of nodesList) {

backend/src/api/lightning/clightning/clightning-client.ts

@@ -141,13 +141,13 @@ export default class CLightningClient extends EventEmitter implements AbstractLi
       // main data directory provided, default to using the bitcoin mainnet subdirectory
       // to be removed in v0.2.0
       else if (fExists(rpcPath, 'bitcoin', 'lightning-rpc')) {
-        logger.warn(`[CLightningClient] ${rpcPath}/lightning-rpc is missing, using the bitcoin mainnet subdirectory at ${rpcPath}/bitcoin instead.`)
-        logger.warn(`[CLightningClient] specifying the main lightning data directory is deprecated, please specify the network directory explicitly.\n`)
+        logger.warn(`${rpcPath}/lightning-rpc is missing, using the bitcoin mainnet subdirectory at ${rpcPath}/bitcoin instead.`, logger.tags.ln)
+        logger.warn(`specifying the main lightning data directory is deprecated, please specify the network directory explicitly.\n`, logger.tags.ln)
         rpcPath = path.join(rpcPath, 'bitcoin', 'lightning-rpc')
       }
     }
 
-    logger.debug(`[CLightningClient] Connecting to ${rpcPath}`);
+    logger.debug(`Connecting to ${rpcPath}`, logger.tags.ln);
 
     super();
     this.rpcPath = rpcPath;
@@ -172,19 +172,19 @@ export default class CLightningClient extends EventEmitter implements AbstractLi
 
     this.clientConnectionPromise = new Promise<void>(resolve => {
       _self.client.on('connect', () => {
-        logger.info(`[CLightningClient] Lightning client connected`);
+        logger.info(`CLightning client connected`, logger.tags.ln);
         _self.reconnectWait = 1;
         resolve();
       });
 
       _self.client.on('end', () => {
-        logger.err('[CLightningClient] Lightning client connection closed, reconnecting');
+        logger.err(`CLightning client connection closed, reconnecting`, logger.tags.ln);
         _self.increaseWaitTime();
         _self.reconnect();
       });
 
       _self.client.on('error', error => {
-        logger.err(`[CLightningClient] Lightning client connection error: ${error}`);
+        logger.err(`CLightning client connection error: ${error}`, logger.tags.ln);
         _self.increaseWaitTime();
         _self.reconnect();
       });
@@ -196,7 +196,6 @@ export default class CLightningClient extends EventEmitter implements AbstractLi
         return;
       }
       const data = JSON.parse(line);
-      // logger.debug(`[CLightningClient] #${data.id} <-- ${JSON.stringify(data.error || data.result)}`);
       _self.emit('res:' + data.id, data);
     });
   }
@@ -217,7 +216,7 @@ export default class CLightningClient extends EventEmitter implements AbstractLi
     }
 
     this.reconnectTimeout = setTimeout(() => {
-      logger.debug('[CLightningClient] Trying to reconnect...');
+      logger.debug(`Trying to reconnect...`, logger.tags.ln);
 
       _self.client.connect(_self.rpcPath);
       _self.reconnectTimeout = null;
@@ -235,7 +234,6 @@ export default class CLightningClient extends EventEmitter implements AbstractLi
       id: '' + callInt
     };
 
-    // logger.debug(`[CLightningClient] #${callInt} --> ${method} ${args}`);
 
     // Wait for the client to connect
     return this.clientConnectionPromise

backend/src/api/lightning/clightning/clightning-convert.ts

@@ -2,6 +2,7 @@ import { ILightningApi } from '../lightning-api.interface';
 import FundingTxFetcher from '../../../tasks/lightning/sync-tasks/funding-tx-fetcher';
 import logger from '../../../logger';
 import { Common } from '../../common';
+import config from '../../../config';
 
 /**
  * Convert a clightning "listnode" entry to a lnd node entry
@@ -40,7 +41,7 @@ export function convertNode(clNode: any): ILightningApi.Node {
  * Convert clightning "listchannels" response to lnd "describegraph.edges" format
  */
 export async function convertAndmergeBidirectionalChannels(clChannels: any[]): Promise<ILightningApi.Channel[]> {
-  logger.info('Converting clightning nodes and channels to lnd graph format');
+  logger.debug(`Converting clightning nodes and channels to lnd graph format`, logger.tags.ln);
 
   let loggerTimer = new Date().getTime() / 1000;
   let channelProcessed = 0;
@@ -62,8 +63,8 @@ export async function convertAndmergeBidirectionalChannels(clChannels: any[]): P
     }
 
     const elapsedSeconds = Math.round((new Date().getTime() / 1000) - loggerTimer);
-    if (elapsedSeconds > 10) {
-      logger.info(`Building complete channels from clightning output. Channels processed: ${channelProcessed + 1} of ${clChannels.length}`);
+    if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
+      logger.info(`Building complete channels from clightning output. Channels processed: ${channelProcessed + 1} of ${clChannels.length}`, logger.tags.ln);
       loggerTimer = new Date().getTime() / 1000;
     }
 
@@ -76,7 +77,7 @@ export async function convertAndmergeBidirectionalChannels(clChannels: any[]): P
     consolidatedChannelList.push(await buildIncompleteChannel(clChannelsDict[short_channel_id]));
 
     const elapsedSeconds = Math.round((new Date().getTime() / 1000) - loggerTimer);
-    if (elapsedSeconds > 10) {
+    if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
       logger.info(`Building partial channels from clightning output. Channels processed: ${channelProcessed + 1} of ${keys.length}`);
       loggerTimer = new Date().getTime() / 1000;
     }

backend/src/api/mempool-blocks.ts

@@ -1,17 +1,14 @@
 import logger from '../logger';
-import { MempoolBlock, TransactionExtended, TransactionStripped, MempoolBlockWithTransactions, MempoolBlockDelta } from '../mempool.interfaces';
+import { MempoolBlock, TransactionExtended, ThreadTransaction, TransactionStripped, MempoolBlockWithTransactions, MempoolBlockDelta, Ancestor } from '../mempool.interfaces';
 import { Common } from './common';
 import config from '../config';
-import { StaticPool } from 'node-worker-threads-pool';
+import { Worker } from 'worker_threads';
 import path from 'path';
 
 class MempoolBlocks {
   private mempoolBlocks: MempoolBlockWithTransactions[] = [];
   private mempoolBlockDeltas: MempoolBlockDelta[] = [];
-  private makeTemplatesPool = new StaticPool({
-    size: 1,
-    task: path.resolve(__dirname, './tx-selection-worker.js'),
-  });
+  private txSelectionWorker: Worker | null = null;
 
   constructor() {}
 
@@ -146,27 +143,159 @@ class MempoolBlocks {
     return mempoolBlockDeltas;
   }
 
-  public async makeBlockTemplates(newMempool: { [txid: string]: TransactionExtended }, blockLimit: number, weightLimit: number | null = null, condenseRest = false): Promise<void> {
-    const { mempool, blocks } = await this.makeTemplatesPool.exec({ mempool: newMempool, blockLimit, weightLimit, condenseRest });
-    const deltas = this.calculateMempoolDeltas(this.mempoolBlocks, blocks);
-
-    // copy CPFP info across to main thread's mempool
-    Object.keys(newMempool).forEach((txid) => {
-      if (newMempool[txid] && mempool[txid]) {
-        newMempool[txid].effectiveFeePerVsize = mempool[txid].effectiveFeePerVsize;
-        newMempool[txid].ancestors = mempool[txid].ancestors;
-        newMempool[txid].descendants = mempool[txid].descendants;
-        newMempool[txid].bestDescendant = mempool[txid].bestDescendant;
-        newMempool[txid].cpfpChecked = mempool[txid].cpfpChecked;
-      }
+  public async makeBlockTemplates(newMempool: { [txid: string]: TransactionExtended }): Promise<void> {
+    // prepare a stripped down version of the mempool with only the minimum necessary data
+    // to reduce the overhead of passing this data to the worker thread
+    const strippedMempool: { [txid: string]: ThreadTransaction } = {};
+    Object.values(newMempool).forEach(entry => {
+      strippedMempool[entry.txid] = {
+        txid: entry.txid,
+        fee: entry.fee,
+        weight: entry.weight,
+        feePerVsize: entry.fee / (entry.weight / 4),
+        effectiveFeePerVsize: entry.fee / (entry.weight / 4),
+        vin: entry.vin.map(v => v.txid),
+      };
     });
 
-    this.mempoolBlocks = blocks;
+    // (re)initialize tx selection worker thread
+    if (!this.txSelectionWorker) {
+      this.txSelectionWorker = new Worker(path.resolve(__dirname, './tx-selection-worker.js'));
+      // if the thread throws an unexpected error, or exits for any other reason,
+      // reset worker state so that it will be re-initialized on the next run
+      this.txSelectionWorker.once('error', () => {
+        this.txSelectionWorker = null;
+      });
+      this.txSelectionWorker.once('exit', () => {
+        this.txSelectionWorker = null;
+      });
+    }
+
+    // run the block construction algorithm in a separate thread, and wait for a result
+    let threadErrorListener;
+    try {
+      const workerResultPromise = new Promise<{ blocks: ThreadTransaction[][], clusters: { [root: string]: string[] } }>((resolve, reject) => {
+        threadErrorListener = reject;
+        this.txSelectionWorker?.once('message', (result): void => {
+          resolve(result);
+        });
+        this.txSelectionWorker?.once('error', reject);
+      });
+      this.txSelectionWorker.postMessage({ type: 'set', mempool: strippedMempool });
+      const { blocks, clusters } = await workerResultPromise;
+
+      this.processBlockTemplates(newMempool, blocks, clusters);
+
+      // clean up thread error listener
+      this.txSelectionWorker?.removeListener('error', threadErrorListener);
+    } catch (e) {
+      logger.err('makeBlockTemplates failed. ' + (e instanceof Error ? e.message : e));
+    }
+  }
+
+  public async updateBlockTemplates(newMempool: { [txid: string]: TransactionExtended }, added: TransactionExtended[], removed: string[]): Promise<void> {
+    if (!this.txSelectionWorker) {
+      // need to reset the worker
+      return this.makeBlockTemplates(newMempool);
+    }
+    // prepare a stripped down version of the mempool with only the minimum necessary data
+    // to reduce the overhead of passing this data to the worker thread
+    const addedStripped: ThreadTransaction[] = added.map(entry => {
+      return {
+        txid: entry.txid,
+        fee: entry.fee,
+        weight: entry.weight,
+        feePerVsize: entry.fee / (entry.weight / 4),
+        effectiveFeePerVsize: entry.fee / (entry.weight / 4),
+        vin: entry.vin.map(v => v.txid),
+      };
+    });
+
+    // run the block construction algorithm in a separate thread, and wait for a result
+    let threadErrorListener;
+    try {
+      const workerResultPromise = new Promise<{ blocks: ThreadTransaction[][], clusters: { [root: string]: string[] } }>((resolve, reject) => {
+        threadErrorListener = reject;
+        this.txSelectionWorker?.once('message', (result): void => {
+          resolve(result);
+        });
+        this.txSelectionWorker?.once('error', reject);
+      });
+      this.txSelectionWorker.postMessage({ type: 'update', added: addedStripped, removed });
+      const { blocks, clusters } = await workerResultPromise;
+
+      this.processBlockTemplates(newMempool, blocks, clusters);
+
+      // clean up thread error listener
+      this.txSelectionWorker?.removeListener('error', threadErrorListener);
+    } catch (e) {
+      logger.err('updateBlockTemplates failed. ' + (e instanceof Error ? e.message : e));
+    }
+  }
+
+  private processBlockTemplates(mempool, blocks, clusters): void {
+    // update this thread's mempool with the results
+    blocks.forEach(block => {
+      block.forEach(tx => {
+        if (tx.txid in mempool) {
+          if (tx.effectiveFeePerVsize != null) {
+            mempool[tx.txid].effectiveFeePerVsize = tx.effectiveFeePerVsize;
+          }
+          if (tx.cpfpRoot && tx.cpfpRoot in clusters) {
+            const ancestors: Ancestor[] = [];
+            const descendants: Ancestor[] = [];
+            const cluster = clusters[tx.cpfpRoot];
+            let matched = false;
+            cluster.forEach(txid => {
+              if (txid === tx.txid) {
+                matched = true;
+              } else if (mempool[txid]) {
+                const relative = {
+                  txid: txid,
+                  fee: mempool[txid].fee,
+                  weight: mempool[txid].weight,
+                };
+                if (matched) {
+                  descendants.push(relative);
+                } else {
+                  ancestors.push(relative);
+                }
+              }
+            });
+            mempool[tx.txid].ancestors = ancestors;
+            mempool[tx.txid].descendants = descendants;
+            mempool[tx.txid].bestDescendant = null;
+          }
+          mempool[tx.txid].cpfpChecked = tx.cpfpChecked;
+        }
+      });
+    });
+
+    // unpack the condensed blocks into proper mempool blocks
+    const mempoolBlocks = blocks.map((transactions, blockIndex) => {
+      return this.dataToMempoolBlocks(transactions.map(tx => {
+        return mempool[tx.txid] || null;
+      }).filter(tx => !!tx), undefined, undefined, blockIndex);
+    });
+
+    const deltas = this.calculateMempoolDeltas(this.mempoolBlocks, mempoolBlocks);
+
+    this.mempoolBlocks = mempoolBlocks;
     this.mempoolBlockDeltas = deltas;
   }
 
   private dataToMempoolBlocks(transactions: TransactionExtended[],
-    blockSize: number, blockWeight: number, blocksIndex: number): MempoolBlockWithTransactions {
+    blockSize: number | undefined, blockWeight: number | undefined, blocksIndex: number): MempoolBlockWithTransactions {
+    let totalSize = blockSize || 0;
+    let totalWeight = blockWeight || 0;
+    if (blockSize === undefined && blockWeight === undefined) {
+      totalSize = 0;
+      totalWeight = 0;
+      transactions.forEach(tx => {
+        totalSize += tx.size;
+        totalWeight += tx.weight;
+      });
+    }
     let rangeLength = 4;
     if (blocksIndex === 0) {
       rangeLength = 8;
@@ -177,8 +306,8 @@ class MempoolBlocks {
       rangeLength = 8;
     }
     return {
-      blockSize: blockSize,
-      blockVSize: blockWeight / 4,
+      blockSize: totalSize,
+      blockVSize: totalWeight / 4,
       nTx: transactions.length,
       totalFees: transactions.reduce((acc, cur) => acc + cur.fee, 0),
       medianFee: Common.percentile(transactions.map((tx) => tx.effectiveFeePerVsize), config.MEMPOOL.RECOMMENDED_FEE_PERCENTILE),

backend/src/api/mempool.ts

@@ -10,28 +10,32 @@ import bitcoinClient from './bitcoin/bitcoin-client';
 import bitcoinSecondClient from './bitcoin/bitcoin-second-client';
 import rbfCache from './rbf-cache';
 
-class Mempool {
-  private static WEBSOCKET_REFRESH_RATE_MS = 10000;
-  private static LAZY_DELETE_AFTER_SECONDS = 30;
-  private inSync: boolean = false;
-  private mempoolCacheDelta: number = -1;
-  private mempoolCache: { [txId: string]: TransactionExtended } = {};
-  private mempoolInfo: IBitcoinApi.MempoolInfo = { loaded: false, size: 0, bytes: 0, usage: 0, total_fee: 0,
+export class Mempool {
+  protected static WEBSOCKET_REFRESH_RATE_MS = 10000;
+  protected static LAZY_DELETE_AFTER_SECONDS = 30;
+  protected inSync: boolean = false;
+  protected mempoolCacheDelta: number = -1;
+  protected mempoolCache: { [txId: string]: TransactionExtended } = {};
+  protected mempoolInfo: IBitcoinApi.MempoolInfo = { loaded: false, size: 0, bytes: 0, usage: 0, total_fee: 0,
                                                     maxmempool: 300000000, mempoolminfee: 0.00001000, minrelaytxfee: 0.00001000 };
-  private mempoolChangedCallback: ((newMempool: {[txId: string]: TransactionExtended; }, newTransactions: TransactionExtended[],
-    deletedTransactions: TransactionExtended[]) => void) | undefined;
-  private asyncMempoolChangedCallback: ((newMempool: {[txId: string]: TransactionExtended; }, newTransactions: TransactionExtended[],
+  protected mempoolChangedCallback: ((newMempool: {[txId: string]: TransactionExtended; }, newTransactions: TransactionExtended[],
     deletedTransactions: TransactionExtended[]) => void) | undefined;
+  protected asyncMempoolChangedCallback: ((newMempool: {[txId: string]: TransactionExtended; }, newTransactions: TransactionExtended[],
+    deletedTransactions: TransactionExtended[]) => Promise<void>) | undefined;
 
-  private txPerSecondArray: number[] = [];
-  private txPerSecond: number = 0;
+  protected txPerSecondArray: number[] = [];
+  protected txPerSecond: number = 0;
 
-  private vBytesPerSecondArray: VbytesPerSecond[] = [];
-  private vBytesPerSecond: number = 0;
-  private mempoolProtection = 0;
-  private latestTransactions: any[] = [];
+  protected vBytesPerSecondArray: VbytesPerSecond[] = [];
+  protected vBytesPerSecond: number = 0;
+  protected mempoolProtection = 0;
+  protected latestTransactions: any[] = [];
 
   constructor() {
+    this.init();
+  }
+
+  protected init(): void {
     setInterval(this.updateTxPerSecond.bind(this), 1000);
     setInterval(this.deleteExpiredTransactions.bind(this), 20000);
   }
@@ -210,14 +214,14 @@ class Mempool {
     for (const rbfTransaction in rbfTransactions) {
       if (this.mempoolCache[rbfTransaction]) {
         // Store replaced transactions
-        rbfCache.add(rbfTransaction, rbfTransactions[rbfTransaction].txid);
+        rbfCache.add(this.mempoolCache[rbfTransaction], rbfTransactions[rbfTransaction].txid);
         // Erase the replaced transactions from the local mempool
         delete this.mempoolCache[rbfTransaction];
       }
     }
   }
 
-  private updateTxPerSecond() {
+  protected updateTxPerSecond() {
     const nowMinusTimeSpan = new Date().getTime() - (1000 * config.STATISTICS.TX_PER_SECOND_SAMPLE_PERIOD);
     this.txPerSecondArray = this.txPerSecondArray.filter((unixTime) => unixTime > nowMinusTimeSpan);
     this.txPerSecond = this.txPerSecondArray.length / config.STATISTICS.TX_PER_SECOND_SAMPLE_PERIOD || 0;
@@ -230,17 +234,18 @@ class Mempool {
     }
   }
 
-  private deleteExpiredTransactions() {
+  protected deleteExpiredTransactions() {
     const now = new Date().getTime();
     for (const tx in this.mempoolCache) {
       const lazyDeleteAt = this.mempoolCache[tx].deleteAfter;
       if (lazyDeleteAt && lazyDeleteAt < now) {
         delete this.mempoolCache[tx];
+        rbfCache.evict(tx);
       }
     }
   }
 
-  private $getMempoolInfo() {
+  protected $getMempoolInfo() {
     if (config.MEMPOOL.USE_SECOND_NODE_FOR_MINFEE) {
       return Promise.all([
         bitcoinClient.getMempoolInfo(),

backend/src/api/mining/mining.ts

@@ -265,9 +265,9 @@ class Mining {
       }
       await HashratesRepository.$setLatestRun('last_weekly_hashrates_indexing', new Date().getUTCDate());
       if (newlyIndexed > 0) {
-        logger.notice(`Weekly mining pools hashrates indexing completed: indexed ${newlyIndexed}`);
+        logger.notice(`Weekly mining pools hashrates indexing completed: indexed ${newlyIndexed}`, logger.tags.mining);
       } else {
-        logger.debug(`Weekly mining pools hashrates indexing completed: indexed ${newlyIndexed}`);
+        logger.debug(`Weekly mining pools hashrates indexing completed: indexed ${newlyIndexed}`, logger.tags.mining);
       }
       loadingIndicators.setProgress('weekly-hashrate-indexing', 100);
     } catch (e) {
@@ -370,14 +370,14 @@ class Mining {
 
       await HashratesRepository.$setLatestRun('last_hashrates_indexing', new Date().getUTCDate());
       if (newlyIndexed > 0) {
-        logger.notice(`Daily network hashrate indexing completed: indexed ${newlyIndexed} days`);
+        logger.notice(`Daily network hashrate indexing completed: indexed ${newlyIndexed} days`, logger.tags.mining);
       } else {
-        logger.debug(`Daily network hashrate indexing completed: indexed ${newlyIndexed} days`);
+        logger.debug(`Daily network hashrate indexing completed: indexed ${newlyIndexed} days`, logger.tags.mining);
       }
       loadingIndicators.setProgress('daily-hashrate-indexing', 100);
     } catch (e) {
       loadingIndicators.setProgress('daily-hashrate-indexing', 100);
-      logger.err(`Daily network hashrate indexing failed. Trying again in 10 seconds. Reason: ${(e instanceof Error ? e.message : e)}`);
+      logger.err(`Daily network hashrate indexing failed. Trying again in 10 seconds. Reason: ${(e instanceof Error ? e.message : e)}`, logger.tags.mining);
       throw e;
     }
   }
@@ -449,9 +449,9 @@ class Mining {
     }
 
     if (totalIndexed > 0) {
-      logger.notice(`Indexed ${totalIndexed} difficulty adjustments`);
+      logger.notice(`Indexed ${totalIndexed} difficulty adjustments`, logger.tags.mining);
     } else {
-      logger.debug(`Indexed ${totalIndexed} difficulty adjustments`);
+      logger.debug(`Indexed ${totalIndexed} difficulty adjustments`, logger.tags.mining);
     }
   }
 

backend/src/api/pools-parser.ts

@@ -61,7 +61,7 @@ class PoolsParser {
         poolNames.push(poolsDuplicated[i].name);
       }
     }
-    logger.debug(`Found ${poolNames.length} unique mining pools`);
+    logger.debug(`Found ${poolNames.length} unique mining pools`, logger.tags.mining);
 
     // Get existing pools from the db
     let existingPools;
@@ -72,7 +72,7 @@ class PoolsParser {
         existingPools = [];
       }
     } catch (e) {
-      logger.err('Cannot get existing pools from the database, skipping pools.json import');
+      logger.err('Cannot get existing pools from the database, skipping pools.json import', logger.tags.mining);
       return;
     }
 
@@ -99,7 +99,7 @@ class PoolsParser {
         slug = poolsJson['slugs'][poolNames[i]];
       } catch (e) {
         if (this.slugWarnFlag === false) {
-          logger.warn(`pools.json does not seem to contain the 'slugs' object`);
+          logger.warn(`pools.json does not seem to contain the 'slugs' object`, logger.tags.mining);
           this.slugWarnFlag = true;
         }
       }
@@ -107,7 +107,7 @@ class PoolsParser {
       if (slug === undefined) {
         // Only keep alphanumerical
         slug = poolNames[i].replace(/[^a-z0-9]/gi, '').toLowerCase();
-        logger.warn(`No slug found for '${poolNames[i]}', generating it => '${slug}'`);
+        logger.warn(`No slug found for '${poolNames[i]}', generating it => '${slug}'`, logger.tags.mining);
       }
 
       const poolObj = {
@@ -143,9 +143,9 @@ class PoolsParser {
             'addresses': allAddresses,
             'slug': slug
           });
-          logger.debug(`Rename '${poolToRename[0].name}' mining pool to ${poolObj.name}`);
+          logger.debug(`Rename '${poolToRename[0].name}' mining pool to ${poolObj.name}`, logger.tags.mining);
         } else {
-          logger.debug(`Add '${finalPoolName}' mining pool`);
+          logger.debug(`Add '${finalPoolName}' mining pool`, logger.tags.mining);
           finalPoolDataAdd.push(poolObj);
         }
       }
@@ -160,14 +160,14 @@ class PoolsParser {
     }
 
     if (config.DATABASE.ENABLED === false) { // Don't run db operations
-      logger.info('Mining pools.json import completed (no database)');
+      logger.info('Mining pools.json import completed (no database)', logger.tags.mining);
       return;
     }
 
     if (finalPoolDataAdd.length > 0 || finalPoolDataUpdate.length > 0 ||
       finalPoolDataRename.length > 0
     ) {    
-      logger.debug(`Update pools table now`);
+      logger.debug(`Update pools table now`, logger.tags.mining);
 
       // Add new mining pools into the database
       let queryAdd: string = 'INSERT INTO pools(name, link, regexes, addresses, slug) VALUES ';
@@ -217,9 +217,9 @@ class PoolsParser {
           await DB.query({ sql: query, timeout: 120000 });
         }
         await this.insertUnknownPool();
-        logger.info('Mining pools.json import completed');
+        logger.info('Mining pools.json import completed', logger.tags.mining);
       } catch (e) {
-        logger.err(`Cannot import pools in the database`);
+        logger.err(`Cannot import pools in the database`, logger.tags.mining);
         throw e;
       }
     }
@@ -227,7 +227,7 @@ class PoolsParser {
     try {
       await this.insertUnknownPool();
     } catch (e) {
-      logger.err(`Cannot insert unknown pool in the database`);
+      logger.err(`Cannot insert unknown pool in the database`, logger.tags.mining);
       throw e;
     }
   }
@@ -252,7 +252,7 @@ class PoolsParser {
         `);
       }
     } catch (e) {
-      logger.err('Unable to insert "Unknown" mining pool');
+      logger.err('Unable to insert "Unknown" mining pool', logger.tags.mining);
     }
   }
 
@@ -272,17 +272,17 @@ class PoolsParser {
     for (const updatedPool of finalPoolDataUpdate) {
       const [pool]: any[] = await DB.query(`SELECT id, name from pools where slug = "${updatedPool.slug}"`);
       if (pool.length > 0) {
-        logger.notice(`Deleting blocks from ${pool[0].name} mining pool for future re-indexing`);
+        logger.notice(`Deleting blocks from ${pool[0].name} mining pool for future re-indexing`, logger.tags.mining);
         await DB.query(`DELETE FROM blocks WHERE pool_id = ${pool[0].id}`);
       }
     }
 
     // Ignore early days of Bitcoin as there were not mining pool yet
-    logger.notice('Deleting blocks with unknown mining pool from height 130635 for future re-indexing');
+    logger.notice(`Deleting blocks with unknown mining pool from height 130635 for future re-indexing`, logger.tags.mining);
     const [unknownPool] = await DB.query(`SELECT id from pools where slug = "unknown"`);
     await DB.query(`DELETE FROM blocks WHERE pool_id = ${unknownPool[0].id} AND height > 130635`);
 
-    logger.notice('Truncating hashrates for future re-indexing');
+    logger.notice(`Truncating hashrates for future re-indexing`, logger.tags.mining);
     await DB.query(`DELETE FROM hashrates`);
   }
 }

backend/src/api/rbf-cache.ts

@@ -1,31 +1,62 @@
-export interface CachedRbf {
-  txid: string;
-  expires: Date;
-}
+import { TransactionExtended } from "../mempool.interfaces";
 
 class RbfCache {
-  private cache: { [txid: string]: CachedRbf; } = {};
+  private replacedBy: { [txid: string]: string; } = {};
+  private replaces: { [txid: string]: string[] } = {};
+  private txs: { [txid: string]: TransactionExtended } = {};
+  private expiring: { [txid: string]: Date } = {};
 
   constructor() {
     setInterval(this.cleanup.bind(this), 1000 * 60 * 60);
   }
 
-  public add(replacedTxId: string, newTxId: string): void {
-    this.cache[replacedTxId] = {
-      expires: new Date(Date.now() + 1000 * 604800), // 1 week
-      txid: newTxId,
-    };
+  public add(replacedTx: TransactionExtended, newTxId: string): void {
+    this.replacedBy[replacedTx.txid] = newTxId;
+    this.txs[replacedTx.txid] = replacedTx;
+    if (!this.replaces[newTxId]) {
+      this.replaces[newTxId] = [];
+    }
+    this.replaces[newTxId].push(replacedTx.txid);
   }
 
-  public get(txId: string): CachedRbf | undefined {
-    return this.cache[txId];
+  public getReplacedBy(txId: string): string | undefined {
+    return this.replacedBy[txId];
+  }
+
+  public getReplaces(txId: string): string[] | undefined {
+    return this.replaces[txId];
+  }
+
+  public getTx(txId: string): TransactionExtended | undefined {
+    return this.txs[txId];
+  }
+
+  // flag a transaction as removed from the mempool
+  public evict(txid): void {
+    this.expiring[txid] = new Date(Date.now() + 1000 * 86400); // 24 hours
   }
 
   private cleanup(): void {
     const currentDate = new Date();
-    for (const c in this.cache) {
-      if (this.cache[c].expires < currentDate) {
-        delete this.cache[c];
+    for (const txid in this.expiring) {
+      if (this.expiring[txid] < currentDate) {
+        delete this.expiring[txid];
+        this.remove(txid);
+      }
+    }
+  }
+
+  // remove a transaction & all previous versions from the cache
+  private remove(txid): void {
+    // don't remove a transaction while a newer version remains in the mempool
+    if (this.replaces[txid] && !this.replacedBy[txid]) {
+      const replaces = this.replaces[txid];
+      delete this.replaces[txid];
+      for (const tx of replaces) {
+        // recursively remove prior versions from the cache
+        delete this.replacedBy[tx];
+        delete this.txs[tx];
+        this.remove(tx);
       }
     }
   }

backend/src/api/transaction-utils.ts

@@ -1,8 +1,7 @@
-import bitcoinApi from './bitcoin/bitcoin-api-factory';
 import { TransactionExtended, TransactionMinerInfo } from '../mempool.interfaces';
 import { IEsploraApi } from './bitcoin/esplora-api.interface';
-import config from '../config';
 import { Common } from './common';
+import bitcoinApi, { bitcoinCoreApi } from './bitcoin/bitcoin-api-factory';
 
 class TransactionUtils {
   constructor() { }
@@ -21,8 +20,19 @@ class TransactionUtils {
     };
   }
 
-  public async $getTransactionExtended(txId: string, addPrevouts = false, lazyPrevouts = false): Promise<TransactionExtended> {
-    const transaction: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(txId, false, addPrevouts, lazyPrevouts);
+  /**
+   * @param txId 
+   * @param addPrevouts 
+   * @param lazyPrevouts 
+   * @param forceCore - See https://github.com/mempool/mempool/issues/2904
+   */
+  public async $getTransactionExtended(txId: string, addPrevouts = false, lazyPrevouts = false, forceCore = false): Promise<TransactionExtended> {
+    let transaction: IEsploraApi.Transaction;
+    if (forceCore === true) {
+      transaction  = await bitcoinCoreApi.$getRawTransaction(txId, true);
+    } else {
+      transaction  = await bitcoinApi.$getRawTransaction(txId, false, addPrevouts, lazyPrevouts);
+    }
     return this.extendTransaction(transaction);
   }
 

backend/src/api/tx-selection-worker.ts

@@ -1,17 +1,30 @@
 import config from '../config';
 import logger from '../logger';
-import { TransactionExtended, MempoolBlockWithTransactions, AuditTransaction } from '../mempool.interfaces';
+import { ThreadTransaction, MempoolBlockWithTransactions, AuditTransaction } from '../mempool.interfaces';
 import { PairingHeap } from '../utils/pairing-heap';
 import { Common } from './common';
 import { parentPort } from 'worker_threads';
 
+let mempool: { [txid: string]: ThreadTransaction } = {};
+
 if (parentPort) {
-  parentPort.on('message', (params: { mempool: { [txid: string]: TransactionExtended }, blockLimit: number, weightLimit: number | null, condenseRest: boolean}) => {
-    const { mempool, blocks } = makeBlockTemplates(params);
+  parentPort.on('message', (params) => {
+    if (params.type === 'set') {
+      mempool = params.mempool;
+    } else if (params.type === 'update') {
+      params.added.forEach(tx => {
+        mempool[tx.txid] = tx;
+      });
+      params.removed.forEach(txid => {
+        delete mempool[txid];
+      });
+    }
+    
+    const { blocks, clusters } = makeBlockTemplates(mempool);
 
     // return the result to main thread.
     if (parentPort) {
-     parentPort.postMessage({ mempool, blocks });
+     parentPort.postMessage({ blocks, clusters });
     }
   });
 }
@@ -19,35 +32,24 @@ if (parentPort) {
 /*
 * Build projected mempool blocks using an approximation of the transaction selection algorithm from Bitcoin Core
 * (see BlockAssembler in https://github.com/bitcoin/bitcoin/blob/master/src/node/miner.cpp)
-*
-* blockLimit: number of blocks to build in total.
-* weightLimit: maximum weight of transactions to consider using the selection algorithm.
-*              if weightLimit is significantly lower than the mempool size, results may start to diverge from getBlockTemplate 
-* condenseRest: whether to ignore excess transactions or append them to the final block.
 */
-function makeBlockTemplates({ mempool, blockLimit, weightLimit, condenseRest }: { mempool: { [txid: string]: TransactionExtended }, blockLimit: number, weightLimit?: number | null, condenseRest?: boolean | null })
-  : { mempool: { [txid: string]: TransactionExtended }, blocks: MempoolBlockWithTransactions[] } {
+function makeBlockTemplates(mempool: { [txid: string]: ThreadTransaction })
+  : { blocks: ThreadTransaction[][], clusters: { [root: string]: string[] } } {
   const start = Date.now();
   const auditPool: { [txid: string]: AuditTransaction } = {};
   const mempoolArray: AuditTransaction[] = [];
-  const restOfArray: TransactionExtended[] = [];
+  const restOfArray: ThreadTransaction[] = [];
+  const cpfpClusters: { [root: string]: string[] } = {};
   
-  let weight = 0;
-  const maxWeight = weightLimit ? Math.max(4_000_000 * blockLimit, weightLimit) : Infinity;
   // grab the top feerate txs up to maxWeight
   Object.values(mempool).sort((a, b) => b.feePerVsize - a.feePerVsize).forEach(tx => {
-    weight += tx.weight;
-    if (weight >= maxWeight) {
-      restOfArray.push(tx);
-      return;
-    }
     // initializing everything up front helps V8 optimize property access later
     auditPool[tx.txid] = {
       txid: tx.txid,
       fee: tx.fee,
-      size: tx.size,
       weight: tx.weight,
       feePerVsize: tx.feePerVsize,
+      effectiveFeePerVsize: tx.feePerVsize,
       vin: tx.vin,
       relativesSet: false,
       ancestorMap: new Map<string, AuditTransaction>(),
@@ -74,7 +76,7 @@ function makeBlockTemplates({ mempool, blockLimit, weightLimit, condenseRest }:
 
   // Build blocks by greedily choosing the highest feerate package
   // (i.e. the package rooted in the transaction with the best ancestor score)
-  const blocks: MempoolBlockWithTransactions[] = [];
+  const blocks: ThreadTransaction[][] = [];
   let blockWeight = 4000;
   let blockSize = 0;
   let transactions: AuditTransaction[] = [];
@@ -82,7 +84,7 @@ function makeBlockTemplates({ mempool, blockLimit, weightLimit, condenseRest }:
   let overflow: AuditTransaction[] = [];
   let failures = 0;
   let top = 0;
-  while ((top < mempoolArray.length || !modified.isEmpty()) && (condenseRest || blocks.length < blockLimit)) {
+  while ((top < mempoolArray.length || !modified.isEmpty())) {
     // skip invalid transactions
     while (top < mempoolArray.length && (mempoolArray[top].used || mempoolArray[top].modified)) {
       top++;
@@ -107,9 +109,13 @@ function makeBlockTemplates({ mempool, blockLimit, weightLimit, condenseRest }:
       // Check if the package fits into this block
       if (blockWeight + nextTx.ancestorWeight < config.MEMPOOL.BLOCK_WEIGHT_UNITS) {
         const ancestors: AuditTransaction[] = Array.from(nextTx.ancestorMap.values());
-        const descendants: AuditTransaction[] = [];
         // sort ancestors by dependency graph (equivalent to sorting by ascending ancestor count)
         const sortedTxSet = [...ancestors.sort((a, b) => { return (a.ancestorMap.size || 0) - (b.ancestorMap.size || 0); }), nextTx];
+        let isCluster = false;
+        if (sortedTxSet.length > 1) {
+          cpfpClusters[nextTx.txid] = sortedTxSet.map(tx => tx.txid);
+          isCluster = true;
+        }
         const effectiveFeeRate = nextTx.ancestorFee / (nextTx.ancestorWeight / 4);
         const used: AuditTransaction[] = [];
         while (sortedTxSet.length) {
@@ -119,21 +125,9 @@ function makeBlockTemplates({ mempool, blockLimit, weightLimit, condenseRest }:
           ancestor.usedBy = nextTx.txid;
           // update original copy of this tx with effective fee rate & relatives data
           mempoolTx.effectiveFeePerVsize = effectiveFeeRate;
-          mempoolTx.ancestors = sortedTxSet.map((a) => {
-            return {
-              txid: a.txid,
-              fee: a.fee,
-              weight: a.weight,
-            };
-          }).reverse();
-          mempoolTx.descendants = descendants.map((a) => {
-            return {
-              txid: a.txid,
-              fee: a.fee,
-              weight: a.weight,
-            };
-          });
-          descendants.push(ancestor);
+          if (isCluster) {
+            mempoolTx.cpfpRoot = nextTx.txid;
+          }
           mempoolTx.cpfpChecked = true;
           transactions.push(ancestor);
           blockSize += ancestor.size;
@@ -159,10 +153,10 @@ function makeBlockTemplates({ mempool, blockLimit, weightLimit, condenseRest }:
     // this block is full
     const exceededPackageTries = failures > 1000 && blockWeight > (config.MEMPOOL.BLOCK_WEIGHT_UNITS - 4000);
     const queueEmpty = top >= mempoolArray.length && modified.isEmpty();
-    if ((exceededPackageTries || queueEmpty) && (!condenseRest || blocks.length < blockLimit - 1)) {
+    if ((exceededPackageTries || queueEmpty) && blocks.length < 7) {
       // construct this block
       if (transactions.length) {
-        blocks.push(dataToMempoolBlocks(transactions.map(t => mempool[t.txid]), blockSize, blockWeight, blocks.length));
+        blocks.push(transactions.map(t => mempool[t.txid]));
       }
       // reset for the next block
       transactions = [];
@@ -181,55 +175,40 @@ function makeBlockTemplates({ mempool, blockLimit, weightLimit, condenseRest }:
       overflow = [];
     }
   }
-  if (condenseRest) {
-    // pack any leftover transactions into the last block
-    for (const tx of overflow) {
-      if (!tx || tx?.used) {
-        continue;
-      }
-      blockWeight += tx.weight;
-      blockSize += tx.size;
-      const mempoolTx = mempool[tx.txid];
-      // update original copy of this tx with effective fee rate & relatives data
-      mempoolTx.effectiveFeePerVsize = tx.score;
-      mempoolTx.ancestors = (Array.from(tx.ancestorMap?.values()) as AuditTransaction[]).map((a) => {
-        return {
-          txid: a.txid,
-          fee: a.fee,
-          weight: a.weight,
-        };
-      });
-      mempoolTx.bestDescendant = null;
-      mempoolTx.cpfpChecked = true;
-      transactions.push(tx);
-      tx.used = true;
+  // pack any leftover transactions into the last block
+  for (const tx of overflow) {
+    if (!tx || tx?.used) {
+      continue;
     }
-    const blockTransactions = transactions.map(t => mempool[t.txid]);
-    restOfArray.forEach(tx => {
-      blockWeight += tx.weight;
-      blockSize += tx.size;
-      tx.effectiveFeePerVsize = tx.feePerVsize;
-      tx.cpfpChecked = false;
-      tx.ancestors = [];
-      tx.bestDescendant = null;
-      blockTransactions.push(tx);
-    });
-    if (blockTransactions.length) {
-      blocks.push(dataToMempoolBlocks(blockTransactions, blockSize, blockWeight, blocks.length));
+    blockWeight += tx.weight;
+    const mempoolTx = mempool[tx.txid];
+    // update original copy of this tx with effective fee rate & relatives data
+    mempoolTx.effectiveFeePerVsize = tx.score;
+    if (tx.ancestorMap.size > 0) {
+      cpfpClusters[tx.txid] = Array.from(tx.ancestorMap?.values()).map(a => a.txid);
+      mempoolTx.cpfpRoot = tx.txid;
     }
-    transactions = [];
-  } else if (transactions.length) {
-    blocks.push(dataToMempoolBlocks(transactions.map(t => mempool[t.txid]), blockSize, blockWeight, blocks.length));
+    mempoolTx.cpfpChecked = true;
+    transactions.push(tx);
+    tx.used = true;
   }
+  const blockTransactions = transactions.map(t => mempool[t.txid]);
+  restOfArray.forEach(tx => {
+    blockWeight += tx.weight;
+    tx.effectiveFeePerVsize = tx.feePerVsize;
+    tx.cpfpChecked = false;
+    blockTransactions.push(tx);
+  });
+  if (blockTransactions.length) {
+    blocks.push(blockTransactions);
+  }
+  transactions = [];
 
   const end = Date.now();
   const time = end - start;
   logger.debug('Mempool templates calculated in ' + time / 1000 + ' seconds');
 
-  return {
-    mempool,
-    blocks
-  };
+  return { blocks, clusters: cpfpClusters };
 }
 
 // traverse in-mempool ancestors
@@ -239,9 +218,9 @@ function setRelatives(
   mempool: { [txid: string]: AuditTransaction },
 ): void {
   for (const parent of tx.vin) {
-    const parentTx = mempool[parent.txid];
-    if (parentTx && !tx.ancestorMap?.has(parent.txid)) {
-      tx.ancestorMap.set(parent.txid, parentTx);
+    const parentTx = mempool[parent];
+    if (parentTx && !tx.ancestorMap?.has(parent)) {
+      tx.ancestorMap.set(parent, parentTx);
       parentTx.children.add(tx);
       // visit each node only once
       if (!parentTx.relativesSet) {
@@ -312,27 +291,4 @@ function updateDescendants(
       });
     }
   }
-}
-
-function dataToMempoolBlocks(transactions: TransactionExtended[],
-  blockSize: number, blockWeight: number, blocksIndex: number): MempoolBlockWithTransactions {
-  let rangeLength = 4;
-  if (blocksIndex === 0) {
-    rangeLength = 8;
-  }
-  if (transactions.length > 4000) {
-    rangeLength = 6;
-  } else if (transactions.length > 10000) {
-    rangeLength = 8;
-  }
-  return {
-    blockSize: blockSize,
-    blockVSize: blockWeight / 4,
-    nTx: transactions.length,
-    totalFees: transactions.reduce((acc, cur) => acc + cur.fee, 0),
-    medianFee: Common.percentile(transactions.map((tx) => tx.effectiveFeePerVsize), config.MEMPOOL.RECOMMENDED_FEE_PERCENTILE),
-    feeRange: Common.getFeesInRange(transactions, rangeLength),
-    transactionIds: transactions.map((tx) => tx.txid),
-    transactions: transactions.map((tx) => Common.stripTransaction(tx)),
-  };
 }

backend/src/api/websocket-handler.ts

@@ -58,10 +58,10 @@ class WebsocketHandler {
               client['track-tx'] = parsedMessage['track-tx'];
               // Client is telling the transaction wasn't found
               if (parsedMessage['watch-mempool']) {
-                const rbfCacheTx = rbfCache.get(client['track-tx']);
-                if (rbfCacheTx) {
+                const rbfCacheTxid = rbfCache.getReplacedBy(client['track-tx']);
+                if (rbfCacheTxid) {
                   response['txReplaced'] = {
-                    txid: rbfCacheTx.txid,
+                    txid: rbfCacheTxid,
                   };
                   client['track-tx'] = null;
                 } else {
@@ -251,7 +251,7 @@ class WebsocketHandler {
     }
 
     if (config.MEMPOOL.ADVANCED_GBT_MEMPOOL) {
-      await mempoolBlocks.makeBlockTemplates(newMempool, 8, null, true);
+      await mempoolBlocks.updateBlockTemplates(newMempool, newTransactions, deletedTransactions.map(tx => tx.txid));
     } else {
       mempoolBlocks.updateMempoolBlocks(newMempool);
     }
@@ -419,7 +419,7 @@ class WebsocketHandler {
     const _memPool = memPool.getMempool();
 
     if (config.MEMPOOL.ADVANCED_GBT_AUDIT) {
-      await mempoolBlocks.makeBlockTemplates(_memPool, 2);
+      await mempoolBlocks.makeBlockTemplates(_memPool);
     } else {
       mempoolBlocks.updateMempoolBlocks(_memPool);
     }
@@ -462,13 +462,16 @@ class WebsocketHandler {
       }
     }
 
+    const removed: string[] = [];
     // Update mempool to remove transactions included in the new block
     for (const txId of txIds) {
       delete _memPool[txId];
+      removed.push(txId);
+      rbfCache.evict(txId);
     }
 
     if (config.MEMPOOL.ADVANCED_GBT_MEMPOOL) {
-      await mempoolBlocks.makeBlockTemplates(_memPool, 8, null, true);
+      await mempoolBlocks.updateBlockTemplates(_memPool, [], removed);
     } else {
       mempoolBlocks.updateMempoolBlocks(_memPool);
     }

backend/src/config.ts

@@ -31,7 +31,8 @@ interface IConfig {
     POOLS_JSON_TREE_URL: string,
     ADVANCED_GBT_AUDIT: boolean;
     ADVANCED_GBT_MEMPOOL: boolean;
-    TRANSACTION_INDEXING: boolean;
+    CPFP_INDEXING: boolean;
+    RBF_DUAL_NODE: boolean;
   };
   ESPLORA: {
     REST_API_URL: string;
@@ -152,7 +153,8 @@ const defaults: IConfig = {
     'POOLS_JSON_TREE_URL': 'https://api.github.com/repos/mempool/mining-pools/git/trees/master',
     'ADVANCED_GBT_AUDIT': false,
     'ADVANCED_GBT_MEMPOOL': false,
-    'TRANSACTION_INDEXING': false,
+    'CPFP_INDEXING': false,
+    'RBF_DUAL_NODE': false,
   },
   'ESPLORA': {
     'REST_API_URL': 'http://127.0.0.1:3000',

backend/src/index.ts

@@ -17,6 +17,7 @@ import logger from './logger';
 import backendInfo from './api/backend-info';
 import loadingIndicators from './api/loading-indicators';
 import mempool from './api/mempool';
+import altMempool from './api/alt-mempool';
 import elementsParser from './api/liquid/elements-parser';
 import databaseMigration from './api/database-migration';
 import syncAssets from './sync-assets';
@@ -170,6 +171,9 @@ class Server {
       await poolsUpdater.updatePoolsJson();
       await blocks.$updateBlocks();
       await memPool.$updateMempool();
+      if (config.MEMPOOL.RBF_DUAL_NODE) {
+        await altMempool.$updateMempool();
+      }
       indexer.$run();
 
       setTimeout(this.runMainUpdateLoop.bind(this), config.MEMPOOL.POLL_RATE_MS);

backend/src/logger.ts

@@ -32,22 +32,27 @@ class Logger {
     local7: 23
   };
 
+  public tags = {
+    mining: 'Mining',
+    ln: 'Lightning',
+  };  
+
   // @ts-ignore
-  public emerg: ((msg: string) => void);
+  public emerg: ((msg: string, tag?: string) => void);
   // @ts-ignore
-  public alert: ((msg: string) => void);
+  public alert: ((msg: string, tag?: string) => void);
   // @ts-ignore
-  public crit: ((msg: string) => void);
+  public crit: ((msg: string, tag?: string) => void);
   // @ts-ignore
-  public err: ((msg: string) => void);
+  public err: ((msg: string, tag?: string) => void);
   // @ts-ignore
-  public warn: ((msg: string) => void);
+  public warn: ((msg: string, tag?: string) => void);
   // @ts-ignore
-  public notice: ((msg: string) => void);
+  public notice: ((msg: string, tag?: string) => void);
   // @ts-ignore
-  public info: ((msg: string) => void);
+  public info: ((msg: string, tag?: string) => void);
   // @ts-ignore
-  public debug: ((msg: string) => void);
+  public debug: ((msg: string, tag?: string) => void);
 
   private name = 'mempool';
   private client: dgram.Socket;
@@ -66,8 +71,8 @@ class Logger {
 
   private addprio(prio): void {
     this[prio] = (function(_this) {
-      return function(msg) {
-        return _this.msg(prio, msg);
+      return function(msg, tag?: string) {
+        return _this.msg(prio, msg, tag);
       };
     })(this);
   }
@@ -85,7 +90,7 @@ class Logger {
     return '';
   }
 
-  private msg(priority, msg) {
+  private msg(priority, msg, tag?: string) {
     let consolemsg, prionum, syslogmsg;
     if (typeof msg === 'string' && msg.length > 0) {
       while (msg[msg.length - 1].charCodeAt(0) === 10) {
@@ -94,10 +99,10 @@ class Logger {
     }
     const network = this.network ? ' <' + this.network + '>' : '';
     prionum = Logger.priorities[priority] || Logger.priorities.info;
-    consolemsg = `${this.ts()} [${process.pid}] ${priority.toUpperCase()}:${network} ${msg}`;
+    consolemsg = `${this.ts()} [${process.pid}] ${priority.toUpperCase()}:${network} ${tag ? '[' + tag + '] ' : ''}${msg}`;
 
     if (config.SYSLOG.ENABLED && Logger.priorities[priority] <= Logger.priorities[config.SYSLOG.MIN_PRIORITY]) {
-      syslogmsg = `<${(Logger.facilities[config.SYSLOG.FACILITY] * 8 + prionum)}> ${this.name}[${process.pid}]: ${priority.toUpperCase()}${network} ${msg}`;
+      syslogmsg = `<${(Logger.facilities[config.SYSLOG.FACILITY] * 8 + prionum)}> ${this.name}[${process.pid}]: ${priority.toUpperCase()}${network} ${tag ? '[' + tag + '] ' : ''}${msg}`;
       this.syslog(syslogmsg);
     }
     if (Logger.priorities[priority] > Logger.priorities[config.MEMPOOL.STDOUT_LOG_MIN_PRIORITY]) {

backend/src/mempool.interfaces.ts

@@ -81,10 +81,10 @@ export interface TransactionExtended extends IEsploraApi.Transaction {
 export interface AuditTransaction {
   txid: string;
   fee: number;
-  size: number;
   weight: number;
   feePerVsize: number;
-  vin: IEsploraApi.Vin[];
+  effectiveFeePerVsize: number;
+  vin: string[];
   relativesSet: boolean;
   ancestorMap: Map<string, AuditTransaction>;
   children: Set<AuditTransaction>;
@@ -96,6 +96,17 @@ export interface AuditTransaction {
   modifiedNode: HeapNode<AuditTransaction>;
 }
 
+export interface ThreadTransaction {
+  txid: string;
+  fee: number;
+  weight: number;
+  feePerVsize: number;
+  effectiveFeePerVsize?: number;
+  vin: string[];
+  cpfpRoot?: string;
+  cpfpChecked?: boolean;
+}
+
 export interface Ancestor {
   txid: string;
   weight: number;
@@ -263,6 +274,7 @@ export interface IBackendInfo {
   hostname: string;
   gitCommit: string;
   version: string;
+  lightning: boolean;
 }
 
 export interface IDifficultyAdjustment {
@@ -326,4 +338,4 @@ export interface IOldestNodes {
   updatedAt?: number,
   city?: any,
   country?: any,
-}
+}

backend/src/repositories/BlocksRepository.ts

@@ -8,6 +8,8 @@ import HashratesRepository from './HashratesRepository';
 import { escape } from 'mysql2';
 import BlocksSummariesRepository from './BlocksSummariesRepository';
 import DifficultyAdjustmentsRepository from './DifficultyAdjustmentsRepository';
+import bitcoinClient from '../api/bitcoin/bitcoin-client';
+import config from '../config';
 
 class BlocksRepository {
   /**
@@ -667,16 +669,32 @@ class BlocksRepository {
    */
    public async $getCPFPUnindexedBlocks(): Promise<any[]> {
     try {
-      const [rows]: any = await DB.query(`SELECT height, hash FROM blocks WHERE cpfp_indexed = 0 ORDER BY height DESC`);
-      return rows;
+      const blockchainInfo = await bitcoinClient.getBlockchainInfo();
+      const currentBlockHeight = blockchainInfo.blocks;
+      let indexingBlockAmount = Math.min(config.MEMPOOL.INDEXING_BLOCKS_AMOUNT, currentBlockHeight);
+      if (indexingBlockAmount <= -1) {
+        indexingBlockAmount = currentBlockHeight + 1;
+      }
+      const minHeight = Math.max(0, currentBlockHeight - indexingBlockAmount + 1);
+
+      const [rows]: any[] = await DB.query(`
+        SELECT height
+        FROM compact_cpfp_clusters
+        WHERE height <= ? AND height >= ?
+        ORDER BY height DESC;
+      `, [currentBlockHeight, minHeight]);
+
+      const indexedHeights = {};
+      rows.forEach((row) => { indexedHeights[row.height] = true; });
+      const allHeights: number[] = Array.from(Array(currentBlockHeight - minHeight + 1).keys(), n => n + minHeight).reverse();
+      const unindexedHeights = allHeights.filter(x => !indexedHeights[x]);
+
+      return unindexedHeights;
     } catch (e) {
       logger.err('Cannot fetch CPFP unindexed blocks. Reason: ' + (e instanceof Error ? e.message : e));
       throw e;
     }
-  }
-
-  public async $setCPFPIndexed(hash: string): Promise<void> {
-    await DB.query(`UPDATE blocks SET cpfp_indexed = 1 WHERE hash = ?`, [hash]);
+    return [];
   }
 
   /**

backend/src/repositories/CpfpRepository.ts

@@ -1,34 +1,151 @@
+import cluster, { Cluster } from 'cluster';
+import { RowDataPacket } from 'mysql2';
 import DB from '../database';
 import logger from '../logger';
 import { Ancestor } from '../mempool.interfaces';
+import transactionRepository from '../repositories/TransactionRepository';
 
 class CpfpRepository {
-  public async $saveCluster(height: number, txs: Ancestor[], effectiveFeePerVsize: number): Promise<void> {
+  public async $saveCluster(clusterRoot: string, height: number, txs: Ancestor[], effectiveFeePerVsize: number): Promise<boolean> {
+    if (!txs[0]) {
+      return false;
+    }
+    // skip clusters of transactions with the same fees
+    const roundedEffectiveFee = Math.round(effectiveFeePerVsize * 100) / 100;
+    const equalFee = txs.reduce((acc, tx) => {
+      return (acc && Math.round(((tx.fee || 0) / (tx.weight / 4)) * 100) / 100 === roundedEffectiveFee);
+    }, true);
+    if (equalFee) {
+      return false;
+    }
+
     try {
-      const txsJson = JSON.stringify(txs);
+      const packedTxs = Buffer.from(this.pack(txs));
       await DB.query(
         `
-          INSERT INTO cpfp_clusters(root, height, txs, fee_rate)
-          VALUE (?, ?, ?, ?)
+          INSERT INTO compact_cpfp_clusters(root, height, txs, fee_rate)
+          VALUE (UNHEX(?), ?, ?, ?)
           ON DUPLICATE KEY UPDATE
             height = ?,
             txs = ?,
             fee_rate = ?
         `,
-        [txs[0].txid, height, txsJson, effectiveFeePerVsize, height, txsJson, effectiveFeePerVsize, height]
+        [clusterRoot, height, packedTxs, effectiveFeePerVsize, height, packedTxs, effectiveFeePerVsize]
       );
+      const maxChunk = 10;
+      let chunkIndex = 0;
+      while (chunkIndex < txs.length) {
+        const chunk = txs.slice(chunkIndex, chunkIndex + maxChunk).map(tx => {
+          return { txid: tx.txid, cluster: clusterRoot };
+        });
+        await transactionRepository.$batchSetCluster(chunk);
+        chunkIndex += maxChunk;
+      }
+      return true;
     } catch (e: any) {
       logger.err(`Cannot save cpfp cluster into db. Reason: ` + (e instanceof Error ? e.message : e));
       throw e;
     }
   }
 
+  public async $batchSaveClusters(clusters: { root: string, height: number, txs: any, effectiveFeePerVsize: number}[]): Promise<boolean> {
+    try {
+      const clusterValues: any[] = [];
+      const txs: any[] = [];
+
+      for (const cluster of clusters) {
+        if (cluster.txs?.length > 1) {
+          const roundedEffectiveFee = Math.round(cluster.effectiveFeePerVsize * 100) / 100;
+          const equalFee = cluster.txs.reduce((acc, tx) => {
+            return (acc && Math.round(((tx.fee || 0) / (tx.weight / 4)) * 100) / 100 === roundedEffectiveFee);
+          }, true);
+          if (!equalFee) {
+            clusterValues.push([
+              cluster.root,
+              cluster.height,
+              Buffer.from(this.pack(cluster.txs)),
+              cluster.effectiveFeePerVsize
+            ]);
+            for (const tx of cluster.txs) {
+              txs.push({ txid: tx.txid, cluster: cluster.root });
+            }
+          }
+        }
+      }
+
+      if (!clusterValues.length) {
+        return false;
+      }
+
+      const maxChunk = 100;
+      let chunkIndex = 0;
+      // insert transactions in batches of up to 100 rows
+      while (chunkIndex < txs.length) {
+        const chunk = txs.slice(chunkIndex, chunkIndex + maxChunk);
+        await transactionRepository.$batchSetCluster(chunk);
+        chunkIndex += maxChunk;
+      }
+
+      chunkIndex = 0;
+      // insert clusters in batches of up to 100 rows
+      while (chunkIndex < clusterValues.length) {
+        const chunk = clusterValues.slice(chunkIndex, chunkIndex + maxChunk);
+        let query = `
+            INSERT IGNORE INTO compact_cpfp_clusters(root, height, txs, fee_rate)
+            VALUES
+        `;
+        query += chunk.map(chunk => {
+          return (' (UNHEX(?), ?, ?, ?)');
+        }) + ';';
+        const values = chunk.flat();
+        await DB.query(
+          query,
+          values
+        );
+        chunkIndex += maxChunk;
+      }
+      return true;
+    } catch (e: any) {
+      logger.err(`Cannot save cpfp clusters into db. Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
+  public async $getCluster(clusterRoot: string): Promise<Cluster> {
+    const [clusterRows]: any = await DB.query(
+      `
+        SELECT *
+        FROM compact_cpfp_clusters
+        WHERE root = UNHEX(?)
+      `,
+      [clusterRoot]
+    );
+    const cluster = clusterRows[0];
+    cluster.txs = this.unpack(cluster.txs);
+    return cluster;
+  }
+
   public async $deleteClustersFrom(height: number): Promise<void> {
     logger.info(`Delete newer cpfp clusters from height ${height} from the database`);
     try {
+      const [rows] = await DB.query(
+        `
+          SELECT txs, height, root from compact_cpfp_clusters
+          WHERE height >= ?
+        `,
+        [height]
+      ) as RowDataPacket[][];
+      if (rows?.length) {
+        for (let clusterToDelete of rows) {
+          const txs = this.unpack(clusterToDelete.txs);
+          for (let tx of txs) {
+            await transactionRepository.$removeTransaction(tx.txid);
+          }
+        }
+      }
       await DB.query(
         `
-          DELETE from cpfp_clusters
+          DELETE from compact_cpfp_clusters
           WHERE height >= ?
         `,
         [height]
@@ -38,6 +155,70 @@ class CpfpRepository {
       throw e;
     }
   }
+
+  // insert a dummy row to mark that we've indexed as far as this block
+  public async $insertProgressMarker(height: number): Promise<void> {
+    try {
+      const [rows]: any = await DB.query(
+        `
+          SELECT root
+          FROM compact_cpfp_clusters
+          WHERE height = ?
+        `,
+        [height]
+      );
+      if (!rows?.length) {
+        const rootBuffer = Buffer.alloc(32);
+        rootBuffer.writeInt32LE(height);
+        await DB.query(
+          `
+            INSERT INTO compact_cpfp_clusters(root, height, fee_rate)
+            VALUE (?, ?, ?)
+          `,
+          [rootBuffer, height, 0]
+        );
+      }
+    } catch (e: any) {
+      logger.err(`Cannot insert cpfp progress marker. Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
+  public pack(txs: Ancestor[]): ArrayBuffer {
+    const buf = new ArrayBuffer(44 * txs.length);
+    const view = new DataView(buf);
+    txs.forEach((tx, i) => {
+      const offset = i * 44;
+      for (let x = 0; x < 32; x++) {
+        // store txid in little-endian
+        view.setUint8(offset + (31 - x), parseInt(tx.txid.slice(x * 2, (x * 2) + 2), 16));
+      }
+      view.setUint32(offset + 32, tx.weight);
+      view.setBigUint64(offset + 36, BigInt(Math.round(tx.fee)));
+    });
+    return buf;
+  }
+
+  public unpack(buf: Buffer): Ancestor[] {
+    if (!buf) {
+      return [];
+    }
+
+    const arrayBuffer = buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength);
+    const txs: Ancestor[] = [];
+    const view = new DataView(arrayBuffer);
+    for (let offset = 0; offset < arrayBuffer.byteLength; offset += 44) {
+      const txid = Array.from(new Uint8Array(arrayBuffer, offset, 32)).reverse().map(b => b.toString(16).padStart(2, '0')).join('');
+      const weight = view.getUint32(offset + 32);
+      const fee = Number(view.getBigUint64(offset + 36));
+      txs.push({
+        txid,
+        weight,
+        fee
+      });
+    }
+    return txs;
+  }
 }
 
 export default new CpfpRepository();

backend/src/repositories/TransactionRepository.ts

@@ -1,6 +1,7 @@
 import DB from '../database';
 import logger from '../logger';
 import { Ancestor, CpfpInfo } from '../mempool.interfaces';
+import cpfpRepository from './CpfpRepository';
 
 interface CpfpSummary {
   txid: string;
@@ -12,20 +13,20 @@ interface CpfpSummary {
 }
 
 class TransactionRepository {
-  public async $setCluster(txid: string, cluster: string): Promise<void> {
+  public async $setCluster(txid: string, clusterRoot: string): Promise<void> {
     try {
       await DB.query(
         `
-          INSERT INTO transactions
+          INSERT INTO compact_transactions
           (
             txid,
             cluster
           )
-          VALUE (?, ?)
+          VALUE (UNHEX(?), UNHEX(?))
           ON DUPLICATE KEY UPDATE
-            cluster = ?
+            cluster = UNHEX(?)
         ;`,
-        [txid, cluster, cluster]
+        [txid, clusterRoot, clusterRoot]
       );
     } catch (e: any) {
       logger.err(`Cannot save transaction cpfp cluster into db. Reason: ` + (e instanceof Error ? e.message : e));
@@ -33,18 +34,45 @@ class TransactionRepository {
     }
   }
 
-  public async $getCpfpInfo(txid: string): Promise<CpfpInfo | void> {
+  public async $batchSetCluster(txs): Promise<void> {
     try {
       let query = `
-        SELECT *
-        FROM transactions
-        LEFT JOIN cpfp_clusters AS cluster ON cluster.root = transactions.cluster
-        WHERE transactions.txid = ?
+          INSERT IGNORE INTO compact_transactions
+          (
+            txid,
+            cluster
+          )
+          VALUES
       `;
-      const [rows]: any = await DB.query(query, [txid]);
-      if (rows.length) {
-        rows[0].txs = JSON.parse(rows[0].txs) as Ancestor[];
-        return this.convertCpfp(rows[0]);
+      query += txs.map(tx => {
+        return (' (UNHEX(?), UNHEX(?))');
+      }) + ';';
+      const values = txs.map(tx => [tx.txid, tx.cluster]).flat();
+      await DB.query(
+        query,
+        values
+      );
+    } catch (e: any) {
+      logger.err(`Cannot save cpfp transactions into db. Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
+  public async $getCpfpInfo(txid: string): Promise<CpfpInfo | void> {
+    try {
+      const [txRows]: any = await DB.query(
+        `
+          SELECT HEX(txid) as id, HEX(cluster) as root
+          FROM compact_transactions
+          WHERE txid = UNHEX(?)
+        `,
+        [txid]
+      );
+      if (txRows.length && txRows[0].root != null) {
+        const txid = txRows[0].id.toLowerCase();
+        const clusterId = txRows[0].root.toLowerCase();
+        const cluster = await cpfpRepository.$getCluster(clusterId);
+        return this.convertCpfp(txid, cluster);
       }
     } catch (e) {
       logger.err('Cannot get transaction cpfp info from db. Reason: ' + (e instanceof Error ? e.message : e));
@@ -52,12 +80,23 @@ class TransactionRepository {
     }
   }
 
-  private convertCpfp(cpfp: CpfpSummary): CpfpInfo {
+  public async $removeTransaction(txid: string): Promise<void> {
+    await DB.query(
+      `
+        DELETE FROM compact_transactions
+        WHERE txid = UNHEX(?)
+      `,
+      [txid]
+    );
+  }
+
+  private convertCpfp(txid, cluster): CpfpInfo {
     const descendants: Ancestor[] = [];
     const ancestors: Ancestor[] = [];
     let matched = false;
-    for (const tx of cpfp.txs) {
-      if (tx.txid === cpfp.txid) {
+
+    for (const tx of cluster.txs) {
+      if (tx.txid === txid) {
         matched = true;
       } else if (!matched) {
         descendants.push(tx);
@@ -68,7 +107,6 @@ class TransactionRepository {
     return {
       descendants,
       ancestors,
-      effectiveFeePerVsize: cpfp.fee_rate
     };
   }
 }

backend/src/tasks/lightning/network-sync.service.ts

@@ -23,7 +23,7 @@ class NetworkSyncService {
   constructor() {}
 
   public async $startService(): Promise<void> {
-    logger.info('Starting lightning network sync service');
+    logger.info(`Starting lightning network sync service`, logger.tags.ln);
 
     this.loggerTimer = new Date().getTime() / 1000;
 
@@ -33,11 +33,11 @@ class NetworkSyncService {
   private async $runTasks(): Promise<void> {
     const taskStartTime = Date.now();
     try {
-      logger.info(`Updating nodes and channels`);
+      logger.debug(`Updating nodes and channels`, logger.tags.ln);
 
       const networkGraph = await lightningApi.$getNetworkGraph();
       if (networkGraph.nodes.length === 0 || networkGraph.edges.length === 0) {
-        logger.info(`LN Network graph is empty, retrying in 10 seconds`);
+        logger.info(`LN Network graph is empty, retrying in 10 seconds`, logger.tags.ln);
         setTimeout(() => { this.$runTasks(); }, 10000);
         return;
       }
@@ -55,7 +55,7 @@ class NetworkSyncService {
       }
 
     } catch (e) {
-      logger.err('$runTasks() error: ' + (e instanceof Error ? e.message : e));
+      logger.err(`$runTasks() error: ${e instanceof Error ? e.message : e}`, logger.tags.ln);
     }
 
     setTimeout(() => { this.$runTasks(); }, Math.max(1, (1000 * config.LIGHTNING.GRAPH_REFRESH_INTERVAL) - (Date.now() - taskStartTime)));
@@ -79,8 +79,8 @@ class NetworkSyncService {
       ++progress;
 
       const elapsedSeconds = Math.round((new Date().getTime() / 1000) - this.loggerTimer);
-      if (elapsedSeconds > 10) {
-        logger.info(`Updating node ${progress}/${nodes.length}`);
+      if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
+        logger.debug(`Updating node ${progress}/${nodes.length}`, logger.tags.ln);
         this.loggerTimer = new Date().getTime() / 1000;
       }
 
@@ -106,7 +106,7 @@ class NetworkSyncService {
         deletedRecords += await NodeRecordsRepository.$deleteUnusedRecords(node.pub_key, customRecordTypes);
       }
     }
-    logger.info(`${progress} nodes updated. ${deletedSockets} sockets deleted. ${deletedRecords} custom records deleted.`);
+    logger.debug(`${progress} nodes updated. ${deletedSockets} sockets deleted. ${deletedRecords} custom records deleted.`);
 
     // If a channel if not present in the graph, mark it as inactive
     await nodesApi.$setNodesInactive(graphNodesPubkeys);
@@ -138,18 +138,18 @@ class NetworkSyncService {
         ++progress;
 
         const elapsedSeconds = Math.round((new Date().getTime() / 1000) - this.loggerTimer);
-        if (elapsedSeconds > 10) {
-          logger.info(`Updating channel ${progress}/${channels.length}`);
+        if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
+          logger.debug(`Updating channel ${progress}/${channels.length}`, logger.tags.ln);
           this.loggerTimer = new Date().getTime() / 1000;
         }
       }
 
-      logger.info(`${progress} channels updated`);
+      logger.debug(`${progress} channels updated`, logger.tags.ln);
 
       // If a channel if not present in the graph, mark it as inactive
       await channelsApi.$setChannelsInactive(graphChannelsIds);
     } catch (e) {
-      logger.err(`Cannot update channel list. Reason: ${(e instanceof Error ? e.message : e)}`);
+      logger.err(` Cannot update channel list. Reason: ${(e instanceof Error ? e.message : e)}`, logger.tags.ln);
     }
   }
 
@@ -184,26 +184,28 @@ class NetworkSyncService {
         if (lowest < node.first_seen) {
           const query = `UPDATE nodes SET first_seen = FROM_UNIXTIME(?) WHERE public_key = ?`;
           const params = [lowest, node.public_key];
+          ++updated;
           await DB.query(query, params);
         }
         ++progress;
         const elapsedSeconds = Math.round((new Date().getTime() / 1000) - this.loggerTimer);
-        if (elapsedSeconds > 10) {
-          logger.info(`Updating node first seen date ${progress}/${nodes.length}`);
+        if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
+          logger.debug(`Updating node first seen date ${progress}/${nodes.length}`, logger.tags.ln);
           this.loggerTimer = new Date().getTime() / 1000;
-          ++updated;
         }
       }
-      logger.info(`Updated ${updated} node first seen dates`);
+      if (updated > 0) {
+        logger.debug(`Updated ${updated} node first seen dates`, logger.tags.ln);
+      }
     } catch (e) {
-      logger.err('$updateNodeFirstSeen() error: ' + (e instanceof Error ? e.message : e));
+      logger.err(`$updateNodeFirstSeen() error: ${e instanceof Error ? e.message : e}`, logger.tags.ln);
     }
   }
 
   private async $lookUpCreationDateFromChain(): Promise<void> {
     let progress = 0;
 
-    logger.info(`Running channel creation date lookup`);
+    logger.debug(`Running channel creation date lookup`, logger.tags.ln);
     try {
       const channels = await channelsApi.$getChannelsWithoutCreatedDate();
       for (const channel of channels) {
@@ -214,14 +216,17 @@ class NetworkSyncService {
         );
         ++progress;
         const elapsedSeconds = Math.round((new Date().getTime() / 1000) - this.loggerTimer);
-        if (elapsedSeconds > 10) {
-          logger.info(`Updating channel creation date ${progress}/${channels.length}`);
+        if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
+          logger.debug(`Updating channel creation date ${progress}/${channels.length}`, logger.tags.ln);
           this.loggerTimer = new Date().getTime() / 1000;
         }
       }
-      logger.info(`Updated ${channels.length} channels' creation date`);
+
+      if (channels.length > 0) {
+        logger.debug(`Updated ${channels.length} channels' creation date`, logger.tags.ln);
+      }      
     } catch (e) {
-      logger.err('$lookUpCreationDateFromChain() error: ' + (e instanceof Error ? e.message : e));
+      logger.err(`$lookUpCreationDateFromChain() error: ${e instanceof Error ? e.message : e}`, logger.tags.ln);
     }
   }
 
@@ -230,7 +235,7 @@ class NetworkSyncService {
    * mark that channel as inactive
    */
   private async $deactivateChannelsWithoutActiveNodes(): Promise<void> {
-    logger.info(`Find channels which nodes are offline`);
+    logger.debug(`Find channels which nodes are offline`, logger.tags.ln);
 
     try {
       const result = await DB.query<ResultSetHeader>(`
@@ -253,12 +258,10 @@ class NetworkSyncService {
         `);
 
       if (result[0].changedRows ?? 0 > 0) {
-        logger.info(`Marked ${result[0].changedRows} channels as inactive because they are not linked to any active node`);
-      } else {
-        logger.debug(`Marked ${result[0].changedRows} channels as inactive because they are not linked to any active node`);
+        logger.debug(`Marked ${result[0].changedRows} channels as inactive because they are not linked to any active node`, logger.tags.ln);
       }
     } catch (e) {
-      logger.err('$deactivateChannelsWithoutActiveNodes() error: ' + (e instanceof Error ? e.message : e));
+      logger.err(`$deactivateChannelsWithoutActiveNodes() error: ${e instanceof Error ? e.message : e}`, logger.tags.ln);
     }
   }
 
@@ -277,13 +280,13 @@ class NetworkSyncService {
       } else {
         log += ` for the first time`;
       }
-      logger.info(log);
+      logger.info(`${log}`, logger.tags.ln);
 
       const channels = await channelsApi.$getChannelsByStatus([0, 1]);
       for (const channel of channels) {
         const spendingTx = await bitcoinApi.$getOutspend(channel.transaction_id, channel.transaction_vout);
         if (spendingTx.spent === true && spendingTx.status?.confirmed === true) {
-          logger.debug('Marking channel: ' + channel.id + ' as closed.');
+          logger.debug(`Marking channel: ${channel.id} as closed.`, logger.tags.ln);
           await DB.query(`UPDATE channels SET status = 2, closing_date = FROM_UNIXTIME(?) WHERE id = ?`,
             [spendingTx.status.block_time, channel.id]);
           if (spendingTx.txid && !channel.closing_transaction_id) {
@@ -293,16 +296,16 @@ class NetworkSyncService {
 
         ++progress;
         const elapsedSeconds = Math.round((new Date().getTime() / 1000) - this.loggerTimer);
-        if (elapsedSeconds > 10) {
-          logger.info(`Checking if channel has been closed ${progress}/${channels.length}`);
+        if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
+          logger.info(`Checking if channel has been closed ${progress}/${channels.length}`, logger.tags.ln);
           this.loggerTimer = new Date().getTime() / 1000;
         }
       }
 
       this.closedChannelsScanBlock = blocks.getCurrentBlockHeight();
-      logger.info(`Closed channels scan completed at block ${this.closedChannelsScanBlock}`);
+      logger.debug(`Closed channels scan completed at block ${this.closedChannelsScanBlock}`, logger.tags.ln);
     } catch (e) {
-      logger.err('$scanForClosedChannels() error: ' + (e instanceof Error ? e.message : e));
+      logger.err(`$scanForClosedChannels() error: ${e instanceof Error ? e.message : e}`, logger.tags.ln);
     }
   }
 }

backend/src/tasks/lightning/stats-updater.service.ts

@@ -6,7 +6,7 @@ import { Common } from '../../api/common';
 
 class LightningStatsUpdater {
   public async $startService(): Promise<void> {
-    logger.info('Starting Lightning Stats service');
+    logger.info(`Starting Lightning Stats service`, logger.tags.ln);
 
     await this.$runTasks();
     LightningStatsImporter.$run();
@@ -27,7 +27,7 @@ class LightningStatsUpdater {
     const networkGraph = await lightningApi.$getNetworkGraph();
     await LightningStatsImporter.computeNetworkStats(date.getTime() / 1000, networkGraph);
     
-    logger.info(`Updated latest network stats`);
+    logger.debug(`Updated latest network stats`, logger.tags.ln);
   }
 }
 

backend/src/tasks/lightning/sync-tasks/funding-tx-fetcher.ts

@@ -21,10 +21,10 @@ class FundingTxFetcher {
       try {
         this.fundingTxCache = JSON.parse(await fsPromises.readFile(CACHE_FILE_NAME, 'utf-8'));
       } catch (e) {
-        logger.err(`Unable to parse channels funding txs disk cache. Starting from scratch`);
+        logger.err(`Unable to parse channels funding txs disk cache. Starting from scratch`, logger.tags.ln);
         this.fundingTxCache = {};
       }
-      logger.debug(`Imported ${Object.keys(this.fundingTxCache).length} funding tx amount from the disk cache`);
+      logger.debug(`Imported ${Object.keys(this.fundingTxCache).length} funding tx amount from the disk cache`, logger.tags.ln);
     }
   }
 
@@ -44,26 +44,27 @@ class FundingTxFetcher {
       ++channelProcessed;
 
       let elapsedSeconds = Math.round((new Date().getTime() / 1000) - loggerTimer);
-      if (elapsedSeconds > 10) {
+      if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
         elapsedSeconds = Math.round((new Date().getTime() / 1000) - globalTimer);
         logger.info(`Indexing channels funding tx ${channelProcessed + 1} of ${channelIds.length} ` +
           `(${Math.floor(channelProcessed / channelIds.length * 10000) / 100}%) | ` +
-          `elapsed: ${elapsedSeconds} seconds`
+          `elapsed: ${elapsedSeconds} seconds`,
+          logger.tags.ln
         );
         loggerTimer = new Date().getTime() / 1000;
       }
 
       elapsedSeconds = Math.round((new Date().getTime() / 1000) - cacheTimer);
       if (elapsedSeconds > 60) {
-        logger.debug(`Saving ${Object.keys(this.fundingTxCache).length} funding txs cache into disk`);
+        logger.debug(`Saving ${Object.keys(this.fundingTxCache).length} funding txs cache into disk`, logger.tags.ln);
         fsPromises.writeFile(CACHE_FILE_NAME, JSON.stringify(this.fundingTxCache));
         cacheTimer = new Date().getTime() / 1000;
       }
     }
 
     if (this.channelNewlyProcessed > 0) {
-      logger.info(`Indexed ${this.channelNewlyProcessed} additional channels funding tx`);
-      logger.debug(`Saving ${Object.keys(this.fundingTxCache).length} funding txs cache into disk`);
+      logger.info(`Indexed ${this.channelNewlyProcessed} additional channels funding tx`, logger.tags.ln);
+      logger.debug(`Saving ${Object.keys(this.fundingTxCache).length} funding txs cache into disk`, logger.tags.ln);
       fsPromises.writeFile(CACHE_FILE_NAME, JSON.stringify(this.fundingTxCache));
     }
 

backend/src/tasks/lightning/sync-tasks/node-locations.ts

@@ -14,7 +14,7 @@ export async function $lookupNodeLocation(): Promise<void> {
   let nodesUpdated = 0;
   let geoNamesInserted = 0;
 
-  logger.info(`Running node location updater using Maxmind`);
+  logger.debug(`Running node location updater using Maxmind`, logger.tags.ln);
   try {
     const nodes = await nodesApi.$getAllNodes();
     const lookupCity = await maxmind.open<CityResponse>(config.MAXMIND.GEOLITE2_CITY);
@@ -152,8 +152,8 @@ export async function $lookupNodeLocation(): Promise<void> {
 
           ++progress;
           const elapsedSeconds = Math.round((new Date().getTime() / 1000) - loggerTimer);
-          if (elapsedSeconds > 10) {
-            logger.info(`Updating node location data ${progress}/${nodes.length}`);
+          if (elapsedSeconds > config.LIGHTNING.LOGGER_UPDATE_INTERVAL) {
+            logger.debug(`Updating node location data ${progress}/${nodes.length}`);
             loggerTimer = new Date().getTime() / 1000;
           }
         }
@@ -161,9 +161,7 @@ export async function $lookupNodeLocation(): Promise<void> {
     }
 
     if (nodesUpdated > 0) {
-      logger.info(`${nodesUpdated} nodes maxmind data updated, ${geoNamesInserted} geo names inserted`);
-    } else {
-      logger.debug(`${nodesUpdated} nodes maxmind data updated, ${geoNamesInserted} geo names inserted`);
+      logger.debug(`${nodesUpdated} nodes maxmind data updated, ${geoNamesInserted} geo names inserted`, logger.tags.ln);
     }
   } catch (e) {
     logger.err('$lookupNodeLocation() error: ' + (e instanceof Error ? e.message : e));

backend/src/tasks/lightning/sync-tasks/stats-importer.ts

@@ -8,7 +8,6 @@ import { isIP } from 'net';
 import { Common } from '../../../api/common';
 import channelsApi from '../../../api/explorer/channels.api';
 import nodesApi from '../../../api/explorer/nodes.api';
-import { ResultSetHeader } from 'mysql2';
 
 const fsPromises = promises;
 
@@ -17,7 +16,7 @@ class LightningStatsImporter {
 
   async $run(): Promise<void> {
     const [channels]: any[] = await DB.query('SELECT short_id from channels;');
-    logger.info('Caching funding txs for currently existing channels');
+    logger.info(`Caching funding txs for currently existing channels`, logger.tags.ln);
     await fundingTxFetcher.$fetchChannelsFundingTxs(channels.map(channel => channel.short_id));
 
     if (config.MEMPOOL.NETWORK !== 'mainnet' || config.DATABASE.ENABLED === false) {
@@ -108,7 +107,7 @@ class LightningStatsImporter {
 
       const tx = await fundingTxFetcher.$fetchChannelOpenTx(short_id);
       if (!tx) {
-        logger.err(`Unable to fetch funding tx for channel ${short_id}. Capacity and creation date is unknown. Skipping channel.`);
+        logger.err(`Unable to fetch funding tx for channel ${short_id}. Capacity and creation date is unknown. Skipping channel.`, logger.tags.ln);
         continue;
       }
 
@@ -310,13 +309,18 @@ class LightningStatsImporter {
    * Import topology files LN historical data into the database
    */
   async $importHistoricalLightningStats(): Promise<void> {
+    if (!config.LIGHTNING.TOPOLOGY_FOLDER) {
+      logger.info(`Lightning topology folder is not set. Not importing historical LN stats`);
+      return;
+    }
+
     logger.debug('Run the historical importer');
     try {
       let fileList: string[] = [];
       try {
         fileList = await fsPromises.readdir(this.topologiesFolder);
       } catch (e) {
-        logger.err(`Unable to open topology folder at ${this.topologiesFolder}`);
+        logger.err(`Unable to open topology folder at ${this.topologiesFolder}`, logger.tags.ln);
         throw e;
       }
       // Insert history from the most recent to the oldest
@@ -354,7 +358,7 @@ class LightningStatsImporter {
           continue;
         }
 
-        logger.debug(`Reading ${this.topologiesFolder}/${filename}`);
+        logger.debug(`Reading ${this.topologiesFolder}/${filename}`, logger.tags.ln);
         let fileContent = '';
         try {
           fileContent = await fsPromises.readFile(`${this.topologiesFolder}/${filename}`, 'utf8');
@@ -363,7 +367,7 @@ class LightningStatsImporter {
             totalProcessed++;
             continue;
           }
-          logger.err(`Unable to open ${this.topologiesFolder}/${filename}`);
+          logger.err(`Unable to open ${this.topologiesFolder}/${filename}`, logger.tags.ln);
           totalProcessed++;
           continue;
         }
@@ -373,7 +377,7 @@ class LightningStatsImporter {
           graph = JSON.parse(fileContent);
           graph = await this.cleanupTopology(graph);
         } catch (e) {
-          logger.debug(`Invalid topology file ${this.topologiesFolder}/${filename}, cannot parse the content. Reason: ${e instanceof Error ? e.message : e}`);
+          logger.debug(`Invalid topology file ${this.topologiesFolder}/${filename}, cannot parse the content. Reason: ${e instanceof Error ? e.message : e}`, logger.tags.ln);
           totalProcessed++;
           continue;
         }
@@ -385,20 +389,20 @@ class LightningStatsImporter {
         }
 
         if (!logStarted) {
-          logger.info(`Founds a topology file that we did not import. Importing historical lightning stats now.`);
+          logger.info(`Founds a topology file that we did not import. Importing historical lightning stats now.`, logger.tags.ln);
           logStarted = true;
         }
         
         const datestr = `${new Date(timestamp * 1000).toUTCString()} (${timestamp})`;
-        logger.debug(`${datestr}: Found ${graph.nodes.length} nodes and ${graph.edges.length} channels`);
+        logger.debug(`${datestr}: Found ${graph.nodes.length} nodes and ${graph.edges.length} channels`, logger.tags.ln);
 
         totalProcessed++;
 
         if (processed > 10) {
-          logger.info(`Generating LN network stats for ${datestr}. Processed ${totalProcessed}/${fileList.length} files`);
+          logger.info(`Generating LN network stats for ${datestr}. Processed ${totalProcessed}/${fileList.length} files`, logger.tags.ln);
           processed = 0;
         } else {
-          logger.debug(`Generating LN network stats for ${datestr}. Processed ${totalProcessed}/${fileList.length} files`);
+          logger.debug(`Generating LN network stats for ${datestr}. Processed ${totalProcessed}/${fileList.length} files`, logger.tags.ln);
         }
         await fundingTxFetcher.$fetchChannelsFundingTxs(graph.edges.map(channel => channel.channel_id.slice(0, -2)));
         const stat = await this.computeNetworkStats(timestamp, graph, true);
@@ -407,10 +411,10 @@ class LightningStatsImporter {
       }
 
       if (totalProcessed > 0) {
-        logger.info(`Lightning network stats historical import completed`);
+        logger.notice(`Lightning network stats historical import completed`, logger.tags.ln);
       }
     } catch (e) {
-      logger.err(`Lightning network stats historical failed. Reason: ${e instanceof Error ? e.message : e}`);
+      logger.err(`Lightning network stats historical failed. Reason: ${e instanceof Error ? e.message : e}`, logger.tags.ln);
     }
   }
 

backend/src/tasks/pools-updater.ts

@@ -32,9 +32,9 @@ class PoolsUpdater {
     this.lastRun = now;
 
     if (config.SOCKS5PROXY.ENABLED) {
-      logger.info(`Updating latest mining pools from ${this.poolsUrl} over the Tor network`);
+      logger.info(`Updating latest mining pools from ${this.poolsUrl} over the Tor network`, logger.tags.mining);
     } else {
-      logger.info(`Updating latest mining pools from ${this.poolsUrl} over clearnet`);
+      logger.info(`Updating latest mining pools from ${this.poolsUrl} over clearnet`, logger.tags.mining);
     }
 
     try {
@@ -53,9 +53,9 @@ class PoolsUpdater {
       }
 
       if (this.currentSha === undefined) {
-        logger.info(`Downloading pools.json for the first time from ${this.poolsUrl}`);
+        logger.info(`Downloading pools.json for the first time from ${this.poolsUrl}`, logger.tags.mining);
       } else {
-        logger.warn(`Pools.json is outdated, fetch latest from ${this.poolsUrl}`);
+        logger.warn(`Pools.json is outdated, fetch latest from ${this.poolsUrl}`, logger.tags.mining);
       }
       const poolsJson = await this.query(this.poolsUrl);
       if (poolsJson === undefined) {
@@ -63,11 +63,11 @@ class PoolsUpdater {
       }
       await poolsParser.migratePoolsJson(poolsJson);
       await this.updateDBSha(githubSha);
-      logger.notice('PoolsUpdater completed');
+      logger.notice(`PoolsUpdater completed`, logger.tags.mining);
 
     } catch (e) {
       this.lastRun = now - (oneWeek - oneDay); // Try again in 24h instead of waiting next week
-      logger.err('PoolsUpdater failed. Will try again in 24h. Reason: ' + (e instanceof Error ? e.message : e));
+      logger.err(`PoolsUpdater failed. Will try again in 24h. Reason: ${e instanceof Error ? e.message : e}`, logger.tags.mining);
     }
   }
 
@@ -81,7 +81,7 @@ class PoolsUpdater {
         await DB.query('DELETE FROM state where name="pools_json_sha"');
         await DB.query(`INSERT INTO state VALUES('pools_json_sha', NULL, '${githubSha}')`);
       } catch (e) {
-        logger.err('Cannot save github pools.json sha into the db. Reason: ' + (e instanceof Error ? e.message : e));
+        logger.err('Cannot save github pools.json sha into the db. Reason: ' + (e instanceof Error ? e.message : e), logger.tags.mining);
       }
     }
   }
@@ -94,7 +94,7 @@ class PoolsUpdater {
       const [rows]: any[] = await DB.query('SELECT string FROM state WHERE name="pools_json_sha"');
       return (rows.length > 0 ? rows[0].string : undefined);
     } catch (e) {
-      logger.err('Cannot fetch pools.json sha from db. Reason: ' + (e instanceof Error ? e.message : e));
+      logger.err('Cannot fetch pools.json sha from db. Reason: ' + (e instanceof Error ? e.message : e), logger.tags.mining);
       return undefined;
     }
   }
@@ -113,7 +113,7 @@ class PoolsUpdater {
       }
     }
 
-    logger.err(`Cannot find "pools.json" in git tree (${this.treeUrl})`);
+    logger.err(`Cannot find "pools.json" in git tree (${this.treeUrl})`, logger.tags.mining);
     return undefined;
   }
 

backend/src/tasks/price-feeds/kraken-api.ts

@@ -91,7 +91,7 @@ class KrakenApi implements PriceFeed {
     }
 
     if (Object.keys(priceHistory).length > 0) {
-      logger.notice(`Inserted ${Object.keys(priceHistory).length} Kraken EUR, USD, GBP, JPY, CAD, CHF and AUD weekly price history into db`);
+      logger.notice(`Inserted ${Object.keys(priceHistory).length} Kraken EUR, USD, GBP, JPY, CAD, CHF and AUD weekly price history into db`, logger.tags.mining);
     }
   }
 }

backend/src/tasks/price-updater.ts

@@ -82,7 +82,7 @@ class PriceUpdater {
         await this.$updatePrice();
       }
     } catch (e) {
-      logger.err(`Cannot save BTC prices in db. Reason: ${e instanceof Error ? e.message : e}`);
+      logger.err(`Cannot save BTC prices in db. Reason: ${e instanceof Error ? e.message : e}`, logger.tags.mining);
     }
 
     this.running = false;
@@ -115,14 +115,14 @@ class PriceUpdater {
             if (price > 0) {
               prices.push(price);
             }
-            logger.debug(`${feed.name} BTC/${currency} price: ${price}`);
+            logger.debug(`${feed.name} BTC/${currency} price: ${price}`, logger.tags.mining);
           } catch (e) {
-            logger.debug(`Could not fetch BTC/${currency} price at ${feed.name}. Reason: ${(e instanceof Error ? e.message : e)}`);
+            logger.debug(`Could not fetch BTC/${currency} price at ${feed.name}. Reason: ${(e instanceof Error ? e.message : e)}`, logger.tags.mining);
           }
         }
       }
       if (prices.length === 1) {
-        logger.debug(`Only ${prices.length} feed available for BTC/${currency} price`);
+        logger.debug(`Only ${prices.length} feed available for BTC/${currency} price`, logger.tags.mining);
       }
 
       // Compute average price, non weighted
@@ -175,9 +175,9 @@ class PriceUpdater {
       ++insertedCount;
     }
     if (insertedCount > 0) {
-      logger.notice(`Inserted ${insertedCount} MtGox USD weekly price history into db`);
+      logger.notice(`Inserted ${insertedCount} MtGox USD weekly price history into db`, logger.tags.mining);
     } else {
-      logger.debug(`Inserted ${insertedCount} MtGox USD weekly price history into db`);
+      logger.debug(`Inserted ${insertedCount} MtGox USD weekly price history into db`, logger.tags.mining);
     }
 
     // Insert Kraken weekly prices
@@ -198,7 +198,7 @@ class PriceUpdater {
   private async $insertMissingRecentPrices(type: 'hour' | 'day'): Promise<void> {
     const existingPriceTimes = await PricesRepository.$getPricesTimes();
 
-    logger.info(`Fetching ${type === 'day' ? 'dai' : 'hour'}ly price history from exchanges and saving missing ones into the database, this may take a while`);
+    logger.info(`Fetching ${type === 'day' ? 'dai' : 'hour'}ly price history from exchanges and saving missing ones into the database`, logger.tags.mining);
 
     const historicalPrices: PriceHistory[] = [];
 
@@ -207,7 +207,7 @@ class PriceUpdater {
       try {
         historicalPrices.push(await feed.$fetchRecentPrice(this.currencies, type));
       } catch (e) {
-        logger.err(`Cannot fetch hourly historical price from ${feed.name}. Ignoring this feed. Reason: ${e instanceof Error ? e.message : e}`);
+        logger.err(`Cannot fetch hourly historical price from ${feed.name}. Ignoring this feed. Reason: ${e instanceof Error ? e.message : e}`, logger.tags.mining);
       }
     }
 
@@ -252,9 +252,9 @@ class PriceUpdater {
     }
 
     if (totalInserted > 0) {
-      logger.notice(`Inserted ${totalInserted} ${type === 'day' ? 'dai' : 'hour'}ly historical prices into the db`);
+      logger.notice(`Inserted ${totalInserted} ${type === 'day' ? 'dai' : 'hour'}ly historical prices into the db`, logger.tags.mining);
     } else {
-      logger.debug(`Inserted ${totalInserted} ${type === 'day' ? 'dai' : 'hour'}ly historical prices into the db`);
+      logger.debug(`Inserted ${totalInserted} ${type === 'day' ? 'dai' : 'hour'}ly historical prices into the db`, logger.tags.mining);
     }
   }
 }

docker/README.md

@@ -100,12 +100,18 @@ Below we list all settings from `mempool-config.json` and the corresponding over
     "BLOCK_WEIGHT_UNITS": 4000000,
     "INITIAL_BLOCKS_AMOUNT": 8,
     "MEMPOOL_BLOCKS_AMOUNT": 8,
+    "BLOCKS_SUMMARIES_INDEXING": false,
     "PRICE_FEED_UPDATE_INTERVAL": 600,
     "USE_SECOND_NODE_FOR_MINFEE": false,
     "EXTERNAL_ASSETS": ["https://raw.githubusercontent.com/mempool/mining-pools/master/pools.json"],
     "STDOUT_LOG_MIN_PRIORITY": "info",
+    "INDEXING_BLOCKS_AMOUNT": false,
+    "AUTOMATIC_BLOCK_REINDEXING": false,
     "POOLS_JSON_URL": "https://raw.githubusercontent.com/mempool/mining-pools/master/pools.json",
-    "POOLS_JSON_TREE_URL": "https://api.github.com/repos/mempool/mining-pools/git/trees/master"
+    "POOLS_JSON_TREE_URL": "https://api.github.com/repos/mempool/mining-pools/git/trees/master",
+    "ADVANCED_GBT_AUDIT": false,
+    "ADVANCED_GBT_MEMPOOL": false,
+    "CPFP_INDEXING": false,
   },
 ```
 
@@ -125,15 +131,25 @@ Corresponding `docker-compose.yml` overrides:
       MEMPOOL_BLOCK_WEIGHT_UNITS: ""
       MEMPOOL_INITIAL_BLOCKS_AMOUNT: ""
       MEMPOOL_MEMPOOL_BLOCKS_AMOUNT: ""
+      MEMPOOL_BLOCKS_SUMMARIES_INDEXING: ""
       MEMPOOL_PRICE_FEED_UPDATE_INTERVAL: ""
       MEMPOOL_USE_SECOND_NODE_FOR_MINFEE: ""
       MEMPOOL_EXTERNAL_ASSETS: ""
       MEMPOOL_STDOUT_LOG_MIN_PRIORITY: ""
+      MEMPOOL_INDEXING_BLOCKS_AMOUNT: ""
+      MEMPOOL_AUTOMATIC_BLOCK_REINDEXING: ""
       MEMPOOL_POOLS_JSON_URL: ""
       MEMPOOL_POOLS_JSON_TREE_URL: ""
+      MEMPOOL_ADVANCED_GBT_AUDIT: ""
+      MEMPOOL_ADVANCED_GBT_MEMPOOL: ""
+      MEMPOOL_CPFP_INDEXING: ""
       ...
 ```
 
+`ADVANCED_GBT_AUDIT` AND `ADVANCED_GBT_MEMPOOL` enable a more accurate (but slower) block prediction algorithm for the block audit feature and the projected mempool-blocks respectively.
+
+`CPFP_INDEXING` enables indexing CPFP (Child Pays For Parent) information for the last `INDEXING_BLOCKS_AMOUNT` blocks.
+
 <br/>
 
 `mempool-config.json`:

docker/backend/mempool-config.json

@@ -22,7 +22,11 @@
     "STDOUT_LOG_MIN_PRIORITY": "__MEMPOOL_STDOUT_LOG_MIN_PRIORITY__",
     "INDEXING_BLOCKS_AMOUNT": __MEMPOOL_INDEXING_BLOCKS_AMOUNT__,
     "BLOCKS_SUMMARIES_INDEXING": __MEMPOOL_BLOCKS_SUMMARIES_INDEXING__,
-    "AUTOMATIC_BLOCK_REINDEXING": __MEMPOOL_AUTOMATIC_BLOCK_REINDEXING__
+    "AUTOMATIC_BLOCK_REINDEXING": __MEMPOOL_AUTOMATIC_BLOCK_REINDEXING__,
+    "ADVANCED_GBT_AUDIT": __MEMPOOL_ADVANCED_GBT_AUDIT__,
+    "ADVANCED_GBT_MEMPOOL": __MEMPOOL_ADVANCED_GBT_MEMPOOL__,
+    "CPFP_INDEXING": __MEMPOOL_CPFP_INDEXING__,
+    "RBF_DUAL_NODE": __RBF_DUAL_NODE__
   },
   "CORE_RPC": {
     "HOST": "__CORE_RPC_HOST__",

docker/backend/start.sh

@@ -27,6 +27,11 @@ __MEMPOOL_INDEXING_BLOCKS_AMOUNT__=${MEMPOOL_INDEXING_BLOCKS_AMOUNT:=false}
 __MEMPOOL_AUTOMATIC_BLOCK_REINDEXING__=${MEMPOOL_AUTOMATIC_BLOCK_REINDEXING:=false}
 __MEMPOOL_POOLS_JSON_URL__=${MEMPOOL_POOLS_JSON_URL:=https://raw.githubusercontent.com/mempool/mining-pools/master/pools.json}
 __MEMPOOL_POOLS_JSON_TREE_URL__=${MEMPOOL_POOLS_JSON_TREE_URL:=https://api.github.com/repos/mempool/mining-pools/git/trees/master}
+__MEMPOOL_ADVANCED_GBT_AUDIT__=${MEMPOOL_ADVANCED_GBT_AUDIT:=false}
+__MEMPOOL_ADVANCED_GBT_MEMPOOL__=${MEMPOOL_ADVANCED_GBT_MEMPOOL:=false}
+__MEMPOOL_CPFP_INDEXING__=${MEMPOOL_CPFP_INDEXING:=false}
+__MEMPOOL_RBF_DUAL_NODE__=${MEMPOOL_RBF_DUAL_NODE:=false}
+
 
 # CORE_RPC
 __CORE_RPC_HOST__=${CORE_RPC_HOST:=127.0.0.1}
@@ -136,6 +141,10 @@ sed -i "s/__MEMPOOL_INDEXING_BLOCKS_AMOUNT__/${__MEMPOOL_INDEXING_BLOCKS_AMOUNT_
 sed -i "s/__MEMPOOL_AUTOMATIC_BLOCK_REINDEXING__/${__MEMPOOL_AUTOMATIC_BLOCK_REINDEXING__}/g" mempool-config.json
 sed -i "s!__MEMPOOL_POOLS_JSON_URL__!${__MEMPOOL_POOLS_JSON_URL__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_POOLS_JSON_TREE_URL__!${__MEMPOOL_POOLS_JSON_TREE_URL__}!g" mempool-config.json
+sed -i "s!__MEMPOOL_ADVANCED_GBT_MEMPOOL__!${__MEMPOOL_ADVANCED_GBT_MEMPOOL__}!g" mempool-config.json
+sed -i "s!__MEMPOOL_ADVANCED_GBT_AUDIT__!${__MEMPOOL_ADVANCED_GBT_AUDIT__}!g" mempool-config.json
+sed -i "s!__MEMPOOL_CPFP_INDEXING__!${__MEMPOOL_CPFP_INDEXING__}!g" mempool-config.json
+sed -i "s/__MEMPOOL_RBF_DUAL_NODE__/${__MEMPOOL_RBF_DUAL_NODE__}/g" mempool-config.json
 
 sed -i "s/__CORE_RPC_HOST__/${__CORE_RPC_HOST__}/g" mempool-config.json
 sed -i "s/__CORE_RPC_PORT__/${__CORE_RPC_PORT__}/g" mempool-config.json

docker/frontend/entrypoint.sh

@@ -31,6 +31,9 @@ __LIQUID_WEBSITE_URL__=${LIQUID_WEBSITE_URL:=https://liquid.network}
 __BISQ_WEBSITE_URL__=${BISQ_WEBSITE_URL:=https://bisq.markets}
 __MINING_DASHBOARD__=${MINING_DASHBOARD:=true}
 __LIGHTNING__=${LIGHTNING:=false}
+__MAINNET_BLOCK_AUDIT_START_HEIGHT__=${MAINNET_BLOCK_AUDIT_START_HEIGHT:=0}
+__TESTNET_BLOCK_AUDIT_START_HEIGHT__=${TESTNET_BLOCK_AUDIT_START_HEIGHT:=0}
+__SIGNET_BLOCK_AUDIT_START_HEIGHT__=${SIGNET_BLOCK_AUDIT_START_HEIGHT:=0}
 
 # Export as environment variables to be used by envsubst
 export __TESTNET_ENABLED__
@@ -52,6 +55,9 @@ export __LIQUID_WEBSITE_URL__
 export __BISQ_WEBSITE_URL__
 export __MINING_DASHBOARD__
 export __LIGHTNING__
+export __MAINNET_BLOCK_AUDIT_START_HEIGHT__
+export __TESTNET_BLOCK_AUDIT_START_HEIGHT__
+export __SIGNET_BLOCK_AUDIT_START_HEIGHT__
 
 folder=$(find /var/www/mempool -name "config.js" | xargs dirname)
 echo ${folder}

frontend/README.md

@@ -127,7 +127,7 @@ https://www.transifex.com/mempool/mempool/dashboard/
 * Thai @Gusb3ll
 * Turkish @stackmore
 * Ukrainian @volbil
-* Vietnamese @bitcoin_vietnam
+* Vietnamese @BitcoinvnNews
 * Chinese @wdljt
 * Russian @TonyCrusoe @Bitconan
 * Romanian @mirceavesa

frontend/angular.json

@@ -137,6 +137,10 @@
           "hi": {
             "translation": "src/locale/messages.hi.xlf",
             "baseHref": "/hi/"
+          },
+          "lt": {
+            "translation": "src/locale/messages.lt.xlf",
+            "baseHref": "/lt/"
           }
         }
       },

frontend/cypress/e2e/liquid/liquid.spec.ts

@@ -7,7 +7,6 @@ describe('Liquid', () => {
     cy.intercept('/liquid/api/blocks/').as('blocks');
     cy.intercept('/liquid/api/tx/**/outspends').as('outspends');
     cy.intercept('/liquid/api/block/**/txs/**').as('block-txs');
-    cy.intercept('/resources/pools.json').as('pools');
 
     Cypress.Commands.add('waitForBlockData', () => {
       cy.wait('@socket');

frontend/cypress/e2e/liquidtestnet/liquidtestnet.spec.ts

@@ -7,7 +7,6 @@ describe('Liquid Testnet', () => {
     cy.intercept('/liquidtestnet/api/blocks/').as('blocks');
     cy.intercept('/liquidtestnet/api/tx/**/outspends').as('outspends');
     cy.intercept('/liquidtestnet/api/block/**/txs/**').as('block-txs');
-    cy.intercept('/resources/pools.json').as('pools');
 
     Cypress.Commands.add('waitForBlockData', () => {
       cy.wait('@socket');

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

@@ -41,7 +41,6 @@ describe('Mainnet', () => {
     // cy.intercept('/api/v1/block/*/summary').as('block-summary');
     // cy.intercept('/api/v1/outspends/*').as('outspends');
     // cy.intercept('/api/tx/*/outspends').as('tx-outspends');
-    // cy.intercept('/resources/pools.json').as('pools');
 
     // Search Auto Complete
     cy.intercept('/api/address-prefix/1wiz').as('search-1wiz');

frontend/mempool-frontend-config.sample.json

@@ -20,5 +20,7 @@
   "MAINNET_BLOCK_AUDIT_START_HEIGHT": 0,
   "TESTNET_BLOCK_AUDIT_START_HEIGHT": 0,
   "SIGNET_BLOCK_AUDIT_START_HEIGHT": 0,
-  "LIGHTNING": false
+  "LIGHTNING": false,
+  "FULL_RBF_ENABLED": false,
+  "ALT_BACKEND_ENABLED": false
 }

frontend/package-lock.json

@@ -32,13 +32,13 @@
         "browserify": "^17.0.0",
         "clipboard": "^2.0.11",
         "domino": "^2.1.6",
-        "echarts": "~5.4.0",
+        "echarts": "~5.4.1",
         "echarts-gl": "^2.0.9",
         "lightweight-charts": "~3.8.0",
         "ngx-echarts": "~14.0.0",
         "ngx-infinite-scroll": "^14.0.1",
         "qrcode": "1.5.1",
-        "rxjs": "~7.5.7",
+        "rxjs": "~7.8.0",
         "tinyify": "^3.1.0",
         "tlite": "^0.1.9",
         "tslib": "~2.4.1",
@@ -48,17 +48,17 @@
         "@angular/compiler-cli": "^14.2.12",
         "@angular/language-service": "^14.2.12",
         "@types/node": "^18.11.9",
-        "@typescript-eslint/eslint-plugin": "^5.45.0",
-        "@typescript-eslint/parser": "^5.45.0",
-        "eslint": "^8.28.0",
+        "@typescript-eslint/eslint-plugin": "^5.48.1",
+        "@typescript-eslint/parser": "^5.48.1",
+        "eslint": "^8.31.0",
         "http-proxy-middleware": "~2.0.6",
-        "prettier": "^2.8.0",
+        "prettier": "^2.8.2",
         "ts-node": "~10.9.1",
         "typescript": "~4.6.4"
       },
       "optionalDependencies": {
-        "@cypress/schematic": "~2.3.0",
-        "cypress": "^11.2.0",
+        "@cypress/schematic": "^2.4.0",
+        "cypress": "^12.3.0",
         "cypress-fail-on-console-error": "~4.0.2",
         "cypress-wait-until": "^1.7.2",
         "mock-socket": "~9.1.5",
@@ -3202,15 +3202,6 @@
         "verror": "1.10.0"
       }
     },
-    "node_modules/@cypress/request/node_modules/qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/@cypress/request/node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -3225,9 +3216,9 @@
       }
     },
     "node_modules/@cypress/schematic": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@cypress/schematic/-/schematic-2.3.0.tgz",
-      "integrity": "sha512-LBKX20MUUYF2Xu+1+KpVbLCoMvt2Osa80yQfonduVsLJ/p8JxtLHqufuf/ryJp9Gm9R5sDfk/YhHL+rB7a+gsg==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@cypress/schematic/-/schematic-2.4.0.tgz",
+      "integrity": "sha512-aor8hQ+gMXqx/ASdo7CUGo/sMEWwwfSRsLr99rM2GjvW+pZnCKKTnRG4UPf8Ro9SevLJj7KRZAZWxa5MAkJzZA==",
       "optional": true,
       "dependencies": {
         "@angular-devkit/architect": "^0.1402.1",
@@ -3381,15 +3372,15 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
-      "integrity": "sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
+      "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
         "espree": "^9.4.0",
-        "globals": "^13.15.0",
+        "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
@@ -3410,9 +3401,9 @@
       "dev": true
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.18.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.18.0.tgz",
-      "integrity": "sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==",
+      "version": "13.19.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz",
+      "integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -3561,9 +3552,9 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.7",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
-      "integrity": "sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==",
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
+      "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
       "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -4293,14 +4284,14 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.45.0.tgz",
-      "integrity": "sha512-CXXHNlf0oL+Yg021cxgOdMHNTXD17rHkq7iW6RFHoybdFgQBjU3yIXhhcPpGwr1CjZlo6ET8C6tzX5juQoXeGA==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.1.tgz",
+      "integrity": "sha512-9nY5K1Rp2ppmpb9s9S2aBiF3xo5uExCehMDmYmmFqqyxgenbHJ3qbarcLt4ITgaD6r/2ypdlcFRdcuVPnks+fQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/type-utils": "5.45.0",
-        "@typescript-eslint/utils": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/type-utils": "5.48.1",
+        "@typescript-eslint/utils": "5.48.1",
         "debug": "^4.3.4",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
@@ -4343,14 +4334,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.45.0.tgz",
-      "integrity": "sha512-brvs/WSM4fKUmF5Ot/gEve6qYiCMjm6w4HkHPfS6ZNmxTS0m0iNN4yOChImaCkqc1hRwFGqUyanMXuGal6oyyQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.1.tgz",
+      "integrity": "sha512-4yg+FJR/V1M9Xoq56SF9Iygqm+r5LMXvheo6DQ7/yUWynQ4YfCRnsKuRgqH4EQ5Ya76rVwlEpw4Xu+TgWQUcdA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/typescript-estree": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/typescript-estree": "5.48.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4387,13 +4378,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.45.0.tgz",
-      "integrity": "sha512-noDMjr87Arp/PuVrtvN3dXiJstQR1+XlQ4R1EvzG+NMgXi8CuMCXpb8JqNtFHKceVSQ985BZhfRdowJzbv4yKw==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.1.tgz",
+      "integrity": "sha512-S035ueRrbxRMKvSTv9vJKIWgr86BD8s3RqoRZmsSh/s8HhIs90g6UlK8ZabUSjUZQkhVxt7nmZ63VJ9dcZhtDQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/visitor-keys": "5.45.0"
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/visitor-keys": "5.48.1"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4404,13 +4395,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.45.0.tgz",
-      "integrity": "sha512-DY7BXVFSIGRGFZ574hTEyLPRiQIvI/9oGcN8t1A7f6zIs6ftbrU0nhyV26ZW//6f85avkwrLag424n+fkuoJ1Q==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz",
+      "integrity": "sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.45.0",
-        "@typescript-eslint/utils": "5.45.0",
+        "@typescript-eslint/typescript-estree": "5.48.1",
+        "@typescript-eslint/utils": "5.48.1",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -4448,9 +4439,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.45.0.tgz",
-      "integrity": "sha512-QQij+u/vgskA66azc9dCmx+rev79PzX8uDHpsqSjEFtfF2gBUTRCpvYMh2gw2ghkJabNkPlSUCimsyBEQZd1DA==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.1.tgz",
+      "integrity": "sha512-xHyDLU6MSuEEdIlzrrAerCGS3T7AA/L8Hggd0RCYBi0w3JMvGYxlLlXHeg50JI9Tfg5MrtsfuNxbS/3zF1/ATg==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4461,13 +4452,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.0.tgz",
-      "integrity": "sha512-maRhLGSzqUpFcZgXxg1qc/+H0bT36lHK4APhp0AEUVrpSwXiRAomm/JGjSG+kNUio5kAa3uekCYu/47cnGn5EQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz",
+      "integrity": "sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/visitor-keys": "5.45.0",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/visitor-keys": "5.48.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -4534,16 +4525,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.45.0.tgz",
-      "integrity": "sha512-OUg2JvsVI1oIee/SwiejTot2OxwU8a7UfTFMOdlhD2y+Hl6memUSL4s98bpUTo8EpVEr0lmwlU7JSu/p2QpSvA==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.1.tgz",
+      "integrity": "sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/typescript-estree": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/typescript-estree": "5.48.1",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0",
         "semver": "^7.3.7"
@@ -4560,12 +4551,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.0.tgz",
-      "integrity": "sha512-jc6Eccbn2RtQPr1s7th6jJWQHBHI6GBVQkCHoJFQ5UreaKm59Vxw+ynQUPPY2u2Amquc+7tmEoC2G52ApsGNNg==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.1.tgz",
+      "integrity": "sha512-Ns0XBwmfuX7ZknznfXozgnydyR8F6ev/KEGePP4i74uL3ArsKbEhJ7raeKr1JSa997DBDwol/4a0Y+At82c9dA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.45.0",
+        "@typescript-eslint/types": "5.48.1",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -7019,9 +7010,9 @@
       "peer": true
     },
     "node_modules/cypress": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-11.2.0.tgz",
-      "integrity": "sha512-u61UGwtu7lpsNWLUma/FKNOsrjcI6wleNmda/TyKHe0dOBcVjbCPlp1N6uwFZ0doXev7f/91YDpU9bqDCFeBLA==",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.3.0.tgz",
+      "integrity": "sha512-ZQNebibi6NBt51TRxRMYKeFvIiQZ01t50HSy7z/JMgRVqBUey3cdjog5MYEbzG6Ktti5ckDt1tfcC47lmFwXkw==",
       "hasInstallScript": true,
       "optional": true,
       "dependencies": {
@@ -7072,7 +7063,7 @@
         "cypress": "bin/cypress"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
       }
     },
     "node_modules/cypress-fail-on-console-error": {
@@ -7669,12 +7660,12 @@
       }
     },
     "node_modules/echarts": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
-      "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.1.tgz",
+      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.4.0"
+        "zrender": "5.4.1"
       }
     },
     "node_modules/echarts-gl": {
@@ -8424,13 +8415,13 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz",
-      "integrity": "sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==",
+      "version": "8.31.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
+      "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
       "dev": true,
       "dependencies": {
-        "@eslint/eslintrc": "^1.3.3",
-        "@humanwhocodes/config-array": "^0.11.6",
+        "@eslint/eslintrc": "^1.4.1",
+        "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
@@ -8449,7 +8440,7 @@
         "file-entry-cache": "^6.0.1",
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
-        "globals": "^13.15.0",
+        "globals": "^13.19.0",
         "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
@@ -8645,9 +8636,9 @@
       }
     },
     "node_modules/eslint/node_modules/globals": {
-      "version": "13.16.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.16.0.tgz",
-      "integrity": "sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==",
+      "version": "13.19.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz",
+      "integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -10996,9 +10987,9 @@
       "optional": true
     },
     "node_modules/json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.2.tgz",
+      "integrity": "sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==",
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -14061,9 +14052,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
-      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
+      "integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -14269,6 +14260,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/qs": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -14740,9 +14740,9 @@
       }
     },
     "node_modules/rxjs": {
-      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
-      "integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
+      "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -17235,9 +17235,9 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
-      "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.1.tgz",
+      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
       "dependencies": {
         "tslib": "2.3.0"
       }
@@ -19326,12 +19326,6 @@
             "verror": "1.10.0"
           }
         },
-        "qs": {
-          "version": "6.5.2",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-          "optional": true
-        },
         "tough-cookie": {
           "version": "2.5.0",
           "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -19345,9 +19339,9 @@
       }
     },
     "@cypress/schematic": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@cypress/schematic/-/schematic-2.3.0.tgz",
-      "integrity": "sha512-LBKX20MUUYF2Xu+1+KpVbLCoMvt2Osa80yQfonduVsLJ/p8JxtLHqufuf/ryJp9Gm9R5sDfk/YhHL+rB7a+gsg==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@cypress/schematic/-/schematic-2.4.0.tgz",
+      "integrity": "sha512-aor8hQ+gMXqx/ASdo7CUGo/sMEWwwfSRsLr99rM2GjvW+pZnCKKTnRG4UPf8Ro9SevLJj7KRZAZWxa5MAkJzZA==",
       "optional": true,
       "requires": {
         "@angular-devkit/architect": "^0.1402.1",
@@ -19461,15 +19455,15 @@
       "optional": true
     },
     "@eslint/eslintrc": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
-      "integrity": "sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
+      "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
         "espree": "^9.4.0",
-        "globals": "^13.15.0",
+        "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
@@ -19484,9 +19478,9 @@
           "dev": true
         },
         "globals": {
-          "version": "13.18.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.18.0.tgz",
-          "integrity": "sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==",
+          "version": "13.19.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz",
+          "integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==",
           "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
@@ -19607,9 +19601,9 @@
       }
     },
     "@humanwhocodes/config-array": {
-      "version": "0.11.7",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
-      "integrity": "sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==",
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
+      "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
       "dev": true,
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -20215,14 +20209,14 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.45.0.tgz",
-      "integrity": "sha512-CXXHNlf0oL+Yg021cxgOdMHNTXD17rHkq7iW6RFHoybdFgQBjU3yIXhhcPpGwr1CjZlo6ET8C6tzX5juQoXeGA==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.1.tgz",
+      "integrity": "sha512-9nY5K1Rp2ppmpb9s9S2aBiF3xo5uExCehMDmYmmFqqyxgenbHJ3qbarcLt4ITgaD6r/2ypdlcFRdcuVPnks+fQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/type-utils": "5.45.0",
-        "@typescript-eslint/utils": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/type-utils": "5.48.1",
+        "@typescript-eslint/utils": "5.48.1",
         "debug": "^4.3.4",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
@@ -20243,14 +20237,14 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.45.0.tgz",
-      "integrity": "sha512-brvs/WSM4fKUmF5Ot/gEve6qYiCMjm6w4HkHPfS6ZNmxTS0m0iNN4yOChImaCkqc1hRwFGqUyanMXuGal6oyyQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.1.tgz",
+      "integrity": "sha512-4yg+FJR/V1M9Xoq56SF9Iygqm+r5LMXvheo6DQ7/yUWynQ4YfCRnsKuRgqH4EQ5Ya76rVwlEpw4Xu+TgWQUcdA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/typescript-estree": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/typescript-estree": "5.48.1",
         "debug": "^4.3.4"
       },
       "dependencies": {
@@ -20266,23 +20260,23 @@
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.45.0.tgz",
-      "integrity": "sha512-noDMjr87Arp/PuVrtvN3dXiJstQR1+XlQ4R1EvzG+NMgXi8CuMCXpb8JqNtFHKceVSQ985BZhfRdowJzbv4yKw==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.1.tgz",
+      "integrity": "sha512-S035ueRrbxRMKvSTv9vJKIWgr86BD8s3RqoRZmsSh/s8HhIs90g6UlK8ZabUSjUZQkhVxt7nmZ63VJ9dcZhtDQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/visitor-keys": "5.45.0"
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/visitor-keys": "5.48.1"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.45.0.tgz",
-      "integrity": "sha512-DY7BXVFSIGRGFZ574hTEyLPRiQIvI/9oGcN8t1A7f6zIs6ftbrU0nhyV26ZW//6f85avkwrLag424n+fkuoJ1Q==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz",
+      "integrity": "sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/typescript-estree": "5.45.0",
-        "@typescript-eslint/utils": "5.45.0",
+        "@typescript-eslint/typescript-estree": "5.48.1",
+        "@typescript-eslint/utils": "5.48.1",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -20299,19 +20293,19 @@
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.45.0.tgz",
-      "integrity": "sha512-QQij+u/vgskA66azc9dCmx+rev79PzX8uDHpsqSjEFtfF2gBUTRCpvYMh2gw2ghkJabNkPlSUCimsyBEQZd1DA==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.1.tgz",
+      "integrity": "sha512-xHyDLU6MSuEEdIlzrrAerCGS3T7AA/L8Hggd0RCYBi0w3JMvGYxlLlXHeg50JI9Tfg5MrtsfuNxbS/3zF1/ATg==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.0.tgz",
-      "integrity": "sha512-maRhLGSzqUpFcZgXxg1qc/+H0bT36lHK4APhp0AEUVrpSwXiRAomm/JGjSG+kNUio5kAa3uekCYu/47cnGn5EQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz",
+      "integrity": "sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/visitor-keys": "5.45.0",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/visitor-keys": "5.48.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -20351,28 +20345,28 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.45.0.tgz",
-      "integrity": "sha512-OUg2JvsVI1oIee/SwiejTot2OxwU8a7UfTFMOdlhD2y+Hl6memUSL4s98bpUTo8EpVEr0lmwlU7JSu/p2QpSvA==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.1.tgz",
+      "integrity": "sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/typescript-estree": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/typescript-estree": "5.48.1",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0",
         "semver": "^7.3.7"
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.0.tgz",
-      "integrity": "sha512-jc6Eccbn2RtQPr1s7th6jJWQHBHI6GBVQkCHoJFQ5UreaKm59Vxw+ynQUPPY2u2Amquc+7tmEoC2G52ApsGNNg==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.1.tgz",
+      "integrity": "sha512-Ns0XBwmfuX7ZknznfXozgnydyR8F6ev/KEGePP4i74uL3ArsKbEhJ7raeKr1JSa997DBDwol/4a0Y+At82c9dA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.45.0",
+        "@typescript-eslint/types": "5.48.1",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -22282,9 +22276,9 @@
       "peer": true
     },
     "cypress": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-11.2.0.tgz",
-      "integrity": "sha512-u61UGwtu7lpsNWLUma/FKNOsrjcI6wleNmda/TyKHe0dOBcVjbCPlp1N6uwFZ0doXev7f/91YDpU9bqDCFeBLA==",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.3.0.tgz",
+      "integrity": "sha512-ZQNebibi6NBt51TRxRMYKeFvIiQZ01t50HSy7z/JMgRVqBUey3cdjog5MYEbzG6Ktti5ckDt1tfcC47lmFwXkw==",
       "optional": true,
       "requires": {
         "@cypress/request": "^2.88.10",
@@ -22796,12 +22790,12 @@
       }
     },
     "echarts": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
-      "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.1.tgz",
+      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
       "requires": {
         "tslib": "2.3.0",
-        "zrender": "5.4.0"
+        "zrender": "5.4.1"
       },
       "dependencies": {
         "tslib": {
@@ -23297,13 +23291,13 @@
       }
     },
     "eslint": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz",
-      "integrity": "sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==",
+      "version": "8.31.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
+      "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
       "dev": true,
       "requires": {
-        "@eslint/eslintrc": "^1.3.3",
-        "@humanwhocodes/config-array": "^0.11.6",
+        "@eslint/eslintrc": "^1.4.1",
+        "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
@@ -23322,7 +23316,7 @@
         "file-entry-cache": "^6.0.1",
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
-        "globals": "^13.15.0",
+        "globals": "^13.19.0",
         "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
@@ -23425,9 +23419,9 @@
           }
         },
         "globals": {
-          "version": "13.16.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.16.0.tgz",
-          "integrity": "sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==",
+          "version": "13.19.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz",
+          "integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==",
           "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
@@ -25196,9 +25190,9 @@
       "optional": true
     },
     "json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.2.tgz",
+      "integrity": "sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ=="
     },
     "jsonfile": {
       "version": "6.1.0",
@@ -27380,9 +27374,9 @@
       "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
     },
     "prettier": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
-      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
+      "integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
       "dev": true
     },
     "pretty-bytes": {
@@ -27540,6 +27534,12 @@
         }
       }
     },
+    "qs": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "optional": true
+    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -27893,9 +27893,9 @@
       }
     },
     "rxjs": {
-      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
-      "integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
+      "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
       "requires": {
         "tslib": "^2.1.0"
       }
@@ -29738,9 +29738,9 @@
       }
     },
     "zrender": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
-      "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.1.tgz",
+      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
       "requires": {
         "tslib": "2.3.0"
       },

frontend/package.json

@@ -84,13 +84,13 @@
     "browserify": "^17.0.0",
     "clipboard": "^2.0.11",
     "domino": "^2.1.6",
-    "echarts": "~5.4.0",
+    "echarts": "~5.4.1",
     "echarts-gl": "^2.0.9",
     "lightweight-charts": "~3.8.0",
     "ngx-echarts": "~14.0.0",
     "ngx-infinite-scroll": "^14.0.1",
     "qrcode": "1.5.1",
-    "rxjs": "~7.5.7",
+    "rxjs": "~7.8.0",
     "tinyify": "^3.1.0",
     "tlite": "^0.1.9",
     "tslib": "~2.4.1",
@@ -100,17 +100,17 @@
     "@angular/compiler-cli": "^14.2.12",
     "@angular/language-service": "^14.2.12",
     "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "eslint": "^8.31.0",
     "http-proxy-middleware": "~2.0.6",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.2",
     "ts-node": "~10.9.1",
     "typescript": "~4.6.4"
   },
   "optionalDependencies": {
-    "@cypress/schematic": "~2.3.0",
-    "cypress": "^11.2.0",
+    "@cypress/schematic": "^2.4.0",
+    "cypress": "^12.3.0",
     "cypress-fail-on-console-error": "~4.0.2",
     "cypress-wait-until": "^1.7.2",
     "mock-socket": "~9.1.5",

frontend/proxy.conf.js

@@ -76,7 +76,7 @@ PROXY_CONFIG = [
 
 if (configContent && configContent.BASE_MODULE == "liquid") {
     PROXY_CONFIG.push({
-        context: ['/resources/pools.json',
+        context: [
             '/resources/assets.json', '/resources/assets.minimal.json',
             '/resources/assets-testnet.json', '/resources/assets-testnet.minimal.json'],
         target: "https://liquid.network",
@@ -85,7 +85,7 @@ if (configContent && configContent.BASE_MODULE == "liquid") {
     });
 } else {
     PROXY_CONFIG.push({
-        context: ['/resources/pools.json', '/resources/assets.json', '/resources/assets.minimal.json', '/resources/worldmap.json'],
+        context: ['/resources/assets.json', '/resources/assets.minimal.json', '/resources/worldmap.json'],
         target: "https://mempool.space",
         secure: false,
         changeOrigin: true,

frontend/src/app/app.constants.ts

@@ -120,7 +120,7 @@ export const languages: Language[] = [
    { code: 'he', name: 'עברית' },           // Hebrew
    { code: 'ka', name: 'ქართული' },         // Georgian
 // { code: 'lv', name: 'Latviešu' },        // Latvian
-// { code: 'lt', name: 'Lietuvių' },        // Lithuanian
+   { code: 'lt', name: 'Lietuvių' },        // Lithuanian
    { code: 'hu', name: 'Magyar' },          // Hungarian
    { code: 'mk', name: 'Македонски' },      // Macedonian
 // { code: 'ms', name: 'Bahasa Melayu' },   // Malay

frontend/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
 import { ElectrsApiService } from './services/electrs-api.service';
 import { StateService } from './services/state.service';
+import { CacheService } from './services/cache.service';
 import { EnterpriseService } from './services/enterprise.service';
 import { WebsocketService } from './services/websocket.service';
 import { AudioService } from './services/audio.service';
@@ -23,6 +24,7 @@ import { AppPreloadingStrategy } from './app.preloading-strategy';
 const providers = [
   ElectrsApiService,
   StateService,
+  CacheService,
   WebsocketService,
   AudioService,
   SeoService,

frontend/src/app/bisq/bisq-address/bisq-address.component.html

@@ -1,11 +1,9 @@
 <div class="container-xl">
   <h1 i18n="shared.address">Address</h1>
   <span class="address-link">
-    <a  [routerLink]="['/address/' | relativeUrl, addressString]">
-      <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
-      <span class="d-none d-lg-inline">{{ addressString }}</span>
-    </a>
-    <app-clipboard [text]="addressString"></app-clipboard>
+    <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
+      <app-clipboard [text]="addressString"></app-clipboard>
+    </app-truncate>
   </span>
   <br>
 

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html

@@ -6,12 +6,12 @@
         <h1 i18n="shared.transaction">Transaction</h1>
       </div>
 
-      <span class="tx-link float-left">
-        <a [routerLink]="['/tx' | relativeUrl, bisqTx.id]">
-          <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
-          <span class="d-none d-lg-inline">{{ bisqTx.id }}</span>
-        </a>
-        <app-clipboard [text]="bisqTx.id"></app-clipboard>
+      <span class="tx-link">
+        <span class="txid">
+          <app-truncate [text]="bisqTx.id" [lastChars]="12" [link]="['/tx/' | relativeUrl, bisqTx.id]">
+            <app-clipboard [text]="bisqTx.id"></app-clipboard>
+          </app-truncate>
+        </span>
       </span>
       <span class="grow"></span>
       <div class="container-buttons">

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

@@ -36,7 +36,9 @@ export class AddressLabelsComponent implements OnChanges {
 
   handleChannel() {
     const type = this.vout ? 'open' : 'close';
-    this.label = `Channel ${type}: ${this.channel.node_left.alias} <> ${this.channel.node_right.alias}`;
+    const leftNodeName = this.channel.node_left.alias || this.channel.node_left.public_key.substring(0, 10);
+    const rightNodeName = this.channel.node_right.alias || this.channel.node_right.public_key.substring(0, 10);
+    this.label = `Channel ${type}: ${leftNodeName} <> ${rightNodeName}`;
   }
 
   handleVin() {

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

@@ -6,17 +6,16 @@
     <div class="col-md">
       <div class="row d-flex justify-content-between">
         <div class="title-wrapper">
-          <h1 class="title truncated"><span class="first">{{addressString.slice(0,-4)}}</span><span class="last-four">{{addressString.slice(-4)}}</span></h1>
+          <h1 class="title"><app-truncate [text]="addressString"></app-truncate></h1>
         </div>
       </div>
       <table class="table table-borderless table-striped">
         <tbody>
           <tr *ngIf="addressInfo && addressInfo.unconfidential">
             <td i18n="address.unconfidential">Unconfidential</td>
-            <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
-              <span class="d-inline d-lg-none">{{ addressInfo.unconfidential | shortenString : 14 }}</span>
-              <span class="d-none d-lg-inline">{{ addressInfo.unconfidential }}</span>
-            </a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></td>
+            <td>
+              <app-truncate [text]="addressInfo.unconfidential" [lastChars]="7" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]"></app-truncate>
+            </td>
           </tr>
           <ng-template [ngIf]="!address.electrum">
             <tr>

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

@@ -2,11 +2,9 @@
   <div class="title-address">
     <h1 i18n="shared.address">Address</h1>
     <div class="tx-link">
-      <a [routerLink]="['/address/' | relativeUrl, addressString]" >
-        <span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
-        <span class="d-none d-lg-inline">{{ addressString }}</span>
-      </a>
-      <app-clipboard [text]="addressString"></app-clipboard>
+      <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
+        <app-clipboard [text]="addressString"></app-clipboard>
+      </app-truncate>
     </div>
   </div>
 
@@ -21,10 +19,11 @@
             <tbody>
               <tr *ngIf="addressInfo && addressInfo.unconfidential">
                 <td i18n="address.unconfidential">Unconfidential</td>
-                <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
-                  <span class="d-inline d-lg-none">{{ addressInfo.unconfidential | shortenString : 14 }}</span>
-                  <span class="d-none d-lg-inline">{{ addressInfo.unconfidential }}</span>
-                </a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></td>
+                <td>
+                  <app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]">
+                    <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
+                  </app-truncate>
+                </td>
               </tr>
               <ng-template [ngIf]="!address.electrum">
                 <tr>

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

@@ -42,6 +42,10 @@ export class AppComponent implements OnInit {
     if (event.target instanceof HTMLInputElement) {
       return;
     }
+    // prevent arrow key horizontal scrolling
+    if(["ArrowLeft","ArrowRight"].indexOf(event.code) > -1) {
+      event.preventDefault();
+    }
     this.stateService.keyNavigation$.next(event);
   }
 

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

@@ -2,11 +2,9 @@
   <div class="title-asset">
     <h1 i18n="asset|Liquid Asset page title">Asset</h1>
     <div class="tx-link">
-      <a [routerLink]="['/assets/asset/' | relativeUrl, assetString]">
-        <span class="d-inline d-lg-none">{{ assetString | shortenString : 24 }}</span>
-        <span class="d-none d-lg-inline">{{ assetString }}</span>
-      </a>
-      <app-clipboard [text]="assetString"></app-clipboard>
+      <app-truncate [text]="assetString" [lastChars]="8" [link]="['/assets/asset/' | relativeUrl, assetString]">
+        <app-clipboard [text]="assetString"></app-clipboard>
+      </app-truncate>
     </div>
   </div>
 

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

@@ -77,6 +77,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       cancelAnimationFrame(this.animationFrameRequest);
       clearTimeout(this.animationHeartBeat);
     }
+    this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
+    this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
   }
 
   clear(direction): void {

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

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

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

@@ -56,3 +56,7 @@
 ::ng-deep .symbol {
   font-size: 24px;
 }
+
+.badge {
+  transition: none;
+}

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

@@ -32,10 +32,10 @@
 
   <div class="box" *ngIf="!error">
     <div class="row">
-      <ng-template [ngIf]="!isLoadingBlock">
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
+      <div class="col-sm">
+        <table class="table table-borderless table-striped">
+          <tbody>
+            <ng-container *ngIf="!isLoadingBlock; else skeletonRows">
               <tr>
                 <td class="td-width" i18n="block.hash">Hash</td>
                 <td>&lrm;<a [routerLink]="['/block/' | relativeUrl, block.id]" title="{{ block.id }}">{{ block.id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.id"></app-clipboard></td>
@@ -54,83 +54,28 @@
                 <td i18n="block.weight">Weight</td>
                 <td [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></td>
               </tr>
-              <tr *ngIf="auditEnabled">
+              <tr *ngIf="!auditDataMissing && indexingAvailable">
                 <td i18n="block.health">Block health</td>
                 <td>
-                  <span *ngIf="blockAudit?.matchRate != null">{{ blockAudit.matchRate }}%</span>
-                  <span *ngIf="blockAudit?.matchRate === null" i18n="unknown">Unknown</span>
+                  <span
+                    class="health-badge badge"
+                    [class.badge-success]="blockAudit?.matchRate >= 99"
+                    [class.badge-warning]="blockAudit?.matchRate >= 75 && blockAudit?.matchRate < 99"
+                    [class.badge-danger]="blockAudit?.matchRate < 75"
+                    *ngIf="blockAudit?.matchRate != null; else nullHealth"
+                  >{{ blockAudit?.matchRate }}%</span>
+                  <ng-template #nullHealth>
+                    <ng-container *ngIf="!isLoadingAudit; else loadingHealth">
+                      <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
+                    </ng-container>
+                  </ng-template>
+                  <ng-template #loadingHealth>
+                    <span class="skeleton-loader" style="max-width: 60px"></span>
+                  </ng-template>
                 </td>
               </tr>
-              <ng-container *ngIf="webGlEnabled && (auditDataMissing || !indexingAvailable)">
-                <tr *ngIf="isMobile && auditEnabled"></tr>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                  <td i18n="mempool-block.fee-span">Fee span</td>
-                  <td><span>{{ block.extras.feeRange[0] | number:'1.0-0' }} - {{ block.extras.feeRange[block.extras.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
-                </tr>
-                <tr *ngIf="block?.extras?.medianFee != undefined">
-                  <td class="td-width" i18n="block.median-fee">Median fee</td>
-                  <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
-                </tr>
-                <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
-                  <tr>
-                    <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                    <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
-                      <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                      <span class="fiat">
-                        <app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
-                      </span>
-                    </td>
-                    <ng-template #liquidTotalFees>
-                      <td>
-                        <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
-                          [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
-                      </td>
-                    </ng-template>
-                  </tr>
-                  <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                    <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
-                    <td>
-                      <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                      <span class="fiat">
-                        <app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
-                      </span>
-                    </td>
-                  </tr>
-                </ng-template>
-                <ng-template #loadingFees>
-                  <tr>
-                    <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                    <td style="width: 75%;"><span class="skeleton-loader"></span></td>
-                  </tr>
-                  <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                    <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
-                    <td><span class="skeleton-loader"></span></td>
-                  </tr>
-                </ng-template>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                  <td i18n="block.miner">Miner</td>
-                  <td *ngIf="stateService.env.MINING_DASHBOARD">
-                    <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
-                      [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                      {{ block.extras.pool.name }}
-                    </a>
-                  </td>
-                  <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
-                    <span placement="bottom" class="badge"
-                      [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                      {{ block.extras.pool.name }}
-                  </span>
-                  </td>
-                </tr>
-              </ng-container>
-            </tbody>
-          </table>
-        </div>
-      </ng-template>
-      <ng-template [ngIf]="isLoadingBlock">
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
+            </ng-container>
+            <ng-template #skeletonRows>
               <tr>
                 <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
@@ -143,114 +88,18 @@
               <tr>
                 <td colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
-              <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+              <tr *ngIf="!auditDataMissing && indexingAvailable">
                 <td colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
-              <ng-container *ngIf="webGlEnabled && (!indexingAvailable || auditDataMissing)">
-                <tr *ngIf="isMobile && !auditEnabled"></tr>
-                <tr>
-                  <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr>
-                  <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr>
-                  <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                  <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                  <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-              </ng-container>
-            </tbody>
-          </table>
-        </div>
-      </ng-template>
-      <div class="col-sm">
-        <table class="table table-borderless table-striped" *ngIf="!isLoadingBlock && (!auditDataMissing || indexingAvailable && !webGlEnabled)">
-          <tbody>
-            <tr *ngIf="isMobile && auditEnabled"></tr>
-            <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-              <td i18n="mempool-block.fee-span">Fee span</td>
-              <td><span>{{ block.extras.feeRange[0] | number:'1.0-0' }} - {{ block.extras.feeRange[block.extras.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
-            </tr>
-            <tr *ngIf="block?.extras?.medianFee != undefined">
-              <td class="td-width" i18n="block.median-fee">Median fee</td>
-              <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
-            </tr>
-            <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
-              <tr>
-                <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
-                  <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                  <span class="fiat">
-                    <app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
-                  </span>
-                </td>
-                <ng-template #liquidTotalFees>
-                  <td>
-                    <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
-                      [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
-                  </td>
-                </ng-template>
-              </tr>
-              <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
-                <td>
-                  <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-                  <span class="fiat">
-                    <app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
-                  </span>
-                </td>
-              </tr>
             </ng-template>
-            <ng-template #loadingFees>
-              <tr>
-                <td i18n="block.total-fees|Total fees in a block">Total fees</td>
-                <td style="width: 75%;"><span class="skeleton-loader"></span></td>
-              </tr>
-              <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-                <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
-                <td><span class="skeleton-loader"></span></td>
-              </tr>
-            </ng-template>
-            <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-              <td i18n="block.miner">Miner</td>
-              <td *ngIf="stateService.env.MINING_DASHBOARD">
-                <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
-                  [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                  {{ block.extras.pool.name }}
-                </a>
-              </td>
-              <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
-                <span placement="bottom" class="badge"
-                  [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
-                  {{ block.extras.pool.name }}
-              </span>
-              </td>
-            </tr>
+            <ng-container *ngIf="isMobile || (webGlEnabled && (auditDataMissing || !indexingAvailable)); then restOfTable;"></ng-container>
           </tbody>
         </table>
-        <table class="table table-borderless table-striped" *ngIf="isLoadingBlock && !auditDataMissing && (indexingAvailable || !webGlEnabled)">
+      </div>
+      <div class="col-sm">
+        <table class="table table-borderless table-striped" *ngIf="!isMobile && !(webGlEnabled && (auditDataMissing || !indexingAvailable))">
           <tbody>
-            <tr *ngIf="isMobile && !auditEnabled"></tr>
-            <tr>
-              <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
-            <tr>
-              <td colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
-            <tr>
-              <td colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
-            <tr>
-              <td colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
-            <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
-              <td colspan="2"><span class="skeleton-loader"></span></td>
-            </tr>
+            <ng-container *ngTemplateOutlet="restOfTable"></ng-container>
           </tbody>
         </table>
         <div class="col-sm chart-container" *ngIf="webGlEnabled && (!indexingAvailable || auditDataMissing)">
@@ -263,11 +112,93 @@
             [flip]="false"
             (txClickEvent)="onTxClick($event)"
           ></app-block-overview-graph>
+          <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
         </div>
       </div>
     </div>
   </div>
 
+  <ng-template #restOfTable>
+    <ng-container *ngIf="!isLoadingBlock; else loadingRest">
+      <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+        <td i18n="mempool-block.fee-span">Fee span</td>
+        <td><span>{{ block.extras.feeRange[0] | number:'1.0-0' }} - {{ block.extras.feeRange[block.extras.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
+      </tr>
+      <tr *ngIf="block?.extras?.medianFee != undefined">
+        <td class="td-width" i18n="block.median-fee">Median fee</td>
+        <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
+      </tr>
+      <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
+        <tr>
+          <td i18n="block.total-fees|Total fees in a block">Total fees</td>
+          <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
+            <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+            <span class="fiat">
+              <app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
+            </span>
+          </td>
+          <ng-template #liquidTotalFees>
+            <td>
+              <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
+                [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
+            </td>
+          </ng-template>
+        </tr>
+        <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+          <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
+          <td>
+            <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+            <span class="fiat">
+              <app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
+            </span>
+          </td>
+        </tr>
+      </ng-template>
+      <ng-template #loadingFees>
+        <tr>
+          <td i18n="block.total-fees|Total fees in a block">Total fees</td>
+          <td style="width: 75%;"><span class="skeleton-loader"></span></td>
+        </tr>
+        <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+          <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
+          <td><span class="skeleton-loader"></span></td>
+        </tr>
+      </ng-template>
+      <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+        <td i18n="block.miner">Miner</td>
+        <td *ngIf="stateService.env.MINING_DASHBOARD">
+          <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
+            [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+            {{ block.extras.pool.name }}
+          </a>
+        </td>
+        <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
+          <span placement="bottom" class="badge"
+            [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+            {{ block.extras.pool.name }}
+        </span>
+        </td>
+      </tr>
+    </ng-container>
+    <ng-template #loadingRest>
+      <tr>
+        <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr>
+        <td colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr>
+        <td colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr>
+        <td colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+      <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+        <td colspan="2"><span class="skeleton-loader"></span></td>
+      </tr>
+    </ng-template>
+  </ng-template>
+
   <span id="overview"></span>
 
   <br>
@@ -283,15 +214,21 @@
     <div class="row">
       <div class="col-sm">
         <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.projected-block">Projected Block</h3>
-        <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75"
-          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
-          (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !auditEnabled"></app-block-overview-graph> 
+        <div class="block-graph-wrapper">
+          <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75"
+            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
+            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !auditEnabled"></app-block-overview-graph>
+          <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
+        </div>
       </div>
       <div class="col-sm" *ngIf="!isMobile">
         <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.actual-block">Actual Block</h3>
-        <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75"
-          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"
-          (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !auditEnabled"></app-block-overview-graph>
+        <div class="block-graph-wrapper">
+          <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75"
+            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"
+            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !auditEnabled"></app-block-overview-graph>
+          <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
+        </div>
       </div>
     </div>
   </div>
@@ -413,5 +350,17 @@
 
 </div>
 
+<ng-template #emptyBlockInfo>
+  <a
+    *ngIf="network === '' && block && block.height > 100000 && block.tx_count <= 1"
+    class="info-bubble-link badge badge-primary"
+    [routerLink]="['/docs/faq/' | relativeUrl]"
+    fragment="why-empty-blocks"
+  >
+    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+    <span i18n="block.empty-block-explanation">Why is this block empty?</span>
+  </a>
+</ng-template>
+
 <br>
 <br>

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

@@ -202,4 +202,24 @@ h1 {
   &.active, &:hover {
     border-color: white;
   }
+}
+
+.block-graph-wrapper {
+  position: relative;
+}
+
+.info-bubble-link {
+  position: absolute;
+  display: block;
+  top: 2em;
+  left: 50%;
+  margin: auto;
+  text-align: center;
+  padding: 0.5em 1em;
+  font-size: 80%;
+  transform: translateX(-50%);
+
+  .ng-fa-icon {
+    margin-right: 1em;
+  }
 }

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

@@ -43,6 +43,7 @@ export class BlockComponent implements OnInit, OnDestroy {
   strippedTransactions: TransactionStripped[];
   overviewTransitionDirection: string;
   isLoadingOverview = true;
+  isLoadingAudit = true;
   error: any;
   blockSubsidy: number;
   fees: number;
@@ -137,7 +138,6 @@ export class BlockComponent implements OnInit, OnDestroy {
         this.page = 1;
         this.error = undefined;
         this.fees = undefined;
-        this.stateService.markBlock$.next({});
         this.auditDataMissing = false;
 
         if (history.state.data && history.state.data.blockHeight) {
@@ -297,13 +297,18 @@ export class BlockComponent implements OnInit, OnDestroy {
       this.auditSubscription = block$.pipe(
         startWith(null),
         pairwise(),
-        switchMap(([prevBlock, block]) => this.apiService.getBlockAudit$(block.id)
-          .pipe(
-            catchError((err) => {
-              this.overviewError = err;
-              return of([]);
-            })
-          )
+        switchMap(([prevBlock, block]) => {
+          this.isLoadingAudit = true;
+          this.blockAudit = null;
+          return this.apiService.getBlockAudit$(block.id)
+            .pipe(
+              catchError((err) => {
+                this.overviewError = err;
+                this.isLoadingAudit = false;
+                return of([]);
+              })
+            );
+        }
         ),
         filter((response) => response != null),
         map((response) => {
@@ -375,12 +380,14 @@ export class BlockComponent implements OnInit, OnDestroy {
           console.log(err);
           this.error = err;
           this.isLoadingOverview = false;
+          this.isLoadingAudit = false;
           return of(null);
         }),
       ).subscribe((blockAudit) => {
         this.blockAudit = blockAudit;
         this.setupBlockGraphs();
         this.isLoadingOverview = false;
+        this.isLoadingAudit = false;
       });
     }
 

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

@@ -1,36 +1,55 @@
-<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
-  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
-    <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
-      <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
-        class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
-      <div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
-        <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
+<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [style.left]="static ? (offset || 0) + 'px' : null" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
+  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
+    <ng-container *ngIf="block && !block.loading && !block.placeholder; else placeholderBlock">
+      <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
+        <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
+          class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
+        <div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
+          <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
+        </div>
+        <div class="block-body">
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-fees'" class="fees">
+            ~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          </div>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="block?.extras?.feeRange">
+            {{ block?.extras?.feeRange?.[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          </div>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="!block?.extras?.feeRange">
+            &nbsp;
+          </div>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-total-fees'" *ngIf="showMiningInfo" class="block-size">
+            <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+          </div>
+          <div [attr.data-cy]="'bitcoin-block-' + i + 'block-size'" *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
+            <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
+            <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+            <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+          </div>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-time'" class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
+        </div>
+        <div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
+          <a [attr.data-cy]="'bitcoin-block-' + i + '-pool'" class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
+            {{ block.extras.pool.name}}</a>
+        </div>
       </div>
-      <div class="block-body">
-        <div [attr.data-cy]="'bitcoin-block-' + i + '-fees'" class="fees">
-          ~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+    </ng-container>
+    <ng-template #placeholderBlock>
+      <ng-container *ngIf="block && block.placeholder; else loadingBlock">
+        <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block placeholder-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
+ 
         </div>
-        <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span">
-          {{ block?.extras?.feeRange[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+      </ng-container>
+    </ng-template>
+    <ng-template #loadingBlock>
+      <ng-container *ngIf="block && block.loading">
+        <div class="flashing">
+          <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>
         </div>
-        <div [attr.data-cy]="'bitcoin-block-' + i + '-total-fees'" *ngIf="showMiningInfo" class="block-size">
-          <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-        </div>
-        <div [attr.data-cy]="'bitcoin-block-' + i + 'block-size'" *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
-        <div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
-          <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
-          <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
-          <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
-        </div>
-        <div [attr.data-cy]="'bitcoin-block-' + i + '-time'" class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
-      </div>
-      <div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
-        <a [attr.data-cy]="'bitcoin-block-' + i + '-pool'" class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
-          {{ block.extras.pool.name}}</a>
-      </div>
-    </div>
+      </ng-container>
+    </ng-template>
   </div>
-<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
+<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="arrowTransition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>
 
 <ng-template #loadingBlocksTemplate>

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

@@ -25,6 +25,10 @@
   transition: background 2s, left 2s, transform 1s;
 }
 
+.mined-block.placeholder-block {
+  background: none !important;
+}
+
 .block-size {
   font-size: 16px;
   font-weight: bold;
@@ -96,6 +100,16 @@
   transform-origin: top;
 }
 
+.bitcoin-block.placeholder-block::after {
+  content: none;
+  background: 0;
+}
+
+.bitcoin-block.placeholder-block::before {
+  content: none;
+  background: 0;
+}
+
 .black-background {
   background-color: #11131f;
   z-index: 100;

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

@@ -1,10 +1,16 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { specialBlocks } from '../../app.constants';
 import { BlockExtended } from '../../interfaces/node-api.interface';
 import { Location } from '@angular/common';
 import { config } from 'process';
+import { CacheService } from 'src/app/services/cache.service';
+
+interface BlockchainBlock extends BlockExtended {
+  placeholder?: boolean;
+  loading?: boolean;
+}
 
 @Component({
   selector: 'app-blockchain-blocks',
@@ -12,13 +18,19 @@ import { config } from 'process';
   styleUrls: ['./blockchain-blocks.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BlockchainBlocksComponent implements OnInit, OnDestroy {
+export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() static: boolean = false;
+  @Input() offset: number = 0;
+  @Input() height: number = 0;
+  @Input() count: number = 8;
+  
   specialBlocks = specialBlocks;
   network = '';
-  blocks: BlockExtended[] = [];
+  blocks: BlockchainBlock[] = [];
   emptyBlocks: BlockExtended[] = this.mountEmptyBlocks();
   markHeight: number;
   blocksSubscription: Subscription;
+  blockPageSubscription: Subscription;
   networkSubscription: Subscription;
   tabHiddenSubscription: Subscription;
   markBlockSubscription: Subscription;
@@ -31,7 +43,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   arrowVisible = false;
   arrowLeftPx = 30;
   blocksFilled = false;
-  transition = '1s';
+  arrowTransition = '1s';
   showMiningInfo = false;
   timeLtrSubscription: Subscription;
   timeLtr: boolean;
@@ -47,6 +59,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
 
   constructor(
     public stateService: StateService,
+    public cacheService: CacheService,
     private cd: ChangeDetectorRef,
     private location: Location,
   ) {
@@ -75,44 +88,52 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;
     this.networkSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
     this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
-    this.blocksSubscription = this.stateService.blocks$
-      .subscribe(([block, txConfirmed]) => {
-        if (this.blocks.some((b) => b.height === block.height)) {
-          return;
-        }
+    if (!this.static) {
+      this.blocksSubscription = this.stateService.blocks$
+        .subscribe(([block, txConfirmed]) => {
+          if (this.blocks.some((b) => b.height === block.height)) {
+            return;
+          }
 
-        if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
-          this.blocks = [];
-          this.blocksFilled = false;
-        }
+          if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
+            this.blocks = [];
+            this.blocksFilled = false;
+          }
 
-        this.blocks.unshift(block);
-        this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
+          this.blocks.unshift(block);
+          this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
 
-        if (this.blocksFilled && !this.tabHidden && block.extras) {
-          block.extras.stage = block.extras.matchRate >= 66 ? 1 : 2;
-        }
+          if (txConfirmed) {
+            this.markHeight = block.height;
+            this.moveArrowToPosition(true, true);
+          } else {
+            this.moveArrowToPosition(true, false);
+          }
 
-        if (txConfirmed) {
-          this.markHeight = block.height;
-          this.moveArrowToPosition(true, true);
-        } else {
-          this.moveArrowToPosition(true, false);
-        }
-
-        this.blockStyles = [];
-        this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
-        setTimeout(() => {
           this.blockStyles = [];
-          this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
-          this.cd.markForCheck();
-        }, 50);
+          if (this.blocksFilled) {
+            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
+            setTimeout(() => {
+              this.blockStyles = [];
+              this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
+              this.cd.markForCheck();
+            }, 50);
+          } else {
+            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
+          }
 
-        if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
-          this.blocksFilled = true;
+          if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
+            this.blocksFilled = true;
+          }
+          this.cd.markForCheck();
+        });
+    } else {
+      this.blockPageSubscription = this.cacheService.loadedBlocks$.subscribe((block) => {
+        if (block.height <= this.height && block.height > this.height - this.count) {
+          this.onBlockLoaded(block);
         }
-        this.cd.markForCheck();
       });
+    }
 
     this.markBlockSubscription = this.stateService.markBlock$
       .subscribe((state) => {
@@ -123,10 +144,26 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         this.moveArrowToPosition(false);
         this.cd.markForCheck();
       });
+
+      if (this.static) {
+        this.updateStaticBlocks();
+      }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.static) {
+      const animateSlide = changes.height && (changes.height.currentValue === changes.height.previousValue + 1);
+      this.updateStaticBlocks(animateSlide);
+    }
   }
 
   ngOnDestroy() {
-    this.blocksSubscription.unsubscribe();
+    if (this.blocksSubscription) {
+      this.blocksSubscription.unsubscribe();
+    }
+    if (this.blockPageSubscription) {
+      this.blockPageSubscription.unsubscribe();
+    }
     this.networkSubscription.unsubscribe();
     this.tabHiddenSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
@@ -142,13 +179,13 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
     if (blockindex > -1) {
       if (!animate) {
-        this.transition = 'inherit';
+        this.arrowTransition = 'inherit';
       }
       this.arrowVisible = true;
       if (newBlockFromLeft) {
         this.arrowLeftPx = blockindex * 155 + 30 - 205;
         setTimeout(() => {
-          this.transition = '2s';
+          this.arrowTransition = '2s';
           this.arrowLeftPx = blockindex * 155 + 30;
           this.cd.markForCheck();
         }, 50);
@@ -156,45 +193,117 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         this.arrowLeftPx = blockindex * 155 + 30;
         if (!animate) {
           setTimeout(() => {
-            this.transition = '2s';
+            this.arrowTransition = '2s';
             this.cd.markForCheck();
-          });
+          }, 50);
         }
       }
+    } else {
+      this.arrowVisible = false;
     }
   }
 
-  trackByBlocksFn(index: number, item: BlockExtended) {
+  trackByBlocksFn(index: number, item: BlockchainBlock) {
     return item.height;
   }
 
-  getStyleForBlock(block: BlockExtended) {
+  updateStaticBlocks(animateSlide: boolean = false) {
+    // reset blocks
+    this.blocks = [];
+    this.blockStyles = [];
+    while (this.blocks.length < this.count) {
+      const height = this.height - this.blocks.length;
+      let block;
+      if (height >= 0) {
+        this.cacheService.loadBlock(height);
+        block = this.cacheService.getCachedBlock(height) || null;
+      }
+      this.blocks.push(block || {
+        placeholder: height < 0,
+        loading: height >= 0,
+        id: '',
+        height,
+        version: 0,
+        timestamp: 0,
+        bits: 0,
+        nonce: 0,
+        difficulty: 0,
+        merkle_root: '',
+        tx_count: 0,
+        size: 0,
+        weight: 0,
+        previousblockhash: '',
+      });
+    }
+    this.blocks = this.blocks.slice(0, this.count);
+    this.blockStyles = [];
+    this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -155 : 0)));
+    this.cd.markForCheck();
+    if (animateSlide) {
+      // animate blocks slide right
+      setTimeout(() => {
+        this.blockStyles = [];
+        this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
+        this.cd.markForCheck();
+      }, 50);
+      this.moveArrowToPosition(true, true);
+    } else {
+      this.moveArrowToPosition(false, false);
+    }
+  }
+
+  onBlockLoaded(block: BlockExtended) {
+    const blockIndex = this.height - block.height;
+    if (blockIndex >= 0 && blockIndex < this.blocks.length) {
+      this.blocks[blockIndex] = block;
+      this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex);
+    }
+    this.cd.markForCheck();
+  }
+
+  getStyleForBlock(block: BlockchainBlock, index: number, animateEnterFrom: number = 0) {
+    if (!block || block.placeholder) {
+      return this.getStyleForPlaceholderBlock(index, animateEnterFrom);
+    } else if (block.loading) {
+      return this.getStyleForLoadingBlock(index, animateEnterFrom);
+    }
     const greenBackgroundHeight = 100 - (block.weight / this.stateService.env.BLOCK_WEIGHT_UNITS) * 100;
     let addLeft = 0;
 
-    if (block?.extras?.stage === 1) {
-      block.extras.stage = 2;
-      addLeft = -205;
+    if (animateEnterFrom) {
+      addLeft = animateEnterFrom || 0;
     }
 
     return {
-      left: addLeft + 155 * this.blocks.indexOf(block) + 'px',
+      left: addLeft + 155 * index + 'px',
       background: `repeating-linear-gradient(
         #2d3348,
         #2d3348 ${greenBackgroundHeight}%,
         ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
         ${this.gradientColors[this.network][1]} 100%
       )`,
+      transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
     };
   }
 
-  getStyleForEmptyBlock(block: BlockExtended) {
-    let addLeft = 0;
+  getStyleForLoadingBlock(index: number, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;
 
-    if (block?.extras?.stage === 1) {
-      block.extras.stage = 2;
-      addLeft = -205;
-    }
+    return {
+      left: addLeft + (155 * index) + 'px',
+      background: "#2d3348",
+    };
+  }
+
+  getStyleForPlaceholderBlock(index: number, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;
+    return {
+      left: addLeft + (155 * index) + 'px',
+    };
+  }
+
+  getStyleForEmptyBlock(block: BlockExtended, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;
 
     return {
       left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
@@ -219,7 +328,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         weight: 0,
         previousblockhash: '',
         matchRate: 0,
-        stage: 0,
       });
     }
     return emptyBlocks;

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

@@ -2,10 +2,14 @@
   <div class="position-container" [ngClass]="network ? network : ''">
     <span>
       <div class="blocks-wrapper">
-        <app-mempool-blocks></app-mempool-blocks>
-        <app-blockchain-blocks></app-blockchain-blocks>
+        <div class="scroll-spacer" *ngIf="minScrollWidth" [style.left]="minScrollWidth + 'px'"></div>
+        <app-mempool-blocks [hidden]="pageIndex > 0"></app-mempool-blocks>
+        <app-blockchain-blocks [hidden]="pageIndex > 0"></app-blockchain-blocks>
+        <ng-container *ngFor="let page of pages; trackBy: trackByPageFn">
+          <app-blockchain-blocks [static]="true" [offset]="page.offset" [height]="page.height" [count]="blocksPerPage"></app-blockchain-blocks>
+        </ng-container>
       </div>
-      <div id="divider">
+      <div id="divider" [hidden]="pageIndex > 0">
         <button class="time-toggle" (click)="toggleTimeDirection()"><fa-icon [icon]="['fas', 'exchange-alt']" [fixedWidth]="true"></fa-icon></button>
       </div>
     </span>

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

@@ -72,6 +72,15 @@
   position: relative;
 }
 
+.scroll-spacer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
 .loading-block {
   position: absolute;
   text-align: center;

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 
@@ -9,6 +9,11 @@ import { StateService } from '../../services/state.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainComponent implements OnInit, OnDestroy {
+  @Input() pages: any[] = [];
+  @Input() pageIndex: number;
+  @Input() blocksPerPage: number = 8;
+  @Input() minScrollWidth: number = 0;
+
   network: string;
   timeLtrSubscription: Subscription;
   timeLtr: boolean = this.stateService.timeLtr.value;
@@ -29,6 +34,10 @@ export class BlockchainComponent implements OnInit, OnDestroy {
     this.timeLtrSubscription.unsubscribe();
   }
 
+  trackByPageFn(index: number, item: { index: number }) {
+    return item.index;
+  }
+
   toggleTimeDirection() {
     this.ltrTransitionEnabled = true;
     this.stateService.timeLtr.next(!this.timeLtr);

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

@@ -14,7 +14,7 @@
           i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th>
         <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
         <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
-        <th *ngIf="indexingAvailable" class="health text-left" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
+        <th *ngIf="indexingAvailable" class="health text-right" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
           i18n-ngbTooltip="latest-blocks.health" ngbTooltip="Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Health</th>
         <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
           i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
@@ -27,7 +27,7 @@
       <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
           <td class="text-left" [class]="widget ? 'widget' : ''">
-            <a [routerLink]="['/block' | relativeUrl, block.id]">{{ block.height }}</a>
+            <a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
           </td>
           <td  *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <div class="tooltip-custom">
@@ -46,16 +46,23 @@
             <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
           </td>
           <td *ngIf="indexingAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
-            <a class="clear-link" [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null">
-              <div class="progress progress-health">
-                <div class="progress-bar progress-bar-health" role="progressbar"
-                  [ngStyle]="{'width': (100 - (auditScores[block.id] || 0)) + '%' }"></div>
-                <div class="progress-text">
-                  <span *ngIf="auditScores[block.id] != null;">{{ auditScores[block.id] }}%</span>
-                  <span *ngIf="auditScores[block.id] == null">~</span>
-                </div>
-              </div>
-            </a>
+            <a
+              class="health-badge badge"
+              [class.badge-success]="auditScores[block.id] >= 99"
+              [class.badge-warning]="auditScores[block.id] >= 75 && auditScores[block.id] < 99"
+              [class.badge-danger]="auditScores[block.id] < 75"
+              [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null"
+              [state]="{ data: { block: block } }"
+              *ngIf="auditScores[block.id] != null; else nullHealth"
+            >{{ auditScores[block.id] }}%</a>
+            <ng-template #nullHealth>
+              <ng-container *ngIf="!loadingScores; else loadingHealth">
+                <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
+              </ng-container>
+            </ng-template>
+            <ng-template #loadingHealth>
+              <span class="skeleton-loader" style="max-width: 60px"></span>
+            </ng-template>
           </td>
           <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>

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

@@ -23,6 +23,7 @@ export class BlocksList implements OnInit, OnDestroy {
 
   indexingAvailable = false;
   isLoading = true;
+  loadingScores = true;
   fromBlockHeight = undefined;
   paginationMaxSize: number;
   page = 1;
@@ -113,6 +114,7 @@ export class BlocksList implements OnInit, OnDestroy {
     if (this.indexingAvailable) {
       this.auditScoreSubscription = this.fromHeightSubject.pipe(
         switchMap((fromBlockHeight) => {
+          this.loadingScores = true;
           return this.apiService.getBlockAuditScores$(this.page === 1 ? undefined : fromBlockHeight)
             .pipe(
               catchError(() => {
@@ -124,6 +126,7 @@ export class BlocksList implements OnInit, OnDestroy {
         Object.values(scores).forEach(score => {
           this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
         });
+        this.loadingScores = false;
       });
 
       this.latestScoreSubscription = this.stateService.blocks$.pipe(

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

@@ -64,26 +64,6 @@
     white-space: nowrap;
     margin: 0;
     display: inline-block;
-
-    &.truncated {
-      text-overflow: unset;
-      display: flex;
-      flex-direction: row;
-      align-items: baseline;
-
-      .first {
-        flex-grow: 1;
-        flex-shrink: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin-right: -2px;
-      }
-
-      .last-four {
-        flex-shrink: 0;
-        flex-grow: 0;
-      }
-    }
   }
 
   ::ng-deep .title-wrapper {

frontend/src/app/components/reward-stats/reward-stats.component.html

@@ -13,21 +13,21 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards-per-tx" i18n-ngbTooltip="mining.rewards-per-tx"
-      ngbTooltip="Reward Per Tx" placement="bottom" #rewardspertx [disableTooltip]="!isEllipsisActive(rewardspertx)">Reward Per Tx</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc" ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
+      <h5 class="card-title" i18n="mining.fees-per-block" i18n-ngbTooltip="mining.fees-per-block"
+      ngbTooltip="Avg block Fees" placement="bottom" #rewardsperblock [disableTooltip]="!isEllipsisActive(rewardsperblock)">Avg Block Fees</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.fees-per-block-desc" ngbTooltip="Average fees per block in the past 144 blocks" placement="bottom">
         <div class="fee-text">
-          {{ rewardStats.rewardPerTx | amountShortener: 2 }}
-          <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
+          {{ (rewardStats.feePerBlock / 100000000) | amountShortener: 4 }}
+          <span i18n="shared.btc-block|BTC/block">BTC/block</span>
         </div>
         <span class="fiat">
-          <app-fiat [value]="rewardStats.rewardPerTx"></app-fiat>
+          <app-fiat [value]="rewardStats.feePerBlock"></app-fiat>
         </span>
       </div>
     </div>
     <div class="item">
       <h5 class="card-title" i18n="mining.average-fee" i18n-ngbTooltip="mining.average-fee"
-      ngbTooltip="Average Fee" placement="bottom" #averagefee [disableTooltip]="!isEllipsisActive(averagefee)">Average Fee</h5>
+      ngbTooltip="Avg Tx Fee" placement="bottom" #averagefee [disableTooltip]="!isEllipsisActive(averagefee)">Avg Tx Fee</h5>
       <div class="card-text" i18n-ngbTooltip="mining.average-fee" ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
         <div class="fee-text">{{ rewardStats.feePerTx | amountShortener: 2 }}
           <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>

frontend/src/app/components/reward-stats/reward-stats.component.ts

@@ -42,8 +42,8 @@ export class RewardStatsComponent implements OnInit {
         map((stats) => {
           return {
             totalReward: stats.totalReward,
-            rewardPerTx: stats.totalReward / stats.totalTx,
             feePerTx: stats.totalFee / stats.totalTx,
+            feePerBlock: stats.totalFee / 144,
           };
         })
       );

frontend/src/app/components/search-form/search-form.component.html

@@ -5,7 +5,7 @@
       <app-search-results #searchResults [hidden]="dropdownHidden" [results]="typeAhead$ | async" (selectedResult)="selectedResult($event)"></app-search-results>
     </div>
     <div>
-      <button [disabled]="isSearching" type="submit" class="btn btn-block btn-primary">
+      <button [disabled]="isSearching" type="submit" class="btn btn-block btn-purple">
         <fa-icon *ngIf="!(isTypeaheading$ | async) else searchLoading" [icon]="['fas', 'search']" [fixedWidth]="true" i18n-title="search-form.search-title" title="Search"></fa-icon>
       </button>
     </div>

frontend/src/app/components/search-form/search-form.component.scss

@@ -43,9 +43,6 @@ form {
   @media (min-width: 1200px) {
     min-width: 300px;
   }
-  input {
-    border: 0px;
-  }
   .btn {
     width: 100px;
   }

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

@@ -11,8 +11,9 @@
 <div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
   (mousedown)="onMouseDown($event)"
   (dragstart)="onDragStart($event)"
+  (scroll)="onScroll($event)"
 >
-<app-blockchain></app-blockchain>
+  <app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
 </div>
 
 <router-outlet></router-outlet>

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

@@ -19,16 +19,51 @@ export class StartComponent implements OnInit, OnDestroy {
   blockchainScrollLeftInit: number;
   timeLtrSubscription: Subscription;
   timeLtr: boolean = this.stateService.timeLtr.value;
+  chainTipSubscription: Subscription;
+  chainTip: number = -1;
+  markBlockSubscription: Subscription;
   @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
 
+  isMobile: boolean = false;
+  blockWidth = 155;
+  blocksPerPage: number = 1;
+  pageWidth: number;
+  firstPageWidth: number;
+  minScrollWidth: number;
+  pageIndex: number = 0;
+  pages: any[] = [];
+  pendingMark: number | void = null;
+
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
+    this.firstPageWidth = 40 + (this.blockWidth * this.stateService.env.KEEP_BLOCKS_AMOUNT);
+    this.onResize();
+    this.updatePages();
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
       this.timeLtr = !!ltr;
     });
+    this.chainTipSubscription = this.stateService.chainTip$.subscribe((height) => {
+      this.chainTip = height;
+      this.updatePages();
+      if (this.pendingMark != null) {
+        this.scrollToBlock(this.pendingMark);
+        this.pendingMark = null;
+      }
+    });
+    this.markBlockSubscription = this.stateService.markBlock$.subscribe((mark) => {
+      if (mark?.blockHeight != null) {
+        if (this.chainTip >=0) {
+          if (!this.blockInViewport(mark.blockHeight)) {
+            this.scrollToBlock(mark.blockHeight);
+          }
+        } else {
+          this.pendingMark = mark.blockHeight;
+        }
+      }
+    });
     this.stateService.blocks$
       .subscribe((blocks: any) => {
         if (this.stateService.network !== '') {
@@ -55,6 +90,34 @@ export class StartComponent implements OnInit, OnDestroy {
       });
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.isMobile = window.innerWidth <= 767.98;
+    let firstVisibleBlock;
+    let offset;
+    if (this.blockchainContainer?.nativeElement != null) {
+      this.pages.forEach(page => {
+        const left = page.offset - this.getConvertedScrollOffset();
+        const right = left + this.pageWidth;
+        if (left <= 0 && right > 0) {
+          const blockIndex = Math.max(0, Math.floor(left / -this.blockWidth));
+          firstVisibleBlock = page.height - blockIndex;
+          offset = left + (blockIndex * this.blockWidth);
+        }
+      });
+    }
+
+    this.blocksPerPage = Math.ceil(window.innerWidth / this.blockWidth);
+    this.pageWidth = this.blocksPerPage * this.blockWidth;
+    this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2);
+
+    if (firstVisibleBlock != null) {
+      this.scrollToBlock(firstVisibleBlock, offset);
+    } else {
+      this.updatePages();
+    }
+  }
+
   onMouseDown(event: MouseEvent) {
     this.mouseDragStartX = event.clientX;
     this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
@@ -70,7 +133,7 @@ export class StartComponent implements OnInit, OnDestroy {
     if (this.mouseDragStartX != null) {
       this.stateService.setBlockScrollingInProgress(true);
       this.blockchainContainer.nativeElement.scrollLeft =
-        this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX
+        this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX;
     }
   }
   @HostListener('document:mouseup', [])
@@ -79,7 +142,149 @@ export class StartComponent implements OnInit, OnDestroy {
     this.stateService.setBlockScrollingInProgress(false);
   }
 
+  onScroll(e) {
+    const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1];
+    // compensate for css transform
+    const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
+    const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation;
+    const forwardThreshold = middlePage.offset - (this.pageWidth * 0.5) + translation;
+    const scrollLeft = this.getConvertedScrollOffset();
+    if (scrollLeft > backThreshold) {
+      if (this.shiftPagesBack()) {
+        this.addConvertedScrollOffset(-this.pageWidth);
+        this.blockchainScrollLeftInit -= this.pageWidth;
+      }
+    } else if (scrollLeft < forwardThreshold) {
+      if (this.shiftPagesForward()) {
+        this.addConvertedScrollOffset(this.pageWidth);
+        this.blockchainScrollLeftInit += this.pageWidth;
+      }
+    }
+  }
+
+  scrollToBlock(height, blockOffset = 0) {
+    if (!this.blockchainContainer?.nativeElement) {
+      setTimeout(() => { this.scrollToBlock(height, blockOffset); }, 50);
+      return;
+    }
+    const targetHeight = this.isMobile ? height - 1 : height;
+    const viewingPageIndex = this.getPageIndexOf(targetHeight);
+    const pages = [];
+    this.pageIndex = Math.max(viewingPageIndex - 1, 0);
+    let viewingPage = this.getPageAt(viewingPageIndex);
+    const isLastPage = viewingPage.height < this.blocksPerPage;
+    if (isLastPage) {
+      this.pageIndex = Math.max(viewingPageIndex - 2, 0);
+      viewingPage = this.getPageAt(viewingPageIndex);
+    }
+    const left = viewingPage.offset - this.getConvertedScrollOffset();
+    const blockIndex = viewingPage.height - targetHeight;
+    const targetOffset = (this.blockWidth * blockIndex) + left;
+    let deltaOffset = targetOffset - blockOffset;
+
+    if (isLastPage) {
+      pages.push(this.getPageAt(viewingPageIndex - 2));
+    }
+    if (viewingPageIndex > 1) {
+      pages.push(this.getPageAt(viewingPageIndex - 1));
+    }
+    if (viewingPageIndex > 0) {
+      pages.push(viewingPage);
+    }
+    if (!isLastPage) {
+      pages.push(this.getPageAt(viewingPageIndex + 1));
+    }
+    if (viewingPageIndex === 0) {
+      pages.push(this.getPageAt(viewingPageIndex + 2));
+    }
+
+    this.pages = pages;
+    this.addConvertedScrollOffset(deltaOffset);
+  }
+
+  updatePages() {
+    const pages = [];
+    if (this.pageIndex > 0) {
+      pages.push(this.getPageAt(this.pageIndex));
+    }
+    pages.push(this.getPageAt(this.pageIndex + 1));
+    pages.push(this.getPageAt(this.pageIndex + 2));
+    this.pages = pages;
+  }
+
+  shiftPagesBack(): boolean {
+    const nextPage = this.getPageAt(this.pageIndex + 3);
+    if (nextPage.height >= 0) {
+      this.pageIndex++;
+      this.pages.forEach(page => page.offset -= this.pageWidth);
+      if (this.pageIndex !== 1) {
+        this.pages.shift();
+      }
+      this.pages.push(this.getPageAt(this.pageIndex + 2));
+     return true;
+    } else {
+      return false;
+    }
+  }
+
+  shiftPagesForward(): boolean {
+    if (this.pageIndex > 0) {
+      this.pageIndex--;
+      this.pages.forEach(page => page.offset += this.pageWidth);
+      this.pages.pop();
+      if (this.pageIndex) {
+        this.pages.unshift(this.getPageAt(this.pageIndex));
+      }
+      return true;
+    }
+    return false;
+  }
+
+  getPageAt(index: number) {
+    const height = this.chainTip - 8 - ((index - 1) * this.blocksPerPage)
+    return {
+      offset: this.firstPageWidth + (this.pageWidth * (index - 1 - this.pageIndex)),
+      height: height,
+      depth: this.chainTip - height,
+      index: index,
+    };
+  }
+
+  getPageIndexOf(height: number): number {
+    const delta = this.chainTip - 8 - height;
+    return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);
+  }
+
+  blockInViewport(height: number): boolean {
+    const firstHeight = this.pages[0].height;
+    const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
+    const firstX = this.pages[0].offset - this.getConvertedScrollOffset() + translation;
+    const xPos = firstX + ((firstHeight - height) * 155);
+    return xPos > -55 && xPos < (window.innerWidth - 100);
+  }
+
+  getConvertedScrollOffset(): number {
+    if (this.timeLtr) {
+      return -this.blockchainContainer?.nativeElement?.scrollLeft || 0;
+    } else {
+      return this.blockchainContainer?.nativeElement?.scrollLeft || 0;
+    }
+  }
+
+  addConvertedScrollOffset(offset: number): void {
+    if (!this.blockchainContainer?.nativeElement) {
+      return;
+    }
+    if (this.timeLtr) {
+      this.blockchainContainer.nativeElement.scrollLeft -= offset;
+    } else {
+      this.blockchainContainer.nativeElement.scrollLeft += offset;
+    }
+  }
+
   ngOnDestroy() {
     this.timeLtrSubscription.unsubscribe();
+    this.chainTipSubscription.unsubscribe();
+    this.markBlockSubscription.unsubscribe();
   }
 }

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

@@ -4,7 +4,7 @@
   </app-preview-title>
   <div class="row d-flex justify-content-between full-width-row">
     <div class="title-wrapper">
-      <h1 class="title truncated"><span class="first">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span></h1>
+      <h1 class="title truncated"><app-truncate [text]="txId"></app-truncate></h1>
     </div>
     <div *ngIf="network !== 'liquid' && network !== 'liquidtestnet'" class="features">
       <app-tx-features [tx]="tx"></app-tx-features>

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

@@ -11,6 +11,7 @@ import {
 import { Transaction, Vout } from '../../interfaces/electrs.interface';
 import { of, merge, Subscription, Observable, Subject, from } from 'rxjs';
 import { StateService } from '../../services/state.service';
+import { CacheService } from '../../services/cache.service';
 import { OpenGraphService } from '../../services/opengraph.service';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
@@ -45,6 +46,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private electrsApiService: ElectrsApiService,
     private stateService: StateService,
+    private cacheService: CacheService,
     private apiService: ApiService,
     private seoService: SeoService,
     private openGraphService: OpenGraphService,
@@ -97,7 +99,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy {
         }),
         switchMap(() => {
           let transactionObservable$: Observable<Transaction>;
-          const cached = this.stateService.getTxFromCache(this.txId);
+          const cached = this.cacheService.getTxFromCache(this.txId);
           if (cached && cached.fee !== -1) {
             transactionObservable$ = of(cached);
           } else {

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

@@ -1,23 +1,37 @@
 <div class="container-xl">
-
   <div class="title-block">
-    <div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
-      <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
-      <a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]">
-        <span class="d-inline d-lg-none">{{ rbfTransaction.txid | shortenString : 24 }}</span>
-        <span class="d-none d-lg-inline">{{ rbfTransaction.txid }}</span>
-      </a>
+    <div *ngIf="fullRBF && notFound && altTx && !replaced" class="alert alert-mempool" role="alert">
+      <span i18n="transaction.rbf.only-default-mempool">This transaction cannot be found in the Full RBF mempool. It may depend on an ancestor which has been replaced by fee.</span>
     </div>
 
-    <ng-container *ngIf="!rbfTransaction || rbfTransaction?.size">
+    <div *ngIf="!fullRBF && notFound && altTx && !replaced" class="alert alert-mempool" role="alert">
+      <span i18n="transaction.rbf.only-full-rbf-mempool">This transaction cannot be found in the default mempool. It may replace a transaction which does not opt-in to replace-by-fee.</span>
+    </div>
+
+    <div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
+      <span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
+      <app-truncate [text]="rbfTransaction.txid" [lastChars]="12" [link]="['/tx/' | relativeUrl, rbfTransaction.txid]"></app-truncate>
+    </div>
+
+    <div *ngIf="rbfReplaces?.length" class="alert alert-mempool" role="alert">
+      <span i18n="transaction.rbf.replaced|RBF replaced">This transaction replaced:</span>
+      <div class="tx-list">
+        <a class="alert-link" *ngFor="let replaced of rbfReplaces" [routerLink]="['/tx/' | relativeUrl, replaced]">
+          <span class="d-inline d-lg-none">{{ replaced | shortenString : 24 }}</span>
+          <span class="d-none d-lg-inline">{{ replaced }}</span>
+        </a>
+      </div>
+    </div>
+
+    <ng-container *ngIf="!rbfTransaction || rbfTransaction?.size || tx">
       <h1 i18n="shared.transaction">Transaction</h1>
 
-      <span class="tx-link float-left">
-        <a [routerLink]="['/tx/' | relativeUrl, txId]">
-          <span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
-          <span class="d-none d-lg-inline">{{ txId }}</span>
-        </a>
-        <app-clipboard [text]="txId"></app-clipboard>
+      <span class="tx-link">
+        <span class="txid">
+          <app-truncate [text]="txId" [lastChars]="12" [link]="['/tx/' | relativeUrl, txId]">
+            <app-clipboard [text]="txId"></app-clipboard>
+          </app-truncate>
+        </span>
       </span>
 
       <div class="container-buttons">
@@ -28,7 +42,10 @@
             <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
           </button>
         </ng-template>
-        <ng-template [ngIf]="tx && !tx?.status.confirmed">
+        <ng-template [ngIf]="tx && !tx?.status?.confirmed && replaced">
+          <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Replaced</button>
+        </ng-template>
+        <ng-template [ngIf]="tx && !tx?.status?.confirmed && !replaced">
           <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
         </ng-template>
       </div>
@@ -91,7 +108,7 @@
           <div class="col-sm">
             <table class="table table-borderless table-striped">
               <tbody>
-                <ng-template [ngIf]="transactionTime !== 0">
+                <ng-template [ngIf]="transactionTime !== 0 && !notFound">
                   <tr *ngIf="transactionTime === -1; else firstSeenTmpl">
                     <td><span class="skeleton-loader"></span></td>
                     <td><span class="skeleton-loader"></span></td>
@@ -103,7 +120,7 @@
                     </tr>
                   </ng-template>
                 </ng-template>
-                <tr>
+                <tr *ngIf="!notFound">
                   <td class="td-width" i18n="transaction.eta|Transaction ETA">ETA</td>
                   <td>
                     <ng-template [ngIf]="txInBlockIndex === undefined" [ngIfElse]="estimationTmpl">
@@ -144,12 +161,12 @@
       <br>
 
       <h2 class="text-left">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="xs"></fa-icon></h2>
-      <div class="box">
-        <table class="table table-borderless table-striped">
+      <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 i18n="dashboard.latest-transactions.txid">TXID</th>
+              <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
               <th class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
               <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
               <th class="d-none d-lg-table-cell"></th>
@@ -159,10 +176,8 @@
             <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><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
-                    <span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 8 }}</span>
-                    <span class="d-none d-lg-inline">{{ cpfpTx.txid }}</span>
-                  </a>
+                <td>
+                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
                 </td>
                 <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
                 <td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
@@ -172,11 +187,8 @@
             <ng-template [ngIf]="cpfpInfo?.bestDescendant">
               <tr>
                 <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
-                <td>
-                  <a [routerLink]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]">
-                    <span class="d-inline d-lg-none">{{ cpfpInfo.bestDescendant.txid | shortenString : 8 }}</span>
-                    <span class="d-none d-lg-inline">{{ cpfpInfo.bestDescendant.txid }}</span>
-                  </a>
+                <td class="txids">
+                  <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
                 </td>
                 <td class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
                 <td>{{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
@@ -186,10 +198,8 @@
             <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><a [routerLink]="['/tx' | relativeUrl, cpfpTx.txid]">
-                    <span class="d-inline d-lg-none">{{ cpfpTx.txid | shortenString : 8 }}</span>
-                    <span class="d-none d-lg-inline">{{ cpfpTx.txid }}</span>
-                  </a>
+                <td class="txids">
+                  <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
                 </td>
                 <td class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
                 <td>{{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>

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

@@ -19,22 +19,32 @@
   }
 }
 .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;
-  display: inline-block;
-  width: 100%;
-  flex-shrink: 0;
   @media (min-width: 651px) {
-    display: flex;
-    width: auto;
     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;
+  }
 }
 
 .td-width {
@@ -188,4 +198,16 @@
       margin-left: 8px;
     }
   }
+}
+
+.cpfp-details {
+  .txids {
+    width: 60%;
+  }
+}
+
+.tx-list {
+  .alert-link {
+    display: block;
+  }
 }

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

@@ -13,6 +13,7 @@ import {
 import { Transaction } from '../../interfaces/electrs.interface';
 import { of, merge, Subscription, Observable, Subject, timer, combineLatest, from, throwError } from 'rxjs';
 import { StateService } from '../../services/state.service';
+import { CacheService } from '../../services/cache.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from '../../services/audio.service';
 import { ApiService } from '../../services/api.service';
@@ -39,15 +40,23 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   transactionTime = -1;
   subscription: Subscription;
   fetchCpfpSubscription: Subscription;
+  fetchRbfSubscription: Subscription;
+  fetchCachedTxSubscription: Subscription;
   txReplacedSubscription: Subscription;
+  altTxSubscription: Subscription;
   blocksSubscription: Subscription;
   queryParamsSubscription: Subscription;
   urlFragmentSubscription: Subscription;
   fragmentParams: URLSearchParams;
   rbfTransaction: undefined | Transaction;
+  replaced: boolean = false;
+  rbfReplaces: string[];
   cpfpInfo: CpfpInfo | null;
   showCpfpDetails = false;
   fetchCpfp$ = new Subject<string>();
+  fetchRbfHistory$ = new Subject<string>();
+  fetchCachedTx$ = new Subject<string>();
+  checkAltBackend$ = new Subject<string>();
   now = new Date().getTime();
   timeAvg$: Observable<number>;
   liquidUnblinding = new LiquidUnblinding();
@@ -62,6 +71,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   hideFlow: boolean = this.stateService.hideFlow.value;
   overrideFlowPreference: boolean = null;
   flowEnabled: boolean;
+  notFound: boolean = false;
+  altTx: Transaction;
+  fullRBF: boolean = false;
+  altBackend: string;
 
   tooltipPosition: { x: number, y: number };
 
@@ -74,11 +87,14 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     private relativeUrlPipe: RelativeUrlPipe,
     private electrsApiService: ElectrsApiService,
     private stateService: StateService,
+    private cacheService: CacheService,
     private websocketService: WebsocketService,
     private audioService: AudioService,
     private apiService: ApiService,
     private seoService: SeoService
-  ) {}
+  ) {
+    this.fullRBF = stateService.env.FULL_RBF_ENABLED;
+  }
 
   ngOnInit() {
     this.websocketService.want(['blocks', 'mempool-blocks']);
@@ -120,7 +136,11 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
                 }
               }),
               delay(2000)
-            )))
+            )),
+            catchError(() => {
+              return of(null);
+            })
+          )
         ),
         catchError(() => {
           return of(null);
@@ -131,26 +151,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           this.cpfpInfo = null;
           return;
         }
-        if (cpfpInfo.effectiveFeePerVsize) {
-          this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
-        } else {
-          const lowerFeeParents = cpfpInfo.ancestors.filter(
-            (parent) => parent.fee / (parent.weight / 4) < this.tx.feePerVsize
-          );
-          let totalWeight =
-            this.tx.weight +
-            lowerFeeParents.reduce((prev, val) => prev + val.weight, 0);
-          let totalFees =
-            this.tx.fee +
-            lowerFeeParents.reduce((prev, val) => prev + val.fee, 0);
-
-          if (cpfpInfo?.bestDescendant) {
-            totalWeight += cpfpInfo?.bestDescendant.weight;
-            totalFees += cpfpInfo?.bestDescendant.fee;
-          }
-
-          this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+        // merge ancestors/descendants
+        const relatives = [...(cpfpInfo.ancestors || []), ...(cpfpInfo.descendants || [])];
+        if (cpfpInfo.bestDescendant && !cpfpInfo.descendants?.length) {
+          relatives.push(cpfpInfo.bestDescendant);
         }
+        let totalWeight =
+          this.tx.weight +
+          relatives.reduce((prev, val) => prev + val.weight, 0);
+        let totalFees =
+          this.tx.fee +
+          relatives.reduce((prev, val) => prev + val.fee, 0);
+
+        this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+
         if (!this.tx.status.confirmed) {
           this.stateService.markBlock$.next({
             txFeePerVSize: this.tx.effectiveFeePerVsize,
@@ -159,6 +173,83 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         this.cpfpInfo = cpfpInfo;
       });
 
+    this.fetchRbfSubscription = this.fetchRbfHistory$
+    .pipe(
+      switchMap((txId) =>
+        this.apiService
+          .getRbfHistory$(txId)
+      ),
+      catchError(() => {
+        return of([]);
+      })
+    ).subscribe((replaces) => {
+      this.rbfReplaces = replaces;
+    });
+
+    this.fetchCachedTxSubscription = this.fetchCachedTx$
+    .pipe(
+      switchMap((txId) =>
+        this.apiService
+          .getRbfCachedTx$(txId)
+      ),
+      catchError(() => {
+        return of(null);
+      })
+    ).subscribe((tx) => {
+      if (!tx) {
+        return;
+      }
+
+      if (!this.altTx && !this.tx) {
+        this.tx = tx;
+        if (tx.fee === undefined) {
+          this.tx.fee = 0;
+        }
+        this.tx.feePerVsize = tx.fee / (tx.weight / 4);
+        this.isLoadingTx = false;
+        this.error = undefined;
+        this.waitingForTransaction = false;
+        this.graphExpanded = false;
+        this.setupGraph();
+
+        if (!this.tx?.status?.confirmed) {
+          this.fetchRbfHistory$.next(this.tx.txid);
+        }
+      }
+    });
+
+    this.altTxSubscription = this.checkAltBackend$
+    .pipe(
+      switchMap((txId) =>
+        this.apiService
+          .getAltTransaction$(txId)
+          .pipe(
+            catchError((e) => {
+              return of(null);
+            })
+          )
+      )
+    ).subscribe((tx) => {
+      if (!tx) {
+        this.altTx = null;
+        return;
+      }
+
+      this.altTx = tx;
+      if (tx.fee === undefined) {
+        this.altTx.fee = 0;
+      }
+      this.altTx.feePerVsize = tx.fee / (tx.weight / 4);
+      if (!this.tx) {
+        this.tx = tx;
+        this.isLoadingTx = false;
+        this.error = undefined;
+        this.waitingForTransaction = false;
+        this.graphExpanded = false;
+        this.setupGraph();
+      }
+    });
+
     this.subscription = this.route.paramMap
       .pipe(
         switchMap((params: ParamMap) => {
@@ -203,7 +294,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         }),
         switchMap(() => {
           let transactionObservable$: Observable<Transaction>;
-          const cached = this.stateService.getTxFromCache(this.txId);
+          const cached = this.cacheService.getTxFromCache(this.txId);
           if (cached && cached.fee !== -1) {
             transactionObservable$ = of(cached);
           } else {
@@ -233,8 +324,13 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       )
       .subscribe((tx: Transaction) => {
           if (!tx) {
+            this.notFound = true;
+            if (this.stateService.env.ALT_BACKEND_ENABLED) {
+              this.checkAltBackend$.next(this.txId);
+            }
             return;
           }
+          this.notFound = false;
 
           this.tx = tx;
           if (tx.fee === undefined) {
@@ -272,6 +368,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
             } else {
               this.fetchCpfp$.next(this.tx.txid);
             }
+            this.fetchRbfHistory$.next(this.tx.txid);
           }
           setTimeout(() => { this.applyFragment(); }, 0);
         },
@@ -302,7 +399,11 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         this.waitingForTransaction = false;
       }
       this.rbfTransaction = rbfTransaction;
-      this.stateService.setTxCache([this.rbfTransaction]);
+      this.cacheService.setTxCache([this.rbfTransaction]);
+      this.replaced = true;
+      if (rbfTransaction && !this.tx) {
+        this.fetchCachedTx$.next(this.txId);
+      }
     });
 
     this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
@@ -368,8 +469,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.waitingForTransaction = false;
     this.isLoadingTx = true;
     this.rbfTransaction = undefined;
+    this.replaced = false;
+    this.altTx = null;
+    this.notFound = false;
     this.transactionTime = -1;
     this.cpfpInfo = null;
+    this.rbfReplaces = [];
     this.showCpfpDetails = false;
     document.body.scrollTo(0, 0);
     this.leaveTransaction();
@@ -435,6 +540,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe();
     this.fetchCpfpSubscription.unsubscribe();
+    this.fetchRbfSubscription.unsubscribe();
+    this.fetchCachedTxSubscription.unsubscribe();
+    this.altTxSubscription?.unsubscribe();
     this.txReplacedSubscription.unsubscribe();
     this.blocksSubscription.unsubscribe();
     this.queryParamsSubscription.unsubscribe();

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

@@ -1,16 +1,14 @@
 <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
   <div *ngIf="!transactionPage" class="header-bg box tx-page-container">
-    <a class="float-left" [routerLink]="['/tx/' | relativeUrl, tx.txid]">
-      <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 16 }}</span>
-      <span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>
+    <a class="tx-link" [routerLink]="['/tx/' | relativeUrl, tx.txid]">
+      <app-truncate [text]="tx.txid"></app-truncate>
     </a>
-    <div class="float-right">
+    <div>
       <ng-template [ngIf]="tx.status.confirmed">&lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}</ng-template>
       <ng-template [ngIf]="!tx.status.confirmed && tx.firstSeen">
         <i><app-time-since [time]="tx.firstSeen" [fastRender]="true"></app-time-since></i>
       </ng-template>
     </div>
-    <div class="clearfix"></div>
   </div>
 
   <div class="header-bg box" infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [attr.data-cy]="'tx-' + i">
@@ -18,7 +16,7 @@
     <div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
     <div class="row">
       <div class="col">
-        <table class="table table-borderless smaller-text table-sm table-tx-vin">
+        <table class="table table-fixed table-borderless smaller-text table-sm table-tx-vin">
           <tbody>
             <ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx.vin.slice(0, getVinLimit(tx))" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="{
@@ -49,7 +47,7 @@
                     </ng-template>
                   </ng-template>
                 </td>
-                <td>
+                <td class="address-cell">
                   <div [ngSwitch]="true">
                     <ng-container *ngSwitchCase="vin.is_coinbase"><span i18n="transactions-list.coinbase">Coinbase</span><ng-template [ngIf]="network !== 'liquid' && network !== 'liquidtestnet'">&nbsp;<span i18n="transactions-list.newly-generated-coins">(Newly Generated Coins)</span></ng-template><br /><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii"><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></a></ng-container>
                     <ng-container *ngSwitchCase="vin.is_pegin">
@@ -66,12 +64,8 @@
                         </ng-template>
                       </ng-template>
                       <ng-template #defaultAddress>
-                        <a class="shortable-address" *ngIf="vin.prevout.scriptpubkey_address; else vinScriptPubkeyType" [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
-                          <span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
-                          <span class="d-none d-lg-inline-flex justify-content-start">
-                            <span class="addr-left flex-grow-1" [style]="vin.prevout.scriptpubkey_address.length > 40 ? 'max-width: 235px' : ''">{{ vin.prevout.scriptpubkey_address }}</span>
-                            <span *ngIf="vin.prevout.scriptpubkey_address.length > 40" class="addr-right">{{ vin.prevout.scriptpubkey_address | capAddress: 40: 10 }}</span>
-                          </span>
+                        <a class="address" *ngIf="vin.prevout.scriptpubkey_address; else vinScriptPubkeyType" [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
+                          <app-truncate [text]="vin.prevout.scriptpubkey_address" [lastChars]="8"></app-truncate>
                         </a>
                         <ng-template #vinScriptPubkeyType>
                           {{ vin.prevout.scriptpubkey_type?.toUpperCase() }}
@@ -162,20 +156,16 @@
       </div>
       <div class="w-100 d-block d-md-none"></div>
       <div class="col mobile-bottomcol">
-        <table class="table table-borderless smaller-text table-sm table-tx-vout">
+        <table class="table table-fixed table-borderless smaller-text table-sm table-tx-vout">
           <tbody>
             <ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx.vout.slice(0, getVoutLimit(tx))" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="{
                 'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
                 'highlight': vout.scriptpubkey_address === this.address && this.address !== ''
               }">
-                <td>
-                  <a class="shortable-address" *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
-                    <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
-                    <span class="d-none d-lg-inline-flex justify-content-start">
-                      <span class="addr-left flex-grow-1" [style]="vout.scriptpubkey_address.length > 40 ? 'max-width: 235px' : ''">{{ vout.scriptpubkey_address }}</span>
-                      <span *ngIf="vout.scriptpubkey_address.length > 40" class="addr-right">{{ vout.scriptpubkey_address | capAddress: 40: 10 }}</span>
-                    </span>
+                <td class="address-cell">
+                  <a class="address" *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
+                    <app-truncate [text]="vout.scriptpubkey_address" [lastChars]="8"></app-truncate>
                   </a>
                   <div>
                     <app-address-labels [vout]="vout" [channel]="tx._channels && tx._channels.outputs[vindex] ? tx._channels.outputs[vindex] : null"></app-address-labels>
@@ -185,13 +175,11 @@
                       <ng-container i18n="transactions-list.peg-out-to">Peg-out to <ng-container *ngTemplateOutlet="pegOutLink"></ng-container></ng-container>
                       <ng-template #pegOutLink>
                         <a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}">
-                          <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
-                          <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
+                          <app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
                         </a>
                         <ng-template #localPegoutLink>
                           <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
-                            <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
-                            <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
+                            <app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
                           </a>
                         </ng-template>
                       </ng-template>

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

@@ -1,6 +1,6 @@
 
 .arrow-td {
-	width: 20px;
+	width: 30px;
 	padding-top: 0;
 	padding-bottom: 0;
 }
@@ -45,6 +45,10 @@
 	}
 }
 
+td.amount {
+	width: 32.5%;
+}
+
 .extra-info {
 	display: none;
 	@media (min-width: 576px) {
@@ -81,6 +85,10 @@
 }
 
 .tx-page-container {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	white-space: nowrap;
 	padding: 10px;
 	margin-bottom: 10px;
 	margin-top: 10px;
@@ -130,14 +138,7 @@ h2 {
 	margin-top: 10px;
 }
 
-.addr-left {
-	font-family: monospace;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	margin-right: -7px
-}
-
-.addr-right {
+.address {
 	font-family: monospace;
 }
 
@@ -146,3 +147,9 @@ h2 {
 	font-style: italic;
 	font-size: 12px;
 }
+
+.tx-link {
+	width: 0;
+	flex-grow: 1;
+	margin-inline-end: 2em;
+}

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

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
+import { CacheService } from '../../services/cache.service';
 import { Observable, ReplaySubject, BehaviorSubject, merge, Subscription } from 'rxjs';
 import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface';
 import { ElectrsApiService } from '../../services/electrs-api.service';
@@ -44,6 +45,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
 
   constructor(
     public stateService: StateService,
+    private cacheService: CacheService,
     private electrsApiService: ElectrsApiService,
     private apiService: ApiService,
     private assetsService: AssetsService,
@@ -91,6 +93,9 @@ export class TransactionsListComponent implements OnInit, OnChanges {
             filter(() => this.stateService.env.LIGHTNING),
             switchMap((txIds) => this.apiService.getChannelByTxIds$(txIds)),
             tap((channels) => {
+              if (!this.transactions) {
+                return;
+              }
               const transactions = this.transactions.filter((tx) => !tx._channels);
               channels.forEach((channel, i) => {
                 transactions[i]._channels = channel;
@@ -120,7 +125,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       }
 
       this.transactionsLength = this.transactions.length;
-      this.stateService.setTxCache(this.transactions);
+      this.cacheService.setTxCache(this.transactions);
 
       this.transactions.forEach((tx) => {
         tx['@voutLimit'] = true;

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html

@@ -31,8 +31,7 @@
       <p *ngIf="!isConnector">Peg Out</p>
       <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
       <p class="address">
-        <span class="first">{{ line.pegout.slice(0, -4) }}</span>
-        <span class="last-four">{{ line.pegout.slice(-4) }}</span>
+        <app-truncate [text]="line.pegout"></app-truncate>
       </p>
     </ng-container>
   </ng-template>
@@ -49,8 +48,7 @@
       <ng-container *ngIf="isConnector && line.txid">
         <p>
           <span i18n="transaction">Transaction</span>&nbsp;
-          <span class="first">{{ line.txid.slice(0, 8) }}</span>...
-          <span class="last-four">{{ line.txid.slice(-4) }}</span>
+          <app-truncate [text]="line.txid"></app-truncate>
         </p>
           <ng-container [ngSwitch]="line.type">
             <p *ngSwitchCase="'input'"><span i18n="transaction.output">Output</span>&nbsp; #{{ line.vout + 1 }}</p>
@@ -60,8 +58,7 @@
       <p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
       <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
       <p *ngIf="line.type !== 'fee' && line.address" class="address">
-        <span class="first">{{ line.address.slice(0, -4) }}</span>
-        <span class="last-four">{{ line.address.slice(-4) }}</span>
+        <app-truncate [text]="line.address"></app-truncate>
       </p>
   </ng-template>
 </div>

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss

@@ -17,22 +17,5 @@
   .address {
     width: 100%;
     max-width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: flex-start;
-
-    .first {
-      flex-grow: 0;
-      flex-shrink: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-right: -2px;
-    }
-
-    .last-four {
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
   }
 }

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html

@@ -88,7 +88,7 @@
         <stop offset="100%" stop-color="transparent" />
       </linearGradient>
     </defs>
-    <path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
+    <path *ngIf="hasLine" [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
     <ng-container *ngFor="let input of inputs; let i = index">
       <path *ngIf="connectors && !inputData[i].coinbase && !inputData[i].pegin"
         [attr.d]="input.connectorPath"
@@ -106,7 +106,7 @@
         (pointerout)="onBlur($event, 'input', i);"
         (click)="onClick($event, 'input', inputData[i].index);"
       />
-      <path
+      <path *ngIf="!input.zeroValue"
         [attr.d]="input.path"
         class="line {{input.class}}"
         [class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
@@ -116,6 +116,16 @@
         (pointerout)="onBlur($event, 'input', i);"
         (click)="onClick($event, 'input', inputData[i].index);"
       />
+      <path *ngIf="input.zeroValue"
+        [attr.d]="input.path"
+        class="line {{input.class}} zerovalue"
+        [class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
+        [class.zerovalue]="input.zeroValue"
+        [style]="input.style"
+        (pointerover)="onHover($event, 'input', i);"
+        (pointerout)="onBlur($event, 'input', i);"
+        (click)="onClick($event, 'input', inputData[i].index);"
+      />
     </ng-container>
     <ng-container *ngFor="let output of outputs; let i = index">
       <path *ngIf="connectors && outspends[outputData[i].index]?.spent"