Add explanatory tooltips in incoming txs widget

Graphs loading indicators update

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Install ${{ steps.gettoolchain.outputs.toolchain }} Rust toolchain
         # Latest version available on this commit is 1.71.1
         # Commit date is Aug 3, 2023
-        uses: dtolnay/rust-toolchain@bb45937a053e097f8591208d8e74c90db1873d07
+        uses: dtolnay/rust-toolchain@d8352f6b1d2e870bc5716e7a6d9b65c4cc244a1a
         with:
           toolchain: ${{ steps.gettoolchain.outputs.toolchain }}
 
@@ -257,7 +257,7 @@ jobs:
             spec: |
               cypress/e2e/mainnet/*.spec.ts
               cypress/e2e/signet/*.spec.ts
-              cypress/e2e/testnet/*.spec.ts
+              cypress/e2e/testnet4/*.spec.ts
           - module: "liquid"
             spec: |
               cypress/e2e/liquid/liquid.spec.ts

backend/.eslintrc

@@ -20,6 +20,7 @@
     "@typescript-eslint/no-this-alias": 1,
     "@typescript-eslint/no-var-requires": 1,
     "@typescript-eslint/explicit-function-return-type": 1,
+    "@typescript-eslint/no-unused-vars": 1,
     "no-console": 1,
     "no-constant-condition": 1,
     "no-dupe-else-if": 1,
@@ -32,6 +33,7 @@
     "prefer-rest-params": 1,
     "quotes": [1, "single", { "allowTemplateLiterals": true }],
     "semi": 1,
+    "curly": [1, "all"],
     "eqeqeq": 1
   }
 }

backend/mempool-config.sample.json

@@ -139,6 +139,8 @@
     "ENABLED": false,
     "AUDIT": false,
     "AUDIT_START_HEIGHT": 774000,
+    "STATISTICS": false,
+    "STATISTICS_START_TIME": 1481932800,
     "SERVERS": [
       "list",
       "of",

backend/package-lock.json

@@ -13,17 +13,17 @@
         "@babel/core": "^7.24.0",
         "@mempool/electrum-client": "1.1.9",
         "@types/node": "^18.15.3",
-        "axios": "~1.6.1",
+        "axios": "~1.7.2",
         "bitcoinjs-lib": "~6.1.3",
         "crypto-js": "~4.2.0",
         "express": "~4.19.2",
         "maxmind": "~4.3.11",
-        "mysql2": "~3.9.4",
+        "mysql2": "~3.9.7",
         "redis": "^4.6.6",
         "rust-gbt": "file:./rust-gbt",
         "socks-proxy-agent": "~7.0.0",
         "typescript": "~4.9.3",
-        "ws": "~8.16.0"
+        "ws": "~8.17.0"
       },
       "devDependencies": {
         "@babel/code-frame": "^7.18.6",
@@ -2318,11 +2318,11 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "dependencies": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -6197,9 +6197,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mysql2": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.4.tgz",
-      "integrity": "sha512-OEESQuwxMza803knC1YSt7NMuc1BrK9j7gZhCSs2WAyxr1vfiI7QLaLOKTh5c9SWGz98qVyQUbK8/WckevNQhg==",
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.7.tgz",
+      "integrity": "sha512-KnJT8vYRcNAZv73uf9zpXqNbvBG7DJrs+1nACsjZP1HMJ1TgXEy8wnNilXAn/5i57JizXKtrUtwDB7HxT9DDpw==",
       "dependencies": {
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
@@ -7690,9 +7690,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -9509,11 +9509,11 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "requires": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -12382,9 +12382,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "mysql2": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.4.tgz",
-      "integrity": "sha512-OEESQuwxMza803knC1YSt7NMuc1BrK9j7gZhCSs2WAyxr1vfiI7QLaLOKTh5c9SWGz98qVyQUbK8/WckevNQhg==",
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.7.tgz",
+      "integrity": "sha512-KnJT8vYRcNAZv73uf9zpXqNbvBG7DJrs+1nACsjZP1HMJ1TgXEy8wnNilXAn/5i57JizXKtrUtwDB7HxT9DDpw==",
       "requires": {
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
@@ -13424,9 +13424,9 @@
       }
     },
     "ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
       "requires": {}
     },
     "y18n": {

backend/package.json

@@ -42,17 +42,17 @@
     "@babel/core": "^7.24.0",
     "@mempool/electrum-client": "1.1.9",
     "@types/node": "^18.15.3",
-    "axios": "~1.6.1",
+    "axios": "~1.7.2",
     "bitcoinjs-lib": "~6.1.3",
     "crypto-js": "~4.2.0",
     "express": "~4.19.2",
     "maxmind": "~4.3.11",
-    "mysql2": "~3.9.4",
+    "mysql2": "~3.9.7",
     "rust-gbt": "file:./rust-gbt",
     "redis": "^4.6.6",
     "socks-proxy-agent": "~7.0.0",
     "typescript": "~4.9.3",
-    "ws": "~8.16.0"
+    "ws": "~8.17.0"
   },
   "devDependencies": {
     "@babel/code-frame": "^7.18.6",

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

@@ -131,6 +131,8 @@
     "ENABLED": false,
     "AUDIT": false,
     "AUDIT_START_HEIGHT": 774000,
+    "STATISTICS": false,
+    "STATISTICS_START_TIME": 1481932800,
     "SERVERS": []
   },
   "MEMPOOL_SERVICES": {

backend/src/__tests__/config.test.ts

@@ -135,6 +135,8 @@ describe('Mempool Backend Config', () => {
         ENABLED: false,
         AUDIT: false,
         AUDIT_START_HEIGHT: 774000,
+        STATISTICS: false,
+        STATISTICS_START_TIME: 1481932800,
         SERVERS: []
       });
 

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

@@ -1,4 +1,4 @@
-import { IBitcoinApi } from './bitcoin-api.interface';
+import { IBitcoinApi, TestMempoolAcceptResult } from './bitcoin-api.interface';
 import { IEsploraApi } from './esplora-api.interface';
 
 export interface AbstractBitcoinApi {
@@ -22,6 +22,7 @@ export interface AbstractBitcoinApi {
   $getScriptHash(scripthash: string): Promise<IEsploraApi.ScriptHash>;
   $getScriptHashTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]>;
   $sendRawTransaction(rawTransaction: string): Promise<string>;
+  $testMempoolAccept(rawTransactions: string[], maxfeerate?: number): Promise<TestMempoolAcceptResult[]>;
   $getOutspend(txId: string, vout: number): Promise<IEsploraApi.Outspend>;
   $getOutspends(txId: string): Promise<IEsploraApi.Outspend[]>;
   $getBatchedOutspends(txId: string[]): Promise<IEsploraApi.Outspend[][]>;

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

@@ -205,3 +205,16 @@ export namespace IBitcoinApi {
     "utxo_size_inc": number;
   }
 }
+
+export interface TestMempoolAcceptResult {
+  txid: string,
+  wtxid: string,
+  allowed?: boolean,
+  vsize?: number,
+  fees?: {
+    base: number,
+    "effective-feerate": number,
+    "effective-includes": string[],
+  },
+  ['reject-reason']?: string,
+}

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

@@ -1,6 +1,6 @@
 import * as bitcoinjs from 'bitcoinjs-lib';
 import { AbstractBitcoinApi, HealthCheckHost } from './bitcoin-api-abstract-factory';
-import { IBitcoinApi } from './bitcoin-api.interface';
+import { IBitcoinApi, TestMempoolAcceptResult } from './bitcoin-api.interface';
 import { IEsploraApi } from './esplora-api.interface';
 import blocks from '../blocks';
 import mempool from '../mempool';
@@ -174,6 +174,14 @@ class BitcoinApi implements AbstractBitcoinApi {
     return this.bitcoindClient.sendRawTransaction(rawTransaction);
   }
 
+  async $testMempoolAccept(rawTransactions: string[], maxfeerate?: number): Promise<TestMempoolAcceptResult[]> {
+    if (rawTransactions.length) {
+      return this.bitcoindClient.testMempoolAccept(rawTransactions, maxfeerate ?? undefined);
+    } else {
+      return [];
+    }
+  }
+
   async $getOutspend(txId: string, vout: number): Promise<IEsploraApi.Outspend> {
     const txOut = await this.bitcoindClient.getTxOut(txId, vout, false);
     return {

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

@@ -55,6 +55,7 @@ class BitcoinRoutes {
           .get(config.MEMPOOL.API_URL_PREFIX + 'mempool/recent', this.getRecentMempoolTransactions)
           .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId', this.getTransaction)
           .post(config.MEMPOOL.API_URL_PREFIX + 'tx', this.$postTransaction)
+          .post(config.MEMPOOL.API_URL_PREFIX + 'txs/test', this.$testTransactions)
           .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/hex', this.getRawTransaction)
           .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/status', this.getTransactionStatus)
           .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/outspends', this.getTransactionOutspends)
@@ -749,6 +750,19 @@ class BitcoinRoutes {
     }
   }
 
+  private async $testTransactions(req: Request, res: Response) {
+    try {
+      const rawTxs = Common.getTransactionsFromRequest(req);
+      const maxfeerate = parseFloat(req.query.maxfeerate as string);
+      const result = await bitcoinApi.$testMempoolAccept(rawTxs, maxfeerate);
+      res.send(result);
+    } catch (e: any) {
+      res.setHeader('content-type', 'text/plain');
+      res.status(400).send(e.message && e.code ? 'testmempoolaccept RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
+        : (e.message || 'Error'));
+    }
+  }
+
 }
 
 export default new BitcoinRoutes();

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

@@ -5,6 +5,7 @@ import { AbstractBitcoinApi, HealthCheckHost } from './bitcoin-api-abstract-fact
 import { IEsploraApi } from './esplora-api.interface';
 import logger from '../../logger';
 import { Common } from '../common';
+import { TestMempoolAcceptResult } from './bitcoin-api.interface';
 
 interface FailoverHost {
   host: string,
@@ -327,6 +328,10 @@ class ElectrsApi implements AbstractBitcoinApi {
     throw new Error('Method not implemented.');
   }
 
+  $testMempoolAccept(rawTransactions: string[], maxfeerate?: number): Promise<TestMempoolAcceptResult[]> {
+    throw new Error('Method not implemented.');
+  }
+
   $getOutspend(txId: string, vout: number): Promise<IEsploraApi.Outspend> {
     return this.failoverRouter.$get<IEsploraApi.Outspend>('/tx/' + txId + '/outspend/' + vout);
   }

backend/src/api/blocks.ts

@@ -839,8 +839,11 @@ class Blocks {
       } else {
         this.currentBlockHeight++;
         logger.debug(`New block found (#${this.currentBlockHeight})!`);
-        this.updateTimerProgress(timer, `getting orphaned blocks for ${this.currentBlockHeight}`);
-        await chainTips.updateOrphanedBlocks();
+        // skip updating the orphan block cache if we've fallen behind the chain tip
+        if (this.currentBlockHeight >= blockHeightTip - 2) {
+          this.updateTimerProgress(timer, `getting orphaned blocks for ${this.currentBlockHeight}`);
+          await chainTips.updateOrphanedBlocks();
+        }
       }
 
       this.updateTimerProgress(timer, `getting block data for ${this.currentBlockHeight}`);

backend/src/api/chain-tips.ts

@@ -12,32 +12,68 @@ export interface OrphanedBlock {
   height: number;
   hash: string;
   status: 'valid-fork' | 'valid-headers' | 'headers-only';
+  prevhash: string;
 }
 
 class ChainTips {
   private chainTips: ChainTip[] = [];
-  private orphanedBlocks: OrphanedBlock[] = [];
+  private orphanedBlocks: { [hash: string]: OrphanedBlock } = {};
+  private blockCache: { [hash: string]: OrphanedBlock } = {};
+  private orphansByHeight: { [height: number]: OrphanedBlock[] } = {};
 
   public async updateOrphanedBlocks(): Promise<void> {
     try {
       this.chainTips = await bitcoinClient.getChainTips();
-      this.orphanedBlocks = [];
+
+      const start = Date.now();
+      const breakAt = start + 10000;
+      let newOrphans = 0;
+      this.orphanedBlocks = {};
 
       for (const chain of this.chainTips) {
         if (chain.status === 'valid-fork' || chain.status === 'valid-headers') {
-          let block = await bitcoinClient.getBlock(chain.hash);
-          while (block && block.confirmations === -1) {
-            this.orphanedBlocks.push({
-              height: block.height,
-              hash: block.hash,
-              status: chain.status
-            });
-            block = await bitcoinClient.getBlock(block.previousblockhash);
+          const orphans: OrphanedBlock[] = [];
+          let hash = chain.hash;
+          do {
+            let orphan = this.blockCache[hash];
+            if (!orphan) {
+              const block = await bitcoinClient.getBlock(hash);
+              if (block && block.confirmations === -1) {
+                newOrphans++;
+                orphan = {
+                  height: block.height,
+                  hash: block.hash,
+                  status: chain.status,
+                  prevhash: block.previousblockhash,
+                };
+                this.blockCache[hash] = orphan;
+              }
+            }
+            if (orphan) {
+              orphans.push(orphan);
+            }
+            hash = orphan?.prevhash;
+          } while (hash && (Date.now() < breakAt));
+          for (const orphan of orphans) {
+            this.orphanedBlocks[orphan.hash] = orphan;
           }
         }
+        if (Date.now() >= breakAt) {
+          logger.debug(`Breaking orphaned blocks updater after 10s, will continue next block`);
+          break;
+        }
       }
 
-      logger.debug(`Updated orphaned blocks cache. Found ${this.orphanedBlocks.length} orphaned blocks`);
+      this.orphansByHeight = {};
+      const allOrphans = Object.values(this.orphanedBlocks);
+      for (const orphan of allOrphans) {
+        if (!this.orphansByHeight[orphan.height]) {
+          this.orphansByHeight[orphan.height] = [];
+        }
+        this.orphansByHeight[orphan.height].push(orphan);
+      }
+
+      logger.debug(`Updated orphaned blocks cache. Fetched ${newOrphans} new orphaned blocks. Total ${allOrphans.length}`);
     } catch (e) {
       logger.err(`Cannot get fetch orphaned blocks. Reason: ${e instanceof Error ? e.message : e}`);
     }
@@ -48,13 +84,7 @@ class ChainTips {
       return [];
     }
 
-    const orphans: OrphanedBlock[] = [];
-    for (const block of this.orphanedBlocks) {
-      if (block.height === height) {
-        orphans.push(block);
-      }
-    }
-    return orphans;
+    return this.orphansByHeight[height] || [];
   }
 }
 

backend/src/api/common.ts

@@ -946,6 +946,33 @@ export class Common {
     return this.validateTransactionHex(matches[1].toLowerCase());
   }
 
+  static getTransactionsFromRequest(req: Request, limit: number = 25): string[] {
+    if (!Array.isArray(req.body) || req.body.some(hex => typeof hex !== 'string')) {
+      throw Object.assign(new Error('Invalid request body (should be an array of hexadecimal strings)'), { code: -1 });
+    }
+
+    if (limit && req.body.length > limit) {
+      throw Object.assign(new Error('Exceeded maximum of 25 transactions'), { code: -1 });
+    }
+
+    const txs = req.body;
+
+    return txs.map(rawTx => {
+      // Support both upper and lower case hex
+      // Support both txHash= Form and direct API POST
+      const reg = /^((?:[a-fA-F0-9]{2})+)$/;
+      const matches = reg.exec(rawTx);
+      if (!matches || !matches[1]) {
+        throw Object.assign(new Error('Invalid hex string'), { code: -2 });
+      }
+
+      // Guaranteed to be a hex string of multiple of 2
+      // Guaranteed to be lower case
+      // Guaranteed to pass validation (see function below)
+      return this.validateTransactionHex(matches[1].toLowerCase());
+    });
+  }
+
   private static validateTransactionHex(txhex: string): string {
     // Do not mutate txhex
 

backend/src/api/database-migration.ts

@@ -675,16 +675,15 @@ class DatabaseMigration {
       await this.updateToSchemaVersion(78);
     }
 
-    if (databaseSchemaVersion < 79 && config.MEMPOOL.NETWORK === 'liquid') {
-      await this.$executeQuery('TRUNCATE TABLE elements_pegs');
-      await this.$executeQuery('TRUNCATE TABLE federation_txos');
-      await this.$executeQuery('SET FOREIGN_KEY_CHECKS = 0');
-      await this.$executeQuery('TRUNCATE TABLE federation_addresses');
-      await this.$executeQuery('SET FOREIGN_KEY_CHECKS = 1');
-      await this.$executeQuery(`INSERT INTO federation_addresses (bitcoinaddress) VALUES ('bc1qxvay4an52gcghxq5lavact7r6qe9l4laedsazz8fj2ee2cy47tlqff4aj4')`); // Federation change address
-      await this.$executeQuery(`INSERT INTO federation_addresses (bitcoinaddress) VALUES ('3EiAcrzq1cELXScc98KeCswGWZaPGceT1d')`); // Federation change address
-      await this.$executeQuery(`UPDATE state SET number = 0 WHERE name = 'last_elements_block';`);
-      await this.$executeQuery(`UPDATE state SET number = 0 WHERE name = 'last_bitcoin_block_audit';`);
+    if (databaseSchemaVersion < 79 && config.MEMPOOL.NETWORK === 'mainnet') {
+      // Clear bad data
+      await this.$executeQuery(`TRUNCATE accelerations`);
+      this.uniqueLog(logger.notice, `'accelerations' table has been truncated`);
+      await this.$executeQuery(`
+        UPDATE state
+        SET number = 0
+        WHERE name = 'last_acceleration_block'
+      `);
       await this.updateToSchemaVersion(79);
     }
   }

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

@@ -54,9 +54,11 @@ class ChannelsRoutes {
 
       if (index < -1) {
         res.status(400).send('Invalid index');
+        return;
       }
       if (['open', 'active', 'closed'].includes(status) === false) {
         res.status(400).send('Invalid status');
+        return;
       }
 
       const channels = await channelsApi.$getChannelsForNode(req.query.public_key, index, 10, status);

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

@@ -666,7 +666,9 @@ class NodesApi {
         node.last_update = null;
       }
   
-      const sockets = (node.addresses?.map(a => a.addr).join(',')) ?? '';
+      const uniqueAddr = [...new Set(node.addresses?.map(a => a.addr))];
+      const formattedSockets = (uniqueAddr.join(',')) ?? '';
+
       const query = `INSERT INTO nodes(
           public_key,
           first_seen,
@@ -695,13 +697,13 @@ class NodesApi {
         node.alias,
         this.aliasToSearchText(node.alias),
         node.color,
-        sockets,
+        formattedSockets,
         JSON.stringify(node.features),
         node.last_update,
         node.alias,
         this.aliasToSearchText(node.alias),
         node.color,
-        sockets,
+        formattedSockets,
         JSON.stringify(node.features),
       ]);
     } catch (e) {

backend/src/api/liquid/elements-parser.ts

@@ -306,7 +306,7 @@ class ElementsParser {
 
     for (const utxo of unspentAsTip) {
       if (utxo.expiredAt === 0 && block.height >= utxo.blocknumber + utxo.timelock) { // The UTXO is expiring in this block
-        await DB.query(`UPDATE federation_txos SET lastblockupdate = ?, expiredAt = ? WHERE txid = ? AND txindex = ?`, [confirmedTip, block.time, utxo.txid, utxo.txindex]);
+        await DB.query(`UPDATE federation_txos SET unspent = 0, lastblockupdate = ?, expiredAt = ? WHERE txid = ? AND txindex = ?`, [confirmedTip, block.time, utxo.txid, utxo.txindex]);
       } else if (utxo.expiredAt === 0 && confirmedTip >= utxo.blocknumber + utxo.timelock) { // The UTXO is expiring before the tip: we need to keep track of it
         await DB.query(`UPDATE federation_txos SET lastblockupdate = ? WHERE txid = ? AND txindex = ?`, [utxo.blocknumber + utxo.timelock - 1, utxo.txid, utxo.txindex]); 
       } else {

backend/src/api/mempool.ts

@@ -404,6 +404,10 @@ class Mempool {
 
       const newAccelerationMap: { [txid: string]: Acceleration } = {};
       for (const acceleration of newAccelerations) {
+        // skip transactions we don't know about
+        if (!this.mempoolCache[acceleration.txid]) {
+          continue;
+        }
         newAccelerationMap[acceleration.txid] = acceleration;
         if (this.accelerations[acceleration.txid] == null) {
           // new acceleration

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

@@ -24,6 +24,7 @@ class MiningRoutes {
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/difficulty-adjustments', this.$getDifficultyAdjustments)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', this.$getRewardStats)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees/:interval', this.$getHistoricalBlockFees)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees', this.$getBlockFeesTimespan)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/rewards/:interval', this.$getHistoricalBlockRewards)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', this.$getHistoricalBlockFeeRates)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/sizes-weights/:interval', this.$getHistoricalBlockSizeAndWeight)
@@ -217,6 +218,26 @@ class MiningRoutes {
     }
   }
 
+  private async $getBlockFeesTimespan(req: Request, res: Response) {
+    try {
+      if (!parseInt(req.query.from as string, 10) || !parseInt(req.query.to as string, 10)) {
+        throw new Error('Invalid timestamp range');
+      }
+      if (parseInt(req.query.from as string, 10) > parseInt(req.query.to as string, 10)) {
+        throw new Error('from must be less than to');
+      }
+      const blockFees = await mining.$getBlockFeesTimespan(parseInt(req.query.from as string, 10), parseInt(req.query.to as string, 10));
+      const blockCount = await BlocksRepository.$blockCount(null, null);
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.header('X-total-count', blockCount.toString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
+      res.json(blockFees);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
   private async $getHistoricalBlockRewards(req: Request, res: Response) {
     try {
       const blockRewards = await mining.$getHistoricalBlockRewards(req.params.interval);

backend/src/api/mining/mining.ts

@@ -45,11 +45,22 @@ class Mining {
    */
   public async $getHistoricalBlockFees(interval: string | null = null): Promise<any> {
     return await BlocksRepository.$getHistoricalBlockFees(
-      this.getTimeRange(interval, 5),
+      this.getTimeRange(interval),
       Common.getSqlInterval(interval)
     );
   }
 
+  /**
+   * Get timespan block total fees
+   */
+  public async $getBlockFeesTimespan(from: number, to: number): Promise<number> {
+    return await BlocksRepository.$getHistoricalBlockFees(
+      this.getTimeRangeFromTimespan(from, to),
+      null,
+      {from, to}
+    );
+  }
+  
   /**
    * Get historical block rewards
    */
@@ -646,6 +657,24 @@ class Mining {
     }
   }
 
+  private getTimeRangeFromTimespan(from: number, to: number, scale = 1): number {
+    const timespan = to - from;
+    switch (true) {
+      case timespan > 3600 * 24 * 365 * 4: return 86400 * scale; // 24h
+      case timespan > 3600 * 24 * 365 * 3: return 43200 * scale; // 12h
+      case timespan > 3600 * 24 * 365 * 2: return 43200 * scale; // 12h
+      case timespan > 3600 * 24 * 365: return 28800 * scale; // 8h
+      case timespan > 3600 * 24 * 30 * 6: return 28800 * scale; // 8h
+      case timespan > 3600 * 24 * 30 * 3: return 10800 * scale; // 3h
+      case timespan > 3600 * 24 * 30: return 7200 * scale; // 2h
+      case timespan > 3600 * 24 * 7: return 1800 * scale; // 30min
+      case timespan > 3600 * 24 * 3: return 300 * scale; // 5min
+      case timespan > 3600 * 24: return 1 * scale;
+      default: return 1 * scale;
+    }
+  }
+  
+
   // Finds the oldest block in a consecutive chain back from the tip
   // assumes `blocks` is sorted in ascending height order
   private getOldestConsecutiveBlock(blocks: DifficultyBlock[]): DifficultyBlock {

backend/src/api/pools-parser.ts

@@ -52,6 +52,28 @@ class PoolsParser {
         continue;
       }
 
+      // One of the two fields 'addresses' or 'regexes' must be a non-empty array
+      if (!pool.addresses && !pool.regexes) {
+        logger.err(`Mining pool ${pool.name} must have at least one of the fields 'addresses' or 'regexes'. Skipping.`);
+        continue;
+      }
+      
+      pool.addresses = pool.addresses || [];
+      pool.regexes = pool.regexes || [];
+      
+      if (pool.addresses.length === 0 && pool.regexes.length === 0) {
+        logger.err(`Mining pool ${pool.name} has no 'addresses' nor 'regexes' defined. Skipping.`);
+        continue;
+      }
+      
+      if (pool.addresses.length === 0) {
+        logger.warn(`Mining pool ${pool.name} has no 'addresses' defined.`);
+      }
+      
+      if (pool.regexes.length === 0) {
+        logger.warn(`Mining pool ${pool.name} has no 'regexes' defined.`);
+      }      
+
       const poolDB = await PoolsRepository.$getPoolByUniqueId(pool.id, false);
       if (!poolDB) {
         // New mining pool

backend/src/api/statistics/statistics-api.ts

@@ -64,7 +64,7 @@ class StatisticsApi {
     }
   }
 
-  public async $create(statistics: Statistic): Promise<number | undefined> {
+  public async $create(statistics: Statistic, convertToDatetime = false): Promise<number | undefined> {
     try {
       const query = `INSERT INTO statistics(
               added,
@@ -114,7 +114,7 @@ class StatisticsApi {
               vsize_1800,
               vsize_2000
             )
-            VALUES (${statistics.added}, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,
+            VALUES (${convertToDatetime ? `FROM_UNIXTIME(${statistics.added})` : statistics.added}, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,
                ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
 
       const params: (string | number)[] = [
@@ -456,6 +456,59 @@ class StatisticsApi {
       };
     });
   }
+
+  public mapOptimizedStatisticToStatistic(statistic: OptimizedStatistic[]): Statistic[] {
+    return statistic.map((s) => {
+      return {
+        added: s.added,
+        unconfirmed_transactions: s.count,
+        tx_per_second: 0,
+        vbytes_per_second: s.vbytes_per_second,
+        mempool_byte_weight: s.mempool_byte_weight || 0,
+        total_fee: s.total_fee || 0,
+        min_fee: s.min_fee,
+        fee_data: '',
+        vsize_1: s.vsizes[0],
+        vsize_2: s.vsizes[1],
+        vsize_3: s.vsizes[2],
+        vsize_4: s.vsizes[3],
+        vsize_5: s.vsizes[4],
+        vsize_6: s.vsizes[5],
+        vsize_8: s.vsizes[6],
+        vsize_10: s.vsizes[7],
+        vsize_12: s.vsizes[8],
+        vsize_15: s.vsizes[9],
+        vsize_20: s.vsizes[10],
+        vsize_30: s.vsizes[11],
+        vsize_40: s.vsizes[12],
+        vsize_50: s.vsizes[13],
+        vsize_60: s.vsizes[14],
+        vsize_70: s.vsizes[15],
+        vsize_80: s.vsizes[16],
+        vsize_90: s.vsizes[17],
+        vsize_100: s.vsizes[18],
+        vsize_125: s.vsizes[19],
+        vsize_150: s.vsizes[20],
+        vsize_175: s.vsizes[21],
+        vsize_200: s.vsizes[22],
+        vsize_250: s.vsizes[23],
+        vsize_300: s.vsizes[24],
+        vsize_350: s.vsizes[25],
+        vsize_400: s.vsizes[26],
+        vsize_500: s.vsizes[27],
+        vsize_600: s.vsizes[28],
+        vsize_700: s.vsizes[29],
+        vsize_800: s.vsizes[30],
+        vsize_900: s.vsizes[31],
+        vsize_1000: s.vsizes[32],
+        vsize_1200: s.vsizes[33],
+        vsize_1400: s.vsizes[34],
+        vsize_1600: s.vsizes[35],
+        vsize_1800: s.vsizes[36],
+        vsize_2000: s.vsizes[37],
+      }
+    });
+  }
 }
 
 export default new StatisticsApi();

backend/src/api/websocket-handler.ts

@@ -3,6 +3,7 @@ import * as WebSocket from 'ws';
 import {
   BlockExtended, TransactionExtended, MempoolTransactionExtended, WebsocketResponse,
   OptimizedStatistic, ILoadingIndicators, GbtCandidates, TxTrackingInfo,
+  MempoolBlockDelta, MempoolDelta, MempoolDeltaTxids
 } from '../mempool.interfaces';
 import blocks from './blocks';
 import memPool from './mempool';
@@ -346,6 +347,17 @@ class WebsocketHandler {
             }
           }
 
+          if (parsedMessage && parsedMessage['track-accelerations'] != null) {
+            if (parsedMessage['track-accelerations']) {
+              client['track-accelerations'] = true;
+              response['accelerations'] = JSON.stringify({
+                accelerations: Object.values(memPool.getAccelerations()),
+              });
+            } else {
+              client['track-accelerations'] = false;
+            }
+          }
+
           if (parsedMessage.action === 'init') {
             if (!this.socketData['blocks']?.length || !this.socketData['da'] || !this.socketData['backendInfo'] || !this.socketData['conversions']) {
               this.updateSocketData();
@@ -364,6 +376,18 @@ class WebsocketHandler {
             client['track-donation'] = parsedMessage['track-donation'];
           }
 
+          if (parsedMessage['track-mempool-txids'] === true) {
+            client['track-mempool-txids'] = true;
+          } else if (parsedMessage['track-mempool-txids'] === false) {
+            delete client['track-mempool-txids'];
+          }
+
+          if (parsedMessage['track-mempool'] === true) {
+            client['track-mempool'] = true;
+          } else if (parsedMessage['track-mempool'] === false) {
+            delete client['track-mempool'];
+          }
+
           if (Object.keys(response).length) {
             client.send(this.serializeResponse(response));
           }
@@ -524,6 +548,7 @@ class WebsocketHandler {
     const vBytesPerSecond = memPool.getVBytesPerSecond();
     const rbfTransactions = Common.findRbfTransactions(newTransactions, deletedTransactions);
     const da = difficultyAdjustment.getDifficultyAdjustment();
+    const accelerations = memPool.getAccelerations();
     memPool.handleRbfTransactions(rbfTransactions);
     const rbfChanges = rbfCache.getRbfChanges();
     let rbfReplacements;
@@ -545,6 +570,33 @@ class WebsocketHandler {
 
     const latestTransactions = memPool.getLatestTransactions();
 
+    if (memPool.isInSync()) {
+      this.mempoolSequence++;
+    }
+
+    const replacedTransactions: { replaced: string, by: TransactionExtended }[] = [];
+    for (const tx of newTransactions) {
+      if (rbfTransactions[tx.txid]) {
+        for (const replaced of rbfTransactions[tx.txid]) {
+          replacedTransactions.push({ replaced: replaced.txid, by: tx });
+        }
+      }
+    }
+    const mempoolDeltaTxids: MempoolDeltaTxids = {
+      sequence: this.mempoolSequence,
+      added: newTransactions.map(tx => tx.txid),
+      removed: deletedTransactions.map(tx => tx.txid),
+      mined: [],
+      replaced: replacedTransactions.map(replacement => ({ replaced: replacement.replaced, by: replacement.by.txid })),
+    };
+    const mempoolDelta: MempoolDelta = {
+      sequence: this.mempoolSequence,
+      added: newTransactions,
+      removed: deletedTransactions.map(tx => tx.txid),
+      mined: [],
+      replaced: replacedTransactions,
+    };
+
     // update init data
     const socketDataFields = {
       'mempoolInfo': mempoolInfo,
@@ -604,9 +656,11 @@ class WebsocketHandler {
     const addressCache = this.makeAddressCache(newTransactions);
     const removedAddressCache = this.makeAddressCache(deletedTransactions);
 
-    if (memPool.isInSync()) {
-      this.mempoolSequence++;
-    }
+    // pre-compute acceleration delta
+    const accelerationUpdate = {
+      added: accelerationDelta.map(txid => accelerations[txid]).filter(acc => acc != null),
+      removed: accelerationDelta.filter(txid => !accelerations[txid]),
+    };
 
     // TODO - Fix indentation after PR is merged
     for (const server of this.webSocketServers) {
@@ -847,6 +901,18 @@ class WebsocketHandler {
         response['rbfLatestSummary'] = getCachedResponse('rbfLatestSummary', rbfSummary);
       }
 
+      if (client['track-mempool-txids']) {
+        response['mempool-txids'] = getCachedResponse('mempool-txids', mempoolDeltaTxids);
+      }
+
+      if (client['track-mempool']) {
+        response['mempool-transactions'] = getCachedResponse('mempool-transactions', mempoolDelta);
+      }
+
+      if (client['track-accelerations'] && (accelerationUpdate.added.length || accelerationUpdate.removed.length)) {
+        response['accelerations'] = getCachedResponse('accelerations', accelerationUpdate);
+      }
+
       if (Object.keys(response).length) {
         client.send(this.serializeResponse(response));
       }
@@ -992,6 +1058,31 @@ class WebsocketHandler {
 
     const mBlocksWithTransactions = mempoolBlocks.getMempoolBlocksWithTransactions();
 
+    if (memPool.isInSync()) {
+      this.mempoolSequence++;
+    }
+
+    const replacedTransactions: { replaced: string, by: TransactionExtended }[] = [];
+    for (const txid of Object.keys(rbfTransactions)) {
+      for (const replaced of rbfTransactions[txid].replaced) {
+        replacedTransactions.push({ replaced: replaced.txid, by: rbfTransactions[txid].replacedBy });
+      }
+    }
+    const mempoolDeltaTxids: MempoolDeltaTxids = {
+      sequence: this.mempoolSequence,
+      added: [],
+      removed: [],
+      mined: transactions.map(tx => tx.txid),
+      replaced: replacedTransactions.map(replacement => ({ replaced: replacement.replaced, by: replacement.by.txid })),
+    };
+    const mempoolDelta: MempoolDelta = {
+      sequence: this.mempoolSequence,
+      added: [],
+      removed: [],
+      mined: transactions.map(tx => tx.txid),
+      replaced: replacedTransactions,
+    };
+
     const responseCache = { ...this.socketData };
     function getCachedResponse(key, data): string {
       if (!responseCache[key]) {
@@ -1000,10 +1091,6 @@ class WebsocketHandler {
       return responseCache[key];
     }
 
-    if (memPool.isInSync()) {
-      this.mempoolSequence++;
-    }
-
     // TODO - Fix indentation after PR is merged
     for (const server of this.webSocketServers) {
     server.clients.forEach((client) => {
@@ -1185,6 +1272,14 @@ class WebsocketHandler {
         }
       }
 
+      if (client['track-mempool-txids']) {
+        response['mempool-txids'] = getCachedResponse('mempool-txids', mempoolDeltaTxids);
+      }
+
+      if (client['track-mempool']) {
+        response['mempool-transactions'] = getCachedResponse('mempool-transactions', mempoolDelta);
+      }
+
       if (Object.keys(response).length) {
         client.send(this.serializeResponse(response));
       }

backend/src/config.ts

@@ -141,6 +141,8 @@ interface IConfig {
     ENABLED: boolean;
     AUDIT: boolean;
     AUDIT_START_HEIGHT: number;
+    STATISTICS: boolean;
+    STATISTICS_START_TIME: number | string;
     SERVERS: string[];
   },
   MEMPOOL_SERVICES: {
@@ -298,6 +300,8 @@ const defaults: IConfig = {
     'ENABLED': false,
     'AUDIT': false,
     'AUDIT_START_HEIGHT': 774000,
+    'STATISTICS': false,
+    'STATISTICS_START_TIME': 1481932800,
     'SERVERS': [],
   },
   'MEMPOOL_SERVICES': {

backend/src/index.ts

@@ -131,6 +131,7 @@ class Server {
       })
       .use(express.urlencoded({ extended: true }))
       .use(express.text({ type: ['text/plain', 'application/base64'] }))
+      .use(express.json())
       ;
 
     if (config.DATABASE.ENABLED && config.FIAT_PRICE.ENABLED) {

backend/src/indexer.ts

@@ -8,6 +8,7 @@ import priceUpdater from './tasks/price-updater';
 import PricesRepository from './repositories/PricesRepository';
 import config from './config';
 import auditReplicator from './replication/AuditReplication';
+import statisticsReplicator from './replication/StatisticsReplication';
 import AccelerationRepository from './repositories/AccelerationRepository';
 
 export interface CoreIndex {
@@ -188,6 +189,7 @@ class Indexer {
       await blocks.$generateCPFPDatabase();
       await blocks.$generateAuditStats();
       await auditReplicator.$sync();
+      await statisticsReplicator.$sync();
       await AccelerationRepository.$indexPastAccelerations();
       // do not wait for classify blocks to finish
       blocks.$classifyBlocks();

backend/src/mempool.interfaces.ts

@@ -71,6 +71,22 @@ export interface MempoolBlockDelta {
   changed: MempoolDeltaChange[];
 }
 
+export interface MempoolDeltaTxids {
+  sequence: number,
+  added: string[];
+  removed: string[];
+  mined: string[];
+  replaced: { replaced: string, by: string }[];
+}
+
+export interface MempoolDelta {
+  sequence: number,
+  added: MempoolTransactionExtended[];
+  removed: string[];
+  mined: string[];
+  replaced: { replaced: string, by: TransactionExtended }[];
+}
+
 interface VinStrippedToScriptsig {
   scriptsig: string;
 }
@@ -406,6 +422,7 @@ export interface Statistic {
 
 export interface OptimizedStatistic {
   added: string;
+  count: number;
   vbytes_per_second: number;
   total_fee: number;
   mempool_byte_weight: number;

backend/src/replication/StatisticsReplication.ts

@@ -0,0 +1,228 @@
+import DB from '../database';
+import logger from '../logger';
+import { $sync } from './replicator';
+import config from '../config';
+import { Common } from '../api/common';
+import statistics from '../api/statistics/statistics-api';
+
+interface MissingStatistics {
+  '24h': Set<number>;
+  '1w': Set<number>;
+  '1m': Set<number>;
+  '3m': Set<number>;
+  '6m': Set<number>;
+  '2y': Set<number>;
+  'all': Set<number>;
+}
+
+const steps = {
+  '24h': 60,
+  '1w': 300,
+  '1m': 1800,
+  '3m': 7200,
+  '6m': 10800,
+  '2y': 28800,
+  'all': 43200,
+};
+
+/**
+ * Syncs missing statistics data from trusted servers
+ */
+class StatisticsReplication {
+  inProgress: boolean = false;
+
+  public async $sync(): Promise<void> {
+    if (!config.REPLICATION.ENABLED || !config.REPLICATION.STATISTICS || !config.STATISTICS.ENABLED) {
+      // replication not enabled, or statistics not enabled
+      return;
+    }
+    if (this.inProgress) {
+      logger.info(`StatisticsReplication sync already in progress`, 'Replication');
+      return;
+    }
+    this.inProgress = true;
+
+    const missingStatistics = await this.$getMissingStatistics();
+    const missingIntervals = Object.keys(missingStatistics).filter(key => missingStatistics[key].size > 0);
+    const totalMissing =  missingIntervals.reduce((total, key) => total + missingStatistics[key].size, 0);
+
+    if (totalMissing === 0) {
+      this.inProgress = false;
+      logger.info(`Statistics table is complete, no replication needed`, 'Replication');
+      return;
+    }
+    
+    for (const interval of missingIntervals) {
+      logger.debug(`Missing ${missingStatistics[interval].size} statistics rows in '${interval}' timespan`, 'Replication');
+    }
+    logger.debug(`Fetching ${missingIntervals.join(', ')} statistics endpoints from trusted servers to fill ${totalMissing} rows missing in statistics`, 'Replication');
+    
+    let totalSynced = 0;
+    let totalMissed = 0;
+
+    for (const interval of missingIntervals) {
+      const results = await this.$syncStatistics(interval, missingStatistics[interval]);
+      totalSynced += results.synced;
+      totalMissed += results.missed;
+
+      logger.info(`Found ${totalSynced} / ${totalSynced + totalMissed} of ${totalMissing} missing statistics rows`, 'Replication');
+      await Common.sleep$(3000);
+    }
+
+    logger.debug(`Synced ${totalSynced} statistics rows, ${totalMissed} still missing`, 'Replication');
+
+    this.inProgress = false;
+  }
+
+  private async $syncStatistics(interval: string, missingTimes: Set<number>): Promise<any> {
+  
+    let success = false;
+    let synced = 0;
+    let missed = new Set(missingTimes);
+    const syncResult = await $sync(`/api/v1/statistics/${interval}`);
+    if (syncResult && syncResult.data?.length) {
+      success = true;
+      logger.info(`Fetched /api/v1/statistics/${interval} from ${syncResult.server}`);     
+    
+      for (const stat of syncResult.data) {
+        const time = this.roundToNearestStep(stat.added, steps[interval]);
+        if (missingTimes.has(time)) {
+          try {
+            await statistics.$create(statistics.mapOptimizedStatisticToStatistic([stat])[0], true);
+            if (missed.delete(time)) {
+              synced++;
+            }
+          } catch (e: any) {
+            logger.err(`Failed to insert statistics row at ${stat.added} (${interval}) from ${syncResult.server}. Reason: ` + (e instanceof Error ? e.message : e));
+          }
+        }
+      }
+
+    } else {
+      logger.warn(`An error occured when trying to fetch /api/v1/statistics/${interval}`);
+    }
+
+    return { success, synced, missed: missed.size };
+  }
+
+  private async $getMissingStatistics(): Promise<MissingStatistics> {
+    try {
+      const now = Math.floor(Date.now() / 1000);
+      const day = 60 * 60 * 24;
+
+      const startTime = this.getStartTimeFromConfig();
+
+      const missingStatistics: MissingStatistics = {
+        '24h': new Set<number>(),
+        '1w': new Set<number>(),
+        '1m': new Set<number>(),
+        '3m': new Set<number>(),
+        '6m': new Set<number>(),
+        '2y': new Set<number>(),
+        'all': new Set<number>()
+      };
+
+      const intervals = [              // [start,               end,                 label ]
+                                          [now - day,           now - 60,            '24h']       , // from 24 hours ago to now = 1 minute granularity
+        startTime < now - day ?           [now - day * 7,       now - day,           '1w' ] : null, // from 1 week ago to 24 hours ago = 5 minutes granularity
+        startTime < now - day * 7 ?       [now - day * 30,      now - day * 7,       '1m' ] : null, // from 1 month ago to 1 week ago = 30 minutes granularity
+        startTime < now - day * 30 ?      [now - day * 90,      now - day * 30,      '3m' ] : null, // from 3 months ago to 1 month ago = 2 hours granularity
+        startTime < now - day * 90 ?      [now - day * 180,     now - day * 90,      '6m' ] : null, // from 6 months ago to 3 months ago = 3 hours granularity
+        startTime < now - day * 180 ?     [now - day * 365 * 2, now - day * 180,     '2y' ] : null, // from 2 years ago to 6 months ago = 8 hours granularity
+        startTime < now - day * 365 * 2 ? [startTime,           now - day * 365 * 2, 'all'] : null, // from start of statistics to 2 years ago = 12 hours granularity   
+      ];
+
+      for (const interval of intervals) {
+        if (!interval) {
+          continue;
+        }
+        missingStatistics[interval[2] as string] = await this.$getMissingStatisticsInterval(interval, startTime);
+      }
+      
+      return missingStatistics;
+    } catch (e: any) {
+      logger.err(`Cannot fetch missing statistics times from db. Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
+  private async $getMissingStatisticsInterval(interval: any, startTime: number): Promise<Set<number>> {
+    try {
+      const start = interval[0];
+      const end = interval[1];
+      const step = steps[interval[2]];
+
+      const [rows]: any[] = await DB.query(`
+        SELECT UNIX_TIMESTAMP(added) as added
+        FROM statistics
+        WHERE added >= FROM_UNIXTIME(?) AND added <= FROM_UNIXTIME(?)
+        GROUP BY UNIX_TIMESTAMP(added) DIV ${step} ORDER BY statistics.added DESC
+      `, [start, end]);
+
+      const startingTime = Math.max(startTime, start) - Math.max(startTime, start) % step;
+
+      const timeSteps: number[] = [];
+      for (let time = startingTime; time < end; time += step) {
+        timeSteps.push(time);
+      }
+
+      if (timeSteps.length === 0) {
+        return new Set<number>();
+      }
+      
+      const roundedTimesAlreadyHere = new Set(rows.map(row => this.roundToNearestStep(row.added, step)));
+      const missingTimes = new Set(timeSteps.filter(time => !roundedTimesAlreadyHere.has(time)));
+
+      // Don't bother fetching if very few rows are missing
+      if (missingTimes.size < timeSteps.length * 0.005) {
+        return new Set();
+      }
+
+      return missingTimes;
+    } catch (e: any) {
+      logger.err(`Cannot fetch missing statistics times from db. Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
+  private roundToNearestStep(time: number, step: number): number {
+    const remainder = time % step;
+    if (remainder < step / 2) {
+      return time - remainder;
+    } else {
+      return time + (step - remainder);
+    }
+  }
+
+  private getStartTimeFromConfig(): number {
+    const now = Math.floor(Date.now() / 1000);
+    const day = 60 * 60 * 24;
+
+    let startTime: number;
+    if (typeof(config.REPLICATION.STATISTICS_START_TIME) === 'string' && ['24h', '1w', '1m', '3m', '6m', '2y', 'all'].includes(config.REPLICATION.STATISTICS_START_TIME)) {
+      if (config.REPLICATION.STATISTICS_START_TIME === 'all') {
+        startTime = 1481932800;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '2y') {
+        startTime = now - day * 365 * 2;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '6m') {
+        startTime = now - day * 180;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '3m') {
+        startTime = now - day * 90;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '1m') {
+        startTime = now - day * 30;
+      } else if (config.REPLICATION.STATISTICS_START_TIME === '1w') {
+        startTime = now - day * 7;
+      } else {
+        startTime = now - day;
+      }
+    } else {
+      startTime = Math.max(config.REPLICATION.STATISTICS_START_TIME as number || 1481932800, 1481932800);
+    }
+
+    return startTime;
+  }
+
+}
+
+export default new StatisticsReplication();
+

backend/src/repositories/AccelerationRepository.ts

@@ -244,6 +244,8 @@ class AccelerationRepository {
     let count = 0;
     try {
       while (!done) {
+        // don't DDoS the services backend
+        Common.sleep$(500 + (Math.random() * 1000));
         const accelerations = await accelerationApi.$fetchAccelerationHistory(page);
         page++;
         if (!accelerations?.length) {
@@ -309,7 +311,7 @@ class AccelerationRepository {
           pools: acc.pools.map(pool => pool.pool_unique_id),
         }))
         for (const acc of accelerations) {
-          if (blockTxs[acc.txid]) {
+          if (blockTxs[acc.txid] && acc.pools.some(pool => pool.pool_unique_id === block.extras.pool.id)) {
             const tx = blockTxs[acc.txid];
             const accelerationInfo = accelerationCosts.getAccelerationInfo(tx, boostRate, transactions);
             accelerationInfo.cost = Math.max(0, Math.min(acc.feeDelta, accelerationInfo.cost));

backend/src/repositories/BlocksRepository.ts

@@ -663,7 +663,7 @@ class BlocksRepository {
   /**
    * Get the historical averaged block fees
    */
-  public async $getHistoricalBlockFees(div: number, interval: string | null): Promise<any> {
+  public async $getHistoricalBlockFees(div: number, interval: string | null, timespan?: {from: number, to: number}): Promise<any> {
     try {
       let query = `SELECT
         CAST(AVG(blocks.height) as INT) as avgHeight,
@@ -677,6 +677,8 @@ class BlocksRepository {
 
       if (interval !== null) {
         query += ` WHERE blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
+      } else if (timespan) {
+        query += ` WHERE blockTimestamp BETWEEN FROM_UNIXTIME(${timespan.from}) AND FROM_UNIXTIME(${timespan.to})`;
       }
 
       query += ` GROUP BY UNIX_TIMESTAMP(blockTimestamp) DIV ${div}`;

contributors/bitcoinmechanic.txt

@@ -0,0 +1,3 @@
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of January 25, 2022.
+
+Signed: bitcoinmechanic

docker/backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.12.0-buster-slim AS builder
+FROM node:20.13.1-buster-slim AS builder
 
 ARG commitHash
 ENV MEMPOOL_COMMIT_HASH=${commitHash}
@@ -24,7 +24,7 @@ RUN npm install --omit=dev --omit=optional
 WORKDIR /build
 RUN npm run package
 
-FROM node:20.12.0-buster-slim
+FROM node:20.13.1-buster-slim
 
 WORKDIR /backend
 

docker/backend/mempool-config.json

@@ -137,6 +137,8 @@
     "ENABLED": __REPLICATION_ENABLED__,
     "AUDIT": __REPLICATION_AUDIT__,
     "AUDIT_START_HEIGHT": __REPLICATION_AUDIT_START_HEIGHT__,
+    "STATISTICS": __REPLICATION_STATISTICS__,
+    "STATISTICS_START_TIME": __REPLICATION_STATISTICS_START_TIME__,
     "SERVERS": __REPLICATION_SERVERS__
   },
   "MEMPOOL_SERVICES": {

docker/backend/start.sh

@@ -138,6 +138,8 @@ __MAXMIND_GEOIP2_ISP__=${MAXMIND_GEOIP2_ISP:=""}
 __REPLICATION_ENABLED__=${REPLICATION_ENABLED:=false}
 __REPLICATION_AUDIT__=${REPLICATION_AUDIT:=false}
 __REPLICATION_AUDIT_START_HEIGHT__=${REPLICATION_AUDIT_START_HEIGHT:=774000}
+__REPLICATION_STATISTICS__=${REPLICATION_STATISTICS:=false}
+__REPLICATION_STATISTICS_START_TIME__=${REPLICATION_STATISTICS_START_TIME:=1481932800}
 __REPLICATION_SERVERS__=${REPLICATION_SERVERS:=[]}
 
 # MEMPOOL_SERVICES
@@ -284,6 +286,8 @@ sed -i "s!__MAXMIND_GEOIP2_ISP__!${__MAXMIND_GEOIP2_ISP__}!g" mempool-config.jso
 sed -i "s!__REPLICATION_ENABLED__!${__REPLICATION_ENABLED__}!g" mempool-config.json
 sed -i "s!__REPLICATION_AUDIT__!${__REPLICATION_AUDIT__}!g" mempool-config.json
 sed -i "s!__REPLICATION_AUDIT_START_HEIGHT__!${__REPLICATION_AUDIT_START_HEIGHT__}!g" mempool-config.json
+sed -i "s!__REPLICATION_STATISTICS__!${__REPLICATION_STATISTICS__}!g" mempool-config.json
+sed -i "s!__REPLICATION_STATISTICS_START_TIME__!${__REPLICATION_STATISTICS_START_TIME__}!g" mempool-config.json
 sed -i "s!__REPLICATION_SERVERS__!${__REPLICATION_SERVERS__}!g" mempool-config.json
 
 # MEMPOOL_SERVICES

docker/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.12.0-buster-slim AS builder
+FROM node:20.13.1-buster-slim AS builder
 
 ARG commitHash
 ENV DOCKER_COMMIT_HASH=${commitHash}
@@ -13,7 +13,7 @@ RUN npm install --omit=dev --omit=optional
 
 RUN npm run build
 
-FROM nginx:1.25.4-alpine
+FROM nginx:1.26.0-alpine
 
 WORKDIR /patch
 

frontend/.eslintrc

@@ -34,6 +34,7 @@
     "prefer-rest-params": 1,
     "quotes": [1, "single", { "allowTemplateLiterals": true }],
     "semi": 1,
+    "curly": [1, "all"],
     "eqeqeq": 1
   }
 }

frontend/.gitignore

@@ -63,6 +63,7 @@ src/resources/pools.json
 src/resources/mining-pools/*
 src/resources/**/*.mp4
 src/resources/**/*.vtt
+src/resources/customize.js
 
 # environment config
 mempool-frontend-config.json

frontend/angular.json

@@ -166,6 +166,7 @@
               "src/resources",
               "src/robots.txt",
               "src/config.js",
+              "src/customize.js",
               "src/config.template.js"
             ],
             "styles": [
@@ -180,6 +181,11 @@
                 "bundleName": "wiz",
                 "inject": false
               },
+              {
+                "input": "src/theme-bukele.scss",
+                "bundleName": "bukele",
+                "inject": false
+              },
               "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
             ],
             "vendorChunk": true,

frontend/custom-sv-config.json

@@ -0,0 +1,52 @@
+{
+  "theme": "bukele",
+  "enterprise": "onbtc",
+  "branding": {
+    "name": "onbtc",
+    "title": "Bitcoin Office",
+    "site_id": 19,
+    "header_img": "/resources/onbtclogo.svg",
+    "footer_img": "/resources/onbtclogo.svg",
+    "rounded_corner": true
+  },
+  "dashboard": {
+    "widgets": [
+      {
+        "component": "fees",
+        "mobileOrder": 4
+      },
+      {
+        "component": "balance",
+        "mobileOrder": 1,
+        "props": {
+          "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo"
+        }
+      },
+      {
+        "component": "twitter",
+        "mobileOrder": 5,
+        "props": {
+          "handle": "nayibbukele"
+        }
+      },
+      {
+        "component": "address",
+        "mobileOrder": 2,
+        "props": {
+          "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo",
+          "period": "1m"
+        }
+      },
+      {
+        "component": "blocks"
+      },
+      {
+        "component": "addressTransactions",
+        "mobileOrder": 3,
+        "props": {
+          "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo"
+        }
+      }
+    ]
+  }
+}

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

@@ -45,6 +45,7 @@ describe('Liquid', () => {
 
     it('loads a specific block page', () => {
       cy.visit(`${basePath}/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54`);
+      cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
       cy.waitForSkeletonGone();
     });
 

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

@@ -46,7 +46,8 @@ describe('Liquid Testnet', () => {
     });
 
     it('loads a specific block page', () => {
-      cy.visit(`${basePath}/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54`);
+      cy.visit(`${basePath}/block/fb4cbcbff3993ca4bf8caf657d55a23db5ed4ab1cfa33c489303c2e04e1c38e0`);
+      cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
       cy.waitForSkeletonGone();
     });
 

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

@@ -103,6 +103,7 @@ describe('Mainnet', () => {
 
     it('check op_return tx tooltip', () => {
       cy.visit('/block/00000000000000000003c5f542bed265319c6cf64238cf1f1bb9bca3ebf686d2');
+      cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
       cy.waitForSkeletonGone();
       cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('onmouseover');
       cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('mouseenter');
@@ -111,9 +112,10 @@ describe('Mainnet', () => {
 
     it('check op_return coinbase tooltip', () => {
       cy.visit('/block/00000000000000000003c5f542bed265319c6cf64238cf1f1bb9bca3ebf686d2');
+      cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
       cy.waitForSkeletonGone();
-      cy.get('div > a > .badge').first().trigger('onmouseover');
-      cy.get('div > a > .badge').first().trigger('mouseenter');
+      cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('onmouseover');
+      cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('mouseenter');
       cy.get('.tooltip-inner').should('be.visible');
     });
 
@@ -283,6 +285,7 @@ describe('Mainnet', () => {
         it('loads genesis block and keypress arrow right', () => {
           cy.viewport('macbook-16');
           cy.visit('/block/0');
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
 
@@ -295,6 +298,7 @@ describe('Mainnet', () => {
         it('loads genesis block and keypress arrow left', () => {
           cy.viewport('macbook-16');
           cy.visit('/block/0');
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
 
@@ -323,6 +327,7 @@ describe('Mainnet', () => {
         it('loads genesis block and click on the arrow left', () => {
           cy.viewport('macbook-16');
           cy.visit('/block/0');
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
           cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
@@ -339,7 +344,7 @@ describe('Mainnet', () => {
       cy.visit('/');
       cy.waitForSkeletonGone();
 
-      cy.changeNetwork('testnet');
+      cy.changeNetwork('testnet4');
       cy.changeNetwork('signet');
       cy.changeNetwork('mainnet');
     });
@@ -439,6 +444,7 @@ describe('Mainnet', () => {
     describe('blocks', () => {
       it('shows empty blocks properly', () => {
         cy.visit('/block/0000000000000000000bd14f744ef2e006e61c32214670de7eb891a5732ee775');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.waitForPageIdle();
         cy.get('h2').invoke('text').should('equal', '1 transaction');
@@ -446,6 +452,7 @@ describe('Mainnet', () => {
 
       it('expands and collapses the block details', () => {
         cy.visit('/block/0');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.waitForPageIdle();
         cy.get('.btn.btn-outline-info').click().then(() => {
@@ -458,6 +465,7 @@ describe('Mainnet', () => {
       });
       it('shows blocks with no pagination', () => {
         cy.visit('/block/00000000000000000001ba40caf1ad4cec0ceb77692662315c151953bfd7c4c4');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.waitForPageIdle();
         cy.get('.block-tx-title h2').invoke('text').should('equal', '19 transactions');
@@ -467,6 +475,7 @@ describe('Mainnet', () => {
       it('supports pagination on the block screen', () => {
         // 41 txs
         cy.visit('/block/00000000000000000009f9b7b0f63ad50053ad12ec3b7f5ca951332f134f83d8');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.pagination-container a').invoke('text').then((text1) => {
           cy.get('.active + li').first().click().then(() => {
@@ -482,6 +491,7 @@ describe('Mainnet', () => {
       it('shows blocks pagination with 5 pages (desktop)', () => {
         cy.viewport(760, 800);
         cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3').then(() => {
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
         });
@@ -493,6 +503,7 @@ describe('Mainnet', () => {
       it('shows blocks pagination with 3 pages (mobile)', () => {
         cy.viewport(669, 800);
         cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3').then(() => {
+          cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
           cy.waitForSkeletonGone();
           cy.waitForPageIdle();
         });

frontend/cypress/e2e/signet/signet.spec.ts

@@ -95,12 +95,14 @@ describe('Signet', () => {
     describe('blocks', () => {
       it('shows empty blocks properly', () => {
         cy.visit('/signet/block/00000133d54e4589f6436703b067ec23209e0a21b8a9b12f57d0592fd85f7a42');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('h2').invoke('text').should('equal', '1 transaction');
       });
 
       it('expands and collapses the block details', () => {
         cy.visit('/signet/block/0');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.btn.btn-outline-info').click().then(() => {
           cy.get('#details').should('be.visible');
@@ -113,6 +115,7 @@ describe('Signet', () => {
 
       it('shows blocks with no pagination', () => {
         cy.visit('/signet/block/00000078f920a96a69089877b934ce7fd009ab55e3170920a021262cb258e7cc');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('h2').invoke('text').should('equal', '13 transactions');
         cy.get('ul.pagination').first().children().should('have.length', 5);
@@ -121,6 +124,7 @@ describe('Signet', () => {
       it('supports pagination on the block screen', () => {
         // 43 txs
         cy.visit('/signet/block/00000094bd52f73bdbfc4bece3a94c21fec2dc968cd54210496e69e4059d66a6');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.header-bg.box > a').invoke('text').then((text1) => {
           cy.get('.active + li').first().click().then(() => {

frontend/cypress/e2e/testnet4/testnet4.spec.ts

@@ -2,7 +2,7 @@ import { emitMempoolInfo } from '../../support/websocket';
 
 const baseModule = Cypress.env('BASE_MODULE');
 
-describe('Testnet', () => {
+describe('Testnet4', () => {
   beforeEach(() => {
     cy.intercept('/api/block-height/*').as('block-height');
     cy.intercept('/api/block/*').as('block');
@@ -13,7 +13,7 @@ describe('Testnet', () => {
   if (baseModule === 'mempool') {
 
     it('loads the dashboard', () => {
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.waitForSkeletonGone();
     });
 
@@ -25,7 +25,7 @@ describe('Testnet', () => {
 
     it.skip('loads the dashboard with the skeleton blocks', () => {
       cy.mockMempoolSocket();
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
       cy.get(':nth-child(2) > #bitcoin-block-0').should('be.visible');
       cy.get(':nth-child(3) > #bitcoin-block-0').should('be.visible');
@@ -45,7 +45,7 @@ describe('Testnet', () => {
     });
 
     it('loads the pools screen', () => {
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.waitForSkeletonGone();
       cy.get('#btn-pools').click().then(() => {
         cy.wait(1000);
@@ -53,7 +53,7 @@ describe('Testnet', () => {
     });
 
     it('loads the graphs screen', () => {
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.waitForSkeletonGone();
       cy.get('#btn-graphs').click().then(() => {
         cy.wait(1000);
@@ -63,7 +63,7 @@ describe('Testnet', () => {
     describe('tv mode', () => {
       it('loads the tv screen - desktop', () => {
         cy.viewport('macbook-16');
-        cy.visit('/testnet/graphs');
+        cy.visit('/testnet4/graphs');
         cy.waitForSkeletonGone();
         cy.get('#btn-tv').click().then(() => {
           cy.wait(1000);
@@ -73,7 +73,7 @@ describe('Testnet', () => {
       });
 
       it('loads the tv screen - mobile', () => {
-        cy.visit('/testnet/graphs');
+        cy.visit('/testnet4/graphs');
         cy.waitForSkeletonGone();
         cy.get('#btn-tv').click().then(() => {
           cy.viewport('iphone-6');
@@ -85,7 +85,7 @@ describe('Testnet', () => {
 
 
     it('loads the api screen', () => {
-      cy.visit('/testnet');
+      cy.visit('/testnet4');
       cy.waitForSkeletonGone();
       cy.get('#btn-docs').click().then(() => {
         cy.wait(1000);
@@ -94,13 +94,15 @@ describe('Testnet', () => {
 
     describe('blocks', () => {
       it('shows empty blocks properly', () => {
-        cy.visit('/testnet/block/0');
+        cy.visit('/testnet4/block/0');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('h2').invoke('text').should('equal', '1 transaction');
       });
 
       it('expands and collapses the block details', () => {
-        cy.visit('/testnet/block/0');
+        cy.visit('/testnet4/block/0');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.btn.btn-outline-info').click().then(() => {
           cy.get('#details').should('be.visible');
@@ -112,15 +114,17 @@ describe('Testnet', () => {
       });
 
       it('shows blocks with no pagination', () => {
-        cy.visit('/testnet/block/000000000000002f8ce27716e74ecc7ad9f7b5101fed12d09e28bb721b9460ea');
+        cy.visit('/testnet4/block/000000000066e8b6cc78a93f8989587f5819624bae2eb1c05f535cadded19f99');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
-        cy.get('h2').invoke('text').should('equal', '11 transactions');
+        cy.get('h2').invoke('text').should('equal', '18 transactions');
         cy.get('ul.pagination').first().children().should('have.length', 5);
       });
 
       it('supports pagination on the block screen', () => {
         // 48 txs
-        cy.visit('/testnet/block/000000000000002ca3878ebd98b313a1c2d531f2e70a6575d232ca7564dea7a9');
+        cy.visit('/testnet4/block/000000000000006982d53f8273bdff21dafc380c292eabc669b5ab6d732311c3');
+        cy.get('.pagination').scrollIntoView({ offset: { top: 200, left: 0 } });
         cy.waitForSkeletonGone();
         cy.get('.header-bg.box > a').invoke('text').then((text1) => {
           cy.get('.active + li').first().click().then(() => {

frontend/cypress/support/commands.ts

@@ -72,7 +72,7 @@ Cypress.Commands.add('mockMempoolSocket', () => {
   mockWebSocket();
 });
 
-Cypress.Commands.add('changeNetwork', (network: "testnet" | "signet" | "liquid" | "mainnet") => {
+Cypress.Commands.add('changeNetwork', (network: "testnet" | "testnet4" | "signet" | "liquid" | "mainnet") => {
   cy.get('.dropdown-toggle').click().then(() => {
     cy.get(`a.${network}`).click().then(() => {
       cy.waitForPageIdle();

frontend/cypress/support/index.d.ts

@@ -5,6 +5,6 @@ declare namespace Cypress {
         waitForSkeletonGone(): Chainable<any>
         waitForPageIdle(): Chainable<any>
         mockMempoolSocket(): Chainable<any>
-        changeNetwork(network: "testnet"|"signet"|"liquid"|"mainnet"): Chainable<any>
+        changeNetwork(network: "testnet"|"testnet4"|"signet"|"liquid"|"mainnet"): Chainable<any>
     }
 }

frontend/generate-config.js

@@ -4,11 +4,14 @@ const { spawnSync } = require('child_process');
 const CONFIG_FILE_NAME = 'mempool-frontend-config.json';
 const GENERATED_CONFIG_FILE_NAME = 'src/resources/config.js';
 const GENERATED_TEMPLATE_CONFIG_FILE_NAME = 'src/resources/config.template.js';
+const GENERATED_CUSTOMIZATION_FILE_NAME = 'src/resources/customize.js';
 
 let settings = [];
 let configContent = {};
 let gitCommitHash = '';
 let packetJsonVersion = '';
+let customConfig;
+let customConfigContent;
 
 try {
   const rawConfig = fs.readFileSync(CONFIG_FILE_NAME);
@@ -22,7 +25,18 @@ try {
   }
 }
 
-const indexFilePath = configContent.BASE_MODULE ? 'src/index.' + configContent.BASE_MODULE + '.html' : 'src/index.mempool.html';
+if (configContent && configContent.CUSTOMIZATION) {
+  try {
+    customConfig = readConfig(configContent.CUSTOMIZATION);
+    customConfigContent = JSON.parse(customConfig);
+  } catch (e) {
+    console.log(`failed to load customization config from ${configContent.CUSTOMIZATION}`);
+  }
+}
+
+const baseModuleName = configContent.BASE_MODULE || 'mempool';
+const customBuildName = (customConfigContent && customConfigContent.enterprise) ? ('.' + customConfigContent.enterprise) : '';
+const indexFilePath = 'src/index.' + baseModuleName + customBuildName + '.html';
 
 try {
   fs.copyFileSync(indexFilePath, 'src/index.html');
@@ -109,6 +123,17 @@ writeConfigTemplate(GENERATED_TEMPLATE_CONFIG_FILE_NAME, newConfigTemplate);
 
 const currentConfig = readConfig(GENERATED_CONFIG_FILE_NAME);
 
+let customConfigJs = '';
+if (customConfig) {
+  console.log(`Customizing frontend using ${configContent.CUSTOMIZATION}`);
+  customConfigJs = `(function (window) {
+    window.__env = window.__env || {};
+    window.__env.customize = ${customConfig};
+    }((typeof global !== 'undefined') ? global : this));
+  `;
+}
+writeConfig(GENERATED_CUSTOMIZATION_FILE_NAME, customConfigJs);
+
 if (currentConfig && currentConfig === newConfig) {
   console.log(`No configuration updates, skipping ${GENERATED_CONFIG_FILE_NAME} file update`);
   return;

frontend/mempool-frontend-config.sample.json

@@ -1,5 +1,6 @@
 {
   "TESTNET_ENABLED": false,
+  "TESTNET4_ENABLED": false,
   "SIGNET_ENABLED": false,
   "LIQUID_ENABLED": false,
   "LIQUID_TESTNET_ENABLED": false,

frontend/package-lock.json

@@ -32,12 +32,11 @@
         "bootstrap": "~4.6.2",
         "browserify": "^17.0.0",
         "clipboard": "^2.0.11",
-        "cypress": "^13.8.0",
         "domino": "^2.1.6",
         "echarts": "~5.5.0",
-        "esbuild": "^0.20.2",
+        "esbuild": "^0.21.1",
         "lightweight-charts": "~3.8.0",
-        "ngx-echarts": "~17.1.0",
+        "ngx-echarts": "~17.2.0",
         "ngx-infinite-scroll": "^17.0.0",
         "qrcode": "1.5.1",
         "rxjs": "~7.8.1",
@@ -63,7 +62,7 @@
       "optionalDependencies": {
         "@cypress/schematic": "^2.5.0",
         "@types/cypress": "^1.1.3",
-        "cypress": "^13.8.0",
+        "cypress": "^13.10.0",
         "cypress-fail-on-console-error": "~5.1.0",
         "cypress-wait-until": "^2.0.1",
         "mock-socket": "~9.3.1",
@@ -3197,9 +3196,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
-      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.1.tgz",
+      "integrity": "sha512-O7yppwipkXvnEPjzkSXJRk2g4bS8sUx9p9oXHq9MU/U7lxUzZVsnFZMDTmeeX9bfQxrFcvOacl/ENgOh0WP9pA==",
       "cpu": [
         "ppc64"
       ],
@@ -3212,9 +3211,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
-      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.1.tgz",
+      "integrity": "sha512-hh3jKWikdnTtHCglDAeVO3Oyh8MaH8xZUaWMiCCvJ9/c3NtPqZq+CACOlGTxhddypXhl+8B45SeceYBfB/e8Ow==",
       "cpu": [
         "arm"
       ],
@@ -3227,9 +3226,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
-      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.1.tgz",
+      "integrity": "sha512-jXhccq6es+onw7x8MxoFnm820mz7sGa9J14kLADclmiEUH4fyj+FjR6t0M93RgtlI/awHWhtF0Wgfhqgf9gDZA==",
       "cpu": [
         "arm64"
       ],
@@ -3242,9 +3241,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
-      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.1.tgz",
+      "integrity": "sha512-NPObtlBh4jQHE01gJeucqEhdoD/4ya2owSIS8lZYS58aR0x7oZo9lB2lVFxgTANSa5MGCBeoQtr+yA9oKCGPvA==",
       "cpu": [
         "x64"
       ],
@@ -3257,9 +3256,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.1.tgz",
+      "integrity": "sha512-BLT7TDzqsVlQRmJfO/FirzKlzmDpBWwmCUlyggfzUwg1cAxVxeA4O6b1XkMInlxISdfPAOunV9zXjvh5x99Heg==",
       "cpu": [
         "arm64"
       ],
@@ -3272,9 +3271,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
-      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.1.tgz",
+      "integrity": "sha512-D3h3wBQmeS/vp93O4B+SWsXB8HvRDwMyhTNhBd8yMbh5wN/2pPWRW5o/hM3EKgk9bdKd9594lMGoTCTiglQGRQ==",
       "cpu": [
         "x64"
       ],
@@ -3287,9 +3286,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
-      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.1.tgz",
+      "integrity": "sha512-/uVdqqpNKXIxT6TyS/oSK4XE4xWOqp6fh4B5tgAwozkyWdylcX+W4YF2v6SKsL4wCQ5h1bnaSNjWPXG/2hp8AQ==",
       "cpu": [
         "arm64"
       ],
@@ -3302,9 +3301,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
-      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.1.tgz",
+      "integrity": "sha512-paAkKN1n1jJitw+dAoR27TdCzxRl1FOEITx3h201R6NoXUojpMzgMLdkXVgCvaCSCqwYkeGLoe9UVNRDKSvQgw==",
       "cpu": [
         "x64"
       ],
@@ -3317,9 +3316,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
-      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.1.tgz",
+      "integrity": "sha512-tRHnxWJnvNnDpNVnsyDhr1DIQZUfCXlHSCDohbXFqmg9W4kKR7g8LmA3kzcwbuxbRMKeit8ladnCabU5f2traA==",
       "cpu": [
         "arm"
       ],
@@ -3332,9 +3331,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
-      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.1.tgz",
+      "integrity": "sha512-G65d08YoH00TL7Xg4LaL3gLV21bpoAhQ+r31NUu013YB7KK0fyXIt05VbsJtpqh/6wWxoLJZOvQHYnodRrnbUQ==",
       "cpu": [
         "arm64"
       ],
@@ -3347,9 +3346,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
-      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.1.tgz",
+      "integrity": "sha512-tt/54LqNNAqCz++QhxoqB9+XqdsaZOtFD/srEhHYwBd3ZUOepmR1Eeot8bS+Q7BiEvy9vvKbtpHf+r6q8hF5UA==",
       "cpu": [
         "ia32"
       ],
@@ -3362,9 +3361,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
-      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.1.tgz",
+      "integrity": "sha512-MhNalK6r0nZD0q8VzUBPwheHzXPr9wronqmZrewLfP7ui9Fv1tdPmg6e7A8lmg0ziQCziSDHxh3cyRt4YMhGnQ==",
       "cpu": [
         "loong64"
       ],
@@ -3377,9 +3376,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
-      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.1.tgz",
+      "integrity": "sha512-YCKVY7Zen5rwZV+nZczOhFmHaeIxR4Zn3jcmNH53LbgF6IKRwmrMywqDrg4SiSNApEefkAbPSIzN39FC8VsxPg==",
       "cpu": [
         "mips64el"
       ],
@@ -3392,9 +3391,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
-      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.1.tgz",
+      "integrity": "sha512-bw7bcQ+270IOzDV4mcsKAnDtAFqKO0jVv3IgRSd8iM0ac3L8amvCrujRVt1ajBTJcpDaFhIX+lCNRKteoDSLig==",
       "cpu": [
         "ppc64"
       ],
@@ -3407,9 +3406,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
-      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.1.tgz",
+      "integrity": "sha512-ARmDRNkcOGOm1AqUBSwRVDfDeD9hGYRfkudP2QdoonBz1ucWVnfBPfy7H4JPI14eYtZruRSczJxyu7SRYDVOcg==",
       "cpu": [
         "riscv64"
       ],
@@ -3422,9 +3421,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
-      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.1.tgz",
+      "integrity": "sha512-o73TcUNMuoTZlhwFdsgr8SfQtmMV58sbgq6gQq9G1xUiYnHMTmJbwq65RzMx89l0iya69lR4bxBgtWiiOyDQZA==",
       "cpu": [
         "s390x"
       ],
@@ -3437,9 +3436,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
-      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.1.tgz",
+      "integrity": "sha512-da4/1mBJwwgJkbj4fMH7SOXq2zapgTo0LKXX1VUZ0Dxr+e8N0WbS80nSZ5+zf3lvpf8qxrkZdqkOqFfm57gXwA==",
       "cpu": [
         "x64"
       ],
@@ -3452,9 +3451,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.1.tgz",
+      "integrity": "sha512-CPWs0HTFe5woTJN5eKPvgraUoRHrCtzlYIAv9wBC+FAyagBSaf+UdZrjwYyTGnwPGkThV4OCI7XibZOnPvONVw==",
       "cpu": [
         "x64"
       ],
@@ -3467,9 +3466,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.1.tgz",
+      "integrity": "sha512-xxhTm5QtzNLc24R0hEkcH+zCx/o49AsdFZ0Cy5zSd/5tOj4X2g3/2AJB625NoadUuc4A8B3TenLJoYdWYOYCew==",
       "cpu": [
         "x64"
       ],
@@ -3482,9 +3481,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
-      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.1.tgz",
+      "integrity": "sha512-CWibXszpWys1pYmbr9UiKAkX6x+Sxw8HWtw1dRESK1dLW5fFJ6rMDVw0o8MbadusvVQx1a8xuOxnHXT941Hp1A==",
       "cpu": [
         "x64"
       ],
@@ -3497,9 +3496,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
-      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.1.tgz",
+      "integrity": "sha512-jb5B4k+xkytGbGUS4T+Z89cQJ9DJ4lozGRSV+hhfmCPpfJ3880O31Q1srPCimm+V6UCbnigqD10EgDNgjvjerQ==",
       "cpu": [
         "arm64"
       ],
@@ -3512,9 +3511,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
-      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.1.tgz",
+      "integrity": "sha512-PgyFvjJhXqHn1uxPhyN1wZ6dIomKjiLUQh1LjFvjiV1JmnkZ/oMPrfeEAZg5R/1ftz4LZWZr02kefNIQ5SKREQ==",
       "cpu": [
         "ia32"
       ],
@@ -3527,9 +3526,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
-      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.1.tgz",
+      "integrity": "sha512-W9NttRZQR5ehAiqHGDnvfDaGmQOm6Fi4vSlce8mjM75x//XKuVAByohlEX6N17yZnVXxQFuh4fDRunP8ca6bfA==",
       "cpu": [
         "x64"
       ],
@@ -8029,9 +8028,9 @@
       "peer": true
     },
     "node_modules/cypress": {
-      "version": "13.8.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.8.0.tgz",
-      "integrity": "sha512-Qau//mtrwEGOU9cn2YjavECKyDUwBh8J2tit+y9s1wsv6C3BX+rlv6I9afmQnL8PmEEzJ6be7nppMHacFzZkTw==",
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.10.0.tgz",
+      "integrity": "sha512-tOhwRlurVOQbMduX+KonoMeQILs2cwR3yHGGENoFvvSoLUBHmJ8b9/n21gFSDqjlOJ+SRVcwuh+fG/JDsHsT6Q==",
       "hasInstallScript": true,
       "optional": true,
       "dependencies": {
@@ -9197,9 +9196,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.1.tgz",
+      "integrity": "sha512-GPqx+FX7mdqulCeQ4TsGZQ3djBJkx5k7zBGtqt9ycVlWNg8llJ4RO9n2vciu8BN2zAEs6lPbPl0asZsAh7oWzg==",
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -9208,29 +9207,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
+        "@esbuild/aix-ppc64": "0.21.1",
+        "@esbuild/android-arm": "0.21.1",
+        "@esbuild/android-arm64": "0.21.1",
+        "@esbuild/android-x64": "0.21.1",
+        "@esbuild/darwin-arm64": "0.21.1",
+        "@esbuild/darwin-x64": "0.21.1",
+        "@esbuild/freebsd-arm64": "0.21.1",
+        "@esbuild/freebsd-x64": "0.21.1",
+        "@esbuild/linux-arm": "0.21.1",
+        "@esbuild/linux-arm64": "0.21.1",
+        "@esbuild/linux-ia32": "0.21.1",
+        "@esbuild/linux-loong64": "0.21.1",
+        "@esbuild/linux-mips64el": "0.21.1",
+        "@esbuild/linux-ppc64": "0.21.1",
+        "@esbuild/linux-riscv64": "0.21.1",
+        "@esbuild/linux-s390x": "0.21.1",
+        "@esbuild/linux-x64": "0.21.1",
+        "@esbuild/netbsd-x64": "0.21.1",
+        "@esbuild/openbsd-x64": "0.21.1",
+        "@esbuild/sunos-x64": "0.21.1",
+        "@esbuild/win32-arm64": "0.21.1",
+        "@esbuild/win32-ia32": "0.21.1",
+        "@esbuild/win32-x64": "0.21.1"
       }
     },
     "node_modules/esbuild-wasm": {
@@ -13290,9 +13289,9 @@
       "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "node_modules/ngx-echarts": {
-      "version": "17.1.0",
-      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-17.1.0.tgz",
-      "integrity": "sha512-DSNF/aKmJSxJWb9UwPUgNtY8Ma9SmViDBRacvAwpakc/5mJerunxndDgoBQkYk5JFKAjXX6bp4ZWLRKL3/5AGA==",
+      "version": "17.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-17.2.0.tgz",
+      "integrity": "sha512-i3XDE9d53zmJH4bp8RQ/271oPlhBkczO1M3VtWk8nCXdxQq9qx8UckjWEQ7oV1AbSDLGK5sRiFu5EaY5hvdWPA==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -20563,141 +20562,141 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
     },
     "@esbuild/aix-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
-      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.1.tgz",
+      "integrity": "sha512-O7yppwipkXvnEPjzkSXJRk2g4bS8sUx9p9oXHq9MU/U7lxUzZVsnFZMDTmeeX9bfQxrFcvOacl/ENgOh0WP9pA==",
       "optional": true
     },
     "@esbuild/android-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
-      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.1.tgz",
+      "integrity": "sha512-hh3jKWikdnTtHCglDAeVO3Oyh8MaH8xZUaWMiCCvJ9/c3NtPqZq+CACOlGTxhddypXhl+8B45SeceYBfB/e8Ow==",
       "optional": true
     },
     "@esbuild/android-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
-      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.1.tgz",
+      "integrity": "sha512-jXhccq6es+onw7x8MxoFnm820mz7sGa9J14kLADclmiEUH4fyj+FjR6t0M93RgtlI/awHWhtF0Wgfhqgf9gDZA==",
       "optional": true
     },
     "@esbuild/android-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
-      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.1.tgz",
+      "integrity": "sha512-NPObtlBh4jQHE01gJeucqEhdoD/4ya2owSIS8lZYS58aR0x7oZo9lB2lVFxgTANSa5MGCBeoQtr+yA9oKCGPvA==",
       "optional": true
     },
     "@esbuild/darwin-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.1.tgz",
+      "integrity": "sha512-BLT7TDzqsVlQRmJfO/FirzKlzmDpBWwmCUlyggfzUwg1cAxVxeA4O6b1XkMInlxISdfPAOunV9zXjvh5x99Heg==",
       "optional": true
     },
     "@esbuild/darwin-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
-      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.1.tgz",
+      "integrity": "sha512-D3h3wBQmeS/vp93O4B+SWsXB8HvRDwMyhTNhBd8yMbh5wN/2pPWRW5o/hM3EKgk9bdKd9594lMGoTCTiglQGRQ==",
       "optional": true
     },
     "@esbuild/freebsd-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
-      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.1.tgz",
+      "integrity": "sha512-/uVdqqpNKXIxT6TyS/oSK4XE4xWOqp6fh4B5tgAwozkyWdylcX+W4YF2v6SKsL4wCQ5h1bnaSNjWPXG/2hp8AQ==",
       "optional": true
     },
     "@esbuild/freebsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
-      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.1.tgz",
+      "integrity": "sha512-paAkKN1n1jJitw+dAoR27TdCzxRl1FOEITx3h201R6NoXUojpMzgMLdkXVgCvaCSCqwYkeGLoe9UVNRDKSvQgw==",
       "optional": true
     },
     "@esbuild/linux-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
-      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.1.tgz",
+      "integrity": "sha512-tRHnxWJnvNnDpNVnsyDhr1DIQZUfCXlHSCDohbXFqmg9W4kKR7g8LmA3kzcwbuxbRMKeit8ladnCabU5f2traA==",
       "optional": true
     },
     "@esbuild/linux-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
-      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.1.tgz",
+      "integrity": "sha512-G65d08YoH00TL7Xg4LaL3gLV21bpoAhQ+r31NUu013YB7KK0fyXIt05VbsJtpqh/6wWxoLJZOvQHYnodRrnbUQ==",
       "optional": true
     },
     "@esbuild/linux-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
-      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.1.tgz",
+      "integrity": "sha512-tt/54LqNNAqCz++QhxoqB9+XqdsaZOtFD/srEhHYwBd3ZUOepmR1Eeot8bS+Q7BiEvy9vvKbtpHf+r6q8hF5UA==",
       "optional": true
     },
     "@esbuild/linux-loong64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
-      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.1.tgz",
+      "integrity": "sha512-MhNalK6r0nZD0q8VzUBPwheHzXPr9wronqmZrewLfP7ui9Fv1tdPmg6e7A8lmg0ziQCziSDHxh3cyRt4YMhGnQ==",
       "optional": true
     },
     "@esbuild/linux-mips64el": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
-      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.1.tgz",
+      "integrity": "sha512-YCKVY7Zen5rwZV+nZczOhFmHaeIxR4Zn3jcmNH53LbgF6IKRwmrMywqDrg4SiSNApEefkAbPSIzN39FC8VsxPg==",
       "optional": true
     },
     "@esbuild/linux-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
-      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.1.tgz",
+      "integrity": "sha512-bw7bcQ+270IOzDV4mcsKAnDtAFqKO0jVv3IgRSd8iM0ac3L8amvCrujRVt1ajBTJcpDaFhIX+lCNRKteoDSLig==",
       "optional": true
     },
     "@esbuild/linux-riscv64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
-      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.1.tgz",
+      "integrity": "sha512-ARmDRNkcOGOm1AqUBSwRVDfDeD9hGYRfkudP2QdoonBz1ucWVnfBPfy7H4JPI14eYtZruRSczJxyu7SRYDVOcg==",
       "optional": true
     },
     "@esbuild/linux-s390x": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
-      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.1.tgz",
+      "integrity": "sha512-o73TcUNMuoTZlhwFdsgr8SfQtmMV58sbgq6gQq9G1xUiYnHMTmJbwq65RzMx89l0iya69lR4bxBgtWiiOyDQZA==",
       "optional": true
     },
     "@esbuild/linux-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
-      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.1.tgz",
+      "integrity": "sha512-da4/1mBJwwgJkbj4fMH7SOXq2zapgTo0LKXX1VUZ0Dxr+e8N0WbS80nSZ5+zf3lvpf8qxrkZdqkOqFfm57gXwA==",
       "optional": true
     },
     "@esbuild/netbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.1.tgz",
+      "integrity": "sha512-CPWs0HTFe5woTJN5eKPvgraUoRHrCtzlYIAv9wBC+FAyagBSaf+UdZrjwYyTGnwPGkThV4OCI7XibZOnPvONVw==",
       "optional": true
     },
     "@esbuild/openbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.1.tgz",
+      "integrity": "sha512-xxhTm5QtzNLc24R0hEkcH+zCx/o49AsdFZ0Cy5zSd/5tOj4X2g3/2AJB625NoadUuc4A8B3TenLJoYdWYOYCew==",
       "optional": true
     },
     "@esbuild/sunos-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
-      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.1.tgz",
+      "integrity": "sha512-CWibXszpWys1pYmbr9UiKAkX6x+Sxw8HWtw1dRESK1dLW5fFJ6rMDVw0o8MbadusvVQx1a8xuOxnHXT941Hp1A==",
       "optional": true
     },
     "@esbuild/win32-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
-      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.1.tgz",
+      "integrity": "sha512-jb5B4k+xkytGbGUS4T+Z89cQJ9DJ4lozGRSV+hhfmCPpfJ3880O31Q1srPCimm+V6UCbnigqD10EgDNgjvjerQ==",
       "optional": true
     },
     "@esbuild/win32-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
-      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.1.tgz",
+      "integrity": "sha512-PgyFvjJhXqHn1uxPhyN1wZ6dIomKjiLUQh1LjFvjiV1JmnkZ/oMPrfeEAZg5R/1ftz4LZWZr02kefNIQ5SKREQ==",
       "optional": true
     },
     "@esbuild/win32-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
-      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.1.tgz",
+      "integrity": "sha512-W9NttRZQR5ehAiqHGDnvfDaGmQOm6Fi4vSlce8mjM75x//XKuVAByohlEX6N17yZnVXxQFuh4fDRunP8ca6bfA==",
       "optional": true
     },
     "@eslint-community/eslint-utils": {
@@ -24112,9 +24111,9 @@
       "peer": true
     },
     "cypress": {
-      "version": "13.8.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.8.0.tgz",
-      "integrity": "sha512-Qau//mtrwEGOU9cn2YjavECKyDUwBh8J2tit+y9s1wsv6C3BX+rlv6I9afmQnL8PmEEzJ6be7nppMHacFzZkTw==",
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.10.0.tgz",
+      "integrity": "sha512-tOhwRlurVOQbMduX+KonoMeQILs2cwR3yHGGENoFvvSoLUBHmJ8b9/n21gFSDqjlOJ+SRVcwuh+fG/JDsHsT6Q==",
       "optional": true,
       "requires": {
         "@cypress/request": "^3.0.0",
@@ -25032,33 +25031,33 @@
       }
     },
     "esbuild": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.1.tgz",
+      "integrity": "sha512-GPqx+FX7mdqulCeQ4TsGZQ3djBJkx5k7zBGtqt9ycVlWNg8llJ4RO9n2vciu8BN2zAEs6lPbPl0asZsAh7oWzg==",
       "requires": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
+        "@esbuild/aix-ppc64": "0.21.1",
+        "@esbuild/android-arm": "0.21.1",
+        "@esbuild/android-arm64": "0.21.1",
+        "@esbuild/android-x64": "0.21.1",
+        "@esbuild/darwin-arm64": "0.21.1",
+        "@esbuild/darwin-x64": "0.21.1",
+        "@esbuild/freebsd-arm64": "0.21.1",
+        "@esbuild/freebsd-x64": "0.21.1",
+        "@esbuild/linux-arm": "0.21.1",
+        "@esbuild/linux-arm64": "0.21.1",
+        "@esbuild/linux-ia32": "0.21.1",
+        "@esbuild/linux-loong64": "0.21.1",
+        "@esbuild/linux-mips64el": "0.21.1",
+        "@esbuild/linux-ppc64": "0.21.1",
+        "@esbuild/linux-riscv64": "0.21.1",
+        "@esbuild/linux-s390x": "0.21.1",
+        "@esbuild/linux-x64": "0.21.1",
+        "@esbuild/netbsd-x64": "0.21.1",
+        "@esbuild/openbsd-x64": "0.21.1",
+        "@esbuild/sunos-x64": "0.21.1",
+        "@esbuild/win32-arm64": "0.21.1",
+        "@esbuild/win32-ia32": "0.21.1",
+        "@esbuild/win32-x64": "0.21.1"
       }
     },
     "esbuild-wasm": {
@@ -28069,9 +28068,9 @@
       "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "ngx-echarts": {
-      "version": "17.1.0",
-      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-17.1.0.tgz",
-      "integrity": "sha512-DSNF/aKmJSxJWb9UwPUgNtY8Ma9SmViDBRacvAwpakc/5mJerunxndDgoBQkYk5JFKAjXX6bp4ZWLRKL3/5AGA==",
+      "version": "17.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-17.2.0.tgz",
+      "integrity": "sha512-i3XDE9d53zmJH4bp8RQ/271oPlhBkczO1M3VtWk8nCXdxQq9qx8UckjWEQ7oV1AbSDLGK5sRiFu5EaY5hvdWPA==",
       "requires": {
         "tslib": "^2.3.0"
       }

frontend/package.json

@@ -50,16 +50,16 @@
     "dev:ssr": "npm run generate-config && ng run mempool:serve-ssr",
     "serve:ssr": "npm run generate-config && node server.run.js",
     "build:ssr": "npm run build && ng run mempool:server:production && ./node_modules/typescript/bin/tsc server.run.ts",
-    "config:defaults:mempool": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=mempool BLOCK_WEIGHT_UNITS=4000000 && npm run generate-config",
-    "config:defaults:liquid": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=liquid BLOCK_WEIGHT_UNITS=300000 && npm run generate-config",
+    "config:defaults:mempool": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=mempool BLOCK_WEIGHT_UNITS=4000000 && npm run generate-config",
+    "config:defaults:liquid": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=liquid BLOCK_WEIGHT_UNITS=300000 && npm run generate-config",
     "prerender": "npm run ng -- run mempool:prerender",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "cypress:run:record": "cypress run --record",
-    "cypress:open:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:open",
-    "cypress:run:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:run:record",
-    "cypress:open:ci:staging": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:open",
-    "cypress:run:ci:staging": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:run:record"
+    "cypress:open:ci": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:open",
+    "cypress:run:ci": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:run:record",
+    "cypress:open:ci:staging": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:open",
+    "cypress:run:ci:staging": "node update-config.js TESTNET_ENABLED=true TESTNET4_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:run:record"
   },
   "dependencies": {
     "@angular-devkit/build-angular": "^17.3.1",
@@ -88,11 +88,11 @@
     "domino": "^2.1.6",
     "echarts": "~5.5.0",
     "lightweight-charts": "~3.8.0",
-    "ngx-echarts": "~17.1.0",
+    "ngx-echarts": "~17.2.0",
     "ngx-infinite-scroll": "^17.0.0",
     "qrcode": "1.5.1",
     "rxjs": "~7.8.1",
-    "esbuild": "^0.20.2",
+    "esbuild": "^0.21.1",
     "tinyify": "^4.0.0",
     "tlite": "^0.1.9",
     "tslib": "~2.6.0",
@@ -115,7 +115,7 @@
   "optionalDependencies": {
     "@cypress/schematic": "^2.5.0",
     "@types/cypress": "^1.1.3",
-    "cypress": "^13.8.0",
+    "cypress": "^13.10.0",
     "cypress-fail-on-console-error": "~5.1.0",
     "cypress-wait-until": "^2.0.1",
     "mock-socket": "~9.3.1",

frontend/proxy.conf.js

@@ -24,7 +24,7 @@ PROXY_CONFIG = [
         '/api/**', '!/api/v1/ws',
         '!/liquid', '!/liquid/**', '!/liquid/',
         '!/liquidtestnet', '!/liquidtestnet/**', '!/liquidtestnet/',
-        '/testnet/api/**', '/signet/api/**'
+        '/testnet/api/**', '/signet/api/**', '/testnet4/api/**'
         ],
         target: "https://mempool.space",
         ws: true,

frontend/src/app/app-routing.module.ts

@@ -53,6 +53,44 @@ let routes: Routes = [
       },
     ]
   },
+  {
+    path: 'testnet4',
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        data: { preload: true },
+      },
+      {
+        path: '',
+        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
+        data: { preload: true },
+      },
+      {
+        path: 'wallet',
+        children: [],
+        component: AddressGroupComponent,
+        data: {
+          networkSpecific: true,
+        }
+      },
+      {
+        path: 'status',
+        data: { networks: ['bitcoin', 'liquid'] },
+        component: StatusViewComponent
+      },
+      {
+        path: '',
+        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        data: { preload: true },
+      },
+      {
+        path: '**',
+        redirectTo: '/testnet4'
+      },
+    ]
+  },
   {
     path: 'signet',
     children: [
@@ -130,6 +168,10 @@ let routes: Routes = [
         path: 'testnet',
         loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
+      {
+        path: 'testnet4',
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
+      },
       {
         path: 'signet',
         loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)

frontend/src/app/app.constants.ts

@@ -189,22 +189,22 @@ export const specialBlocks = {
   '0': {
     labelEvent: 'Genesis',
     labelEventCompleted: 'The Genesis of Bitcoin',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '210000': {
     labelEvent: 'Bitcoin\'s 1st Halving',
     labelEventCompleted: 'Block Subsidy has halved to 25 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '420000': {
     labelEvent: 'Bitcoin\'s 2nd Halving',
     labelEventCompleted: 'Block Subsidy has halved to 12.5 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '630000': {
     labelEvent: 'Bitcoin\'s 3rd Halving',
     labelEventCompleted: 'Block Subsidy has halved to 6.25 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '709632': {
     labelEvent: 'Taproot 🌱 activation',
@@ -214,62 +214,62 @@ export const specialBlocks = {
   '840000': {
     labelEvent: 'Bitcoin\'s 4th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 3.125 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1050000': {
     labelEvent: 'Bitcoin\'s 5th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 1.5625 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1260000': {
     labelEvent: 'Bitcoin\'s 6th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.78125 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1470000': {
     labelEvent: 'Bitcoin\'s 7th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.390625 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1680000': {
     labelEvent: 'Bitcoin\'s 8th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.1953125 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '1890000': {
     labelEvent: 'Bitcoin\'s 9th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.09765625 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2100000': {
     labelEvent: 'Bitcoin\'s 10th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.04882812 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2310000': {
     labelEvent: 'Bitcoin\'s 11th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.02441406 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2520000': {
     labelEvent: 'Bitcoin\'s 12th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.01220703 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2730000': {
     labelEvent: 'Bitcoin\'s 13th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.00610351 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '2940000': {
     labelEvent: 'Bitcoin\'s 14th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.00305175 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   },
   '3150000': {
     labelEvent: 'Bitcoin\'s 15th Halving',
     labelEventCompleted: 'Block Subsidy has halved to 0.00152587 BTC per block',
-    networks: ['mainnet', 'testnet'],
+    networks: ['mainnet', 'testnet', 'testnet4'],
   }
 };
 

frontend/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { PriceService } from './services/price.service';
 import { EnterpriseService } from './services/enterprise.service';
 import { WebsocketService } from './services/websocket.service';
 import { AudioService } from './services/audio.service';
+import { PreloadService } from './services/preload.service';
 import { SeoService } from './services/seo.service';
 import { OpenGraphService } from './services/opengraph.service';
 import { ZoneService } from './services/zone-shim.service';
@@ -46,6 +47,7 @@ const providers = [
   CapAddressPipe,
   AppPreloadingStrategy,
   ServicesApiServices,
+  PreloadService,
   { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true },
   { provide: ZONE_SERVICE, useClass: ZoneService },
 ];

frontend/src/app/bitcoin.utils.ts

@@ -266,6 +266,11 @@ const featureActivation = {
     segwit: 872730,
     taproot: 2032291,
   },
+  testnet4: {
+    rbf: 0,
+    segwit: 0,
+    taproot: 0,
+  },
   signet: {
     rbf: 0,
     segwit: 0,

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

@@ -343,8 +343,8 @@
       <a href="https://opencrypto.org/" title="Coppa - Crypto Open Patent Alliance">
         <img class="copa" src="/resources/profile/copa.png" />
       </a>
-      <a href="https://bisq.network/" title="Bisq Network">
-        <img class="bisq" src="/resources/profile/bisq.svg" />
+      <a href="https://bitcoin.gob.sv" title="Oficina Nacional del Bitcoin">
+        <img class="sv" src="/resources/profile/onbtc-full.svg" />
       </a>
     </div>
   </div>

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

@@ -129,8 +129,9 @@
       position: relative;
       width: 300px;
     }
-    .bisq {
-      top: 3px;
+    .sv {
+      height: 85px;
+      width: auto;
       position: relative;
     }
   }

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

@@ -23,7 +23,7 @@
               <span class="font-weight-bold">Accelerate</span>
               <span style="color: rgb(186, 186, 186); font-size: 14px;">Confirmation expected within ~30 minutes<br>
                 @if (!calculating) {
-                  <app-fiat [value]="cost"></app-fiat>fee (<span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats|sats">sats</span></span>)
+                  <app-fiat [value]="cost"></app-fiat>fee (<span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span>)
                 } @else {
                   <span class="estimating">Calculating cost...</span>
                 }

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

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="daysAvailable">
-      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+      <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" formControlName="dateSpan"> 24H
         </label>
@@ -46,7 +46,7 @@
   </div>
 
   <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
   </div>
   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
     <div class="spinner-border text-light"></div>

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

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -64,8 +65,3 @@ h5 {
   font-size: 1rem;
   color: var(--title-fg);
 }
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
-import { combineLatest, BehaviorSubject, Observable, catchError, of, switchMap, tap } from 'rxjs';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Observable, catchError, of, switchMap, tap } from 'rxjs';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
@@ -11,7 +11,7 @@ import { ServicesApiServices } from '../../../services/services-api.service';
   styleUrls: ['./accelerations-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccelerationsListComponent implements OnInit {
+export class AccelerationsListComponent implements OnInit, OnDestroy {
   @Input() widget: boolean = false;
   @Input() pending: boolean = false;
   @Input() accelerations$: Observable<Acceleration[]>;
@@ -44,7 +44,10 @@ export class AccelerationsListComponent implements OnInit {
     
     this.accelerationList$ = this.pageSubject.pipe(
       switchMap((page) => {
-        const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistoryObserveResponse$({ page: page }));
+        const accelerationObservable$ = this.accelerations$ || (this.pending ? this.stateService.liveAccelerations$ : this.servicesApiService.getAccelerationHistoryObserveResponse$({ page: page }));
+        if (!this.accelerations$ && this.pending) {
+          this.websocketService.ensureTrackAccelerations();
+        }
         return accelerationObservable$.pipe(
           switchMap(response => {
             let accelerations = response;
@@ -85,4 +88,8 @@ export class AccelerationsListComponent implements OnInit {
   trackByBlock(index: number, block: BlockExtended): number {
     return block.height;
   }
+
+  ngOnDestroy(): void {
+    this.websocketService.stopTrackAccelerations();
+  }
 }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss

@@ -60,7 +60,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, HostListener, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { OpenGraphService } from '../../../services/opengraph.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
-import { Observable, catchError, combineLatest, distinctUntilChanged, interval, map, of, share, startWith, switchMap, tap } from 'rxjs';
+import { Observable, Subscription, catchError, combineLatest, distinctUntilChanged, map, of, share, switchMap, tap } from 'rxjs';
 import { Color } from '../../block-overview-graph/sprite-types';
 import { hexToColor } from '../../block-overview-graph/utils';
 import TxView from '../../block-overview-graph/tx-view';
@@ -28,7 +28,7 @@ interface AccelerationBlock extends BlockExtended {
   styleUrls: ['./accelerator-dashboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AcceleratorDashboardComponent implements OnInit {
+export class AcceleratorDashboardComponent implements OnInit, OnDestroy {
   blocks$: Observable<AccelerationBlock[]>;
   accelerations$: Observable<Acceleration[]>;
   pendingAccelerations$: Observable<Acceleration[]>;
@@ -39,6 +39,8 @@ export class AcceleratorDashboardComponent implements OnInit {
   firstLoad = true;
   timespan: '3d' | '1w' | '1m' = '1w';
 
+  accelerationDeltaSubscription: Subscription;
+
   graphHeight: number = 300;
   theme: ThemeService;
 
@@ -59,27 +61,28 @@ export class AcceleratorDashboardComponent implements OnInit {
   ngOnInit(): void {
     this.onResize();
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
+    this.websocketService.startTrackAccelerations();
 
-    this.pendingAccelerations$ = (this.stateService.isBrowser ? interval(30000) : of(null)).pipe(
-      startWith(true),
-      switchMap(() => {
-        return this.serviceApiServices.getAccelerations$().pipe(
-          catchError(() => {
-            return of([]);
-          }),
-        );
-      }),
-      tap(accelerations => {
-        if (!this.firstLoad && accelerations.some(acc => !this.seen.has(acc.txid))) {
-          this.audioService.playSound('bright-harmony');
-        }
-        for(const acc of accelerations) {
-          this.seen.add(acc.txid);
-        }
-        this.firstLoad = false;
-      }),
+    this.pendingAccelerations$ = this.stateService.liveAccelerations$.pipe(
       share(),
     );
+    this.accelerationDeltaSubscription = this.stateService.accelerations$.subscribe((delta) => {
+      if (!delta.reset) {
+        let hasNewAcceleration = false;
+        for (const acc of delta.added) {
+          if (!this.seen.has(acc.txid)) {
+            hasNewAcceleration = true;
+          }
+          this.seen.add(acc.txid);
+        }
+        for (const txid of delta.removed) {
+          this.seen.delete(txid);
+        }
+        if (hasNewAcceleration) {
+          this.audioService.playSound('bright-harmony');
+        }
+      }
+    });
 
     this.accelerations$ = this.stateService.chainTip$.pipe(
       distinctUntilChanged(),
@@ -145,7 +148,7 @@ export class AcceleratorDashboardComponent implements OnInit {
     } else {
       const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
       const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-      return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
+      return this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
     }
   }
 
@@ -154,6 +157,11 @@ export class AcceleratorDashboardComponent implements OnInit {
     return false;
   }
 
+  ngOnDestroy(): void {
+    this.accelerationDeltaSubscription.unsubscribe();
+    this.websocketService.stopTrackAccelerations();
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {

frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts

@@ -2,7 +2,8 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { Observable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { Acceleration } from '../../../interfaces/node-api.interface';
-import { ServicesApiServices } from '../../../services/services-api.service';
+import { StateService } from '../../../services/state.service';
+import { WebsocketService } from '../../../services/websocket.service';
 
 @Component({
   selector: 'app-pending-stats',
@@ -15,11 +16,12 @@ export class PendingStatsComponent implements OnInit {
   public accelerationStats$: Observable<any>;
 
   constructor(
-    private servicesApiService: ServicesApiServices,
+    private stateService: StateService,
+    private websocketService: WebsocketService,
   ) { }
 
   ngOnInit(): void {
-    this.accelerationStats$ = (this.accelerations$ || this.servicesApiService.getAccelerations$()).pipe(
+    this.accelerationStats$ = (this.accelerations$ || this.stateService.liveAccelerations$).pipe(
       switchMap(accelerations => {
         let totalAccelerations = 0;
         let totalFeeDelta = 0;

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

@@ -1,14 +1,8 @@
-<app-indexing-progress></app-indexing-progress>
-
-<div class="full-container">
-  <div class="card-header mb-0 mb-md-2">
-    <div class="d-flex d-md-block align-items-baseline">
-      <span i18n="address.balance-history">Balance History</span>
-    </div>  
-    </div>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
+<div [class.full-container]="!widget">
   <ng-container *ngIf="!error">
-    <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
       (chartInit)="onChartInit($event)">
     </div>
     <div class="text-center loadingGraphs" *ngIf="isLoading">
@@ -20,4 +14,8 @@
       <p class="error">{{ error }}</p>
     </div>
   </ng-container>
+
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
 </div>

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

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -45,28 +46,12 @@
   display: flex;
   flex: 1;
   width: 100%;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
   padding-right: 10px;
-  @media (max-width: 992px) {
-    padding-bottom: 25px;
-  }
-  @media (max-width: 829px) {
-    padding-bottom: 50px;
-  }
-  @media (max-width: 767px) {
-    padding-bottom: 25px;
-  }
-  @media (max-width: 629px) {
-    padding-bottom: 55px;
-  }
-  @media (max-width: 567px) {
-    padding-bottom: 55px;
-  }
 }
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 270px;
 }
 
 .disabled {

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

@@ -1,12 +1,22 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { echarts, EChartsOption } from '../../graphs/echarts';
-import { of } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription, combineLatest, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { ChainStats } from '../../interfaces/electrs.interface';
+import { AddressTxSummary, ChainStats } from '../../interfaces/electrs.interface';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
 import { Router } from '@angular/router';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '../../services/state.service';
+
+const periodSeconds = {
+  '1d': (60 * 60 * 24),
+  '3d': (60 * 60 * 24 * 3),
+  '1w': (60 * 60 * 24 * 7),
+  '1m': (60 * 60 * 24 * 30),
+  '6m': (60 * 60 * 24 * 180),
+  '1y': (60 * 60 * 24 * 365),
+};
 
 @Component({
   selector: 'app-address-graph',
@@ -22,16 +32,23 @@ import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pi
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddressGraphComponent implements OnChanges {
+export class AddressGraphComponent implements OnChanges, OnDestroy {
   @Input() address: string;
   @Input() isPubkey: boolean = false;
   @Input() stats: ChainStats;
+  @Input() addressSummary$: Observable<AddressTxSummary[]> | null;
+  @Input() period: '1d' | '3d' | '1w' | '1m' | '6m' | '1y' | 'all' = 'all';
+  @Input() height: number = 200;
   @Input() right: number | string = 10;
   @Input() left: number | string = 70;
+  @Input() widget: boolean = false;
 
   data: any[] = [];
   hoverData: any[] = [];
 
+  subscription: Subscription;
+  redraw$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
   chartOptions: EChartsOption = {};
   chartInitOptions = {
     renderer: 'svg',
@@ -43,6 +60,7 @@ export class AddressGraphComponent implements OnChanges {
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
+    public stateService: StateService,
     private electrsApiService: ElectrsApiService,
     private router: Router,
     private amountShortenerPipe: AmountShortenerPipe,
@@ -52,32 +70,59 @@ export class AddressGraphComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     this.isLoading = true;
-    (this.isPubkey
-      ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
-      : this.electrsApiService.getAddressSummary$(this.address)).pipe(
-      catchError(e => {
-        this.error = `Failed to fetch address balance history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
-        return of(null);
-      }),
-    ).subscribe(addressSummary => {
-      if (addressSummary) {
-        this.error = null;
-        this.prepareChartOptions(addressSummary);
+    if (!this.address || !this.stats) {
+      return;
+    }
+    if (changes.address || changes.isPubkey || changes.addressSummary$ || changes.stats) {
+      if (this.subscription) {
+        this.subscription.unsubscribe();
       }
-      this.isLoading = false;
-      this.cd.markForCheck();
-    });
+      this.subscription = combineLatest([
+        this.redraw$,
+        (this.addressSummary$ || (this.isPubkey
+          ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
+          : this.electrsApiService.getAddressSummary$(this.address)).pipe(
+          catchError(e => {
+            this.error = `Failed to fetch address balance history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
+            return of(null);
+          }),
+        ))
+      ]).subscribe(([redraw, addressSummary]) => {
+        if (addressSummary) {
+          this.error = null;
+          this.prepareChartOptions(addressSummary);
+        }
+        this.isLoading = false;
+        this.cd.markForCheck();
+      });
+    } else {
+      // re-trigger subscription
+      this.redraw$.next(true);
+    }
   }
 
   prepareChartOptions(summary): void {
-    let total = (this.stats.funded_txo_sum - this.stats.spent_txo_sum); // + (summary[0]?.value || 0);
+    if (!summary || !this.stats) {
+      return;
+    }
+    let total = (this.stats.funded_txo_sum - this.stats.spent_txo_sum);
     this.data = summary.map(d => {
       const balance = total;
       total -= d.value;
       return [d.time * 1000, balance, d];
     }).reverse();
 
-    const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1])), 0);
+    if (this.period !== 'all') {
+      const now = Date.now();
+      const start = now - (periodSeconds[this.period] * 1000);
+      this.data = this.data.filter(d => d[0] >= start);
+      this.data.push(
+        {value: [now, this.stats.funded_txo_sum - this.stats.spent_txo_sum], symbol: 'none', tooltip: { show: false }}
+      );
+    }
+
+    const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1] ?? d.value[1])), 0);
+    const minValue = this.data.reduce((acc, d) => Math.min(acc, Math.abs(d[1] ?? d.value[1])), maxValue);
 
     this.chartOptions = {
       color: [
@@ -108,6 +153,9 @@ export class AddressGraphComponent implements OnChanges {
         },
         borderColor: '#000',
         formatter: function (data): string {
+          if (!data?.length || !data[0]?.data?.[2]?.txid) {
+            return '';
+          }
           const header = data.length === 1
             ? `${data[0].data[2].txid.slice(0, 6)}...${data[0].data[2].txid.slice(-6)}`
             : `${data.length} transactions`;
@@ -141,13 +189,17 @@ export class AddressGraphComponent implements OnChanges {
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val): string => {
-              if (maxValue > 1_000_000_000) {
+              let valSpan = maxValue - (this.period === 'all' ? 0 : minValue);
+              if (valSpan > 100_000_000_000) {
                 return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0)} BTC`;
-              } else if (maxValue > 100_000_000) {
+              }
+              else if (valSpan > 1_000_000_000) {
+                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2)} BTC`;
+              } else if (valSpan > 100_000_000) {
                 return `${(val / 100_000_000).toFixed(1)} BTC`;
-              } else if (maxValue > 10_000_000) {
+              } else if (valSpan > 10_000_000) {
                 return `${(val / 100_000_000).toFixed(2)} BTC`;
-              } else if (maxValue > 1_000_000) {
+              } else if (valSpan > 1_000_000) {
                 return `${(val / 100_000_000).toFixed(3)} BTC`;
               } else {
                 return `${this.amountShortenerPipe.transform(val, 0)} sats`;
@@ -157,6 +209,7 @@ export class AddressGraphComponent implements OnChanges {
           splitLine: {
             show: false,
           },
+          min: this.period === 'all' ? 0 : 'dataMin'
         },
       ],
       series: [
@@ -194,6 +247,12 @@ export class AddressGraphComponent implements OnChanges {
     this.chartInstance.on('click', 'series', this.onChartClick.bind(this));
   }
 
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
   isMobile() {
     return (window.innerWidth <= 767.98);
   }

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.html

@@ -0,0 +1,32 @@
+<table class="table latest-transactions">
+  <thead>
+    <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
+    <th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
+    <th class="table-cell-fiat">{{ currency }}</th>
+    <th class="table-cell-date" i18n="shared.date">Date</th>
+  </thead>
+  <tbody *ngIf="transactions$ | async as transactions else recentTransactionsSkeleton">
+    <tr *ngFor="let transaction of transactions; let i = index;">
+      <td class="table-cell-txid">
+        <a [routerLink]="['/tx' | relativeUrl, transaction.txid]">
+          <app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
+        </a>
+      </td>
+      <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount></td>
+      <td class="table-cell-fiat" ><app-fiat [value]="transaction.value" [blockConversion]="transaction.price" digitsInfo="1.0-0"></app-fiat></td>
+      <td class="table-cell-date"><app-time kind="since" [time]="transaction.time" [fastRender]="true"></app-time></td>
+    </tr>
+  </tbody>
+  <div class="">&nbsp;</div>
+</table>
+
+<ng-template #recentTransactionsSkeleton>
+  <tbody>
+    <tr *ngFor="let i of [1,2,3,4,5,6]">
+      <td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
+      <td class="table-cell-satoshis"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-fiat"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-fees"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+    </tr>
+  </tbody>
+</ng-template>

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.scss

@@ -0,0 +1,50 @@
+.latest-transactions {
+  width: 100%;
+  text-align: left;
+  table-layout:fixed;
+  tr, td, th {
+    border: 0px;
+    padding-top: 0.71rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+  td {
+    overflow:hidden;
+    width: 25%;
+  }
+  .table-cell-satoshis {
+    display: none;
+    text-align: right;
+    @media (min-width: 576px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 1100px) {
+      display: table-cell;
+    }
+  }
+  .table-cell-fiat {
+    display: none;
+    text-align: right;
+    @media (min-width: 485px) {
+      display: table-cell;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+    @media (min-width: 992px) {
+      display: table-cell;
+    }
+  }
+  .table-cell-date {
+    text-align: right;
+  }
+}
+.skeleton-loader-transactions {
+  max-width: 250px;
+  position: relative;
+  top: 2px;
+  margin-bottom: -3px;
+  height: 18px;
+}

frontend/src/app/components/address-transactions-widget/address-transactions-widget.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { Address, AddressTxSummary } from '../../interfaces/electrs.interface';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { Observable, Subscription, catchError, map, of, switchMap, zip } from 'rxjs';
+import { PriceService } from '../../services/price.service';
+
+@Component({
+  selector: 'app-address-transactions-widget',
+  templateUrl: './address-transactions-widget.component.html',
+  styleUrls: ['./address-transactions-widget.component.scss'],
+})
+export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() address: string;
+  @Input() addressInfo: Address;
+  @Input() addressSummary$: Observable<AddressTxSummary[]> | null;
+  @Input() isPubkey: boolean = false;
+  
+  currencySubscription: Subscription;
+  currency: string;
+
+  transactions$: Observable<any[]>;
+
+  isLoading: boolean = true;
+  error: any;
+
+  constructor(
+    public stateService: StateService,
+    private electrsApiService: ElectrsApiService,
+    private priceService: PriceService,
+  ) { }
+
+  ngOnInit(): void {
+    this.currencySubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
+      this.currency = fiat;
+    });
+    this.startAddressSubscription();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.startAddressSubscription();
+  }
+
+  startAddressSubscription(): void {
+    this.isLoading = true;
+    if (!this.address || !this.addressInfo) {
+      return;
+    }
+    this.transactions$ = (this.addressSummary$ || (this.isPubkey
+      ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
+      : this.electrsApiService.getAddressSummary$(this.address)).pipe(
+      catchError(e => {
+        this.error = `Failed to fetch address history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
+        return of(null);
+      })
+    )).pipe(
+      map(summary => {
+        return summary?.slice(0, 6);
+      }),
+      switchMap(txs => {
+        return (zip(txs.map(tx => this.priceService.getBlockPrice$(tx.time, true, this.currency).pipe(
+          map(price => {
+            return {
+              ...tx,
+              price,
+            };
+          })
+        ))));
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.currencySubscription.unsubscribe();
+  }
+}

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

@@ -3,7 +3,7 @@
 }
 
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;

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

@@ -53,10 +53,20 @@
 
     <ng-container *ngIf="(stateService.backend$ | async) === 'esplora' && address && transactions && transactions.length > 2">
       <br>
+      <div class="title-tx">
+        <h2 class="text-left" i18n="address.balance-history">Balance History</h2>
+      </div>
       <div class="box">
+        <div class="widget-toggler" *ngIf="showBalancePeriod()">
+          <a href="" (click)="setBalancePeriod('all')" class="toggler-option"
+            [ngClass]="{'inactive': balancePeriod === 'all'}"><small i18n="all">all</small></a>
+          <span style="color: var(--transparent-fg); font-size: 8px"> | </span>
+          <a href="" (click)="setBalancePeriod('1m')" class="toggler-option"
+            [ngClass]="{'inactive': balancePeriod === '1m'}"><small i18n="recent">recent</small></a>
+        </div>
         <div class="row">
           <div class="col-md">
-            <app-address-graph [address]="addressString" [isPubkey]="address?.is_pubkey" [stats]="address.chain_stats" />
+            <app-address-graph [address]="addressString" [isPubkey]="address?.is_pubkey" [stats]="address.chain_stats" [period]="balancePeriod" />
           </div>
         </div>
       </div>

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

@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;
@@ -109,3 +109,19 @@ h1 {
     flex-grow: 0.5;
   }
 }
+
+.widget-toggler {
+  font-size: 12px;
+  position: absolute;
+  top: -20px;
+  right: 3px;
+  text-align: right;
+}
+
+.toggler-option {
+  text-decoration: none;
+}
+
+.inactive {
+  color: var(--transparent-fg);
+}

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

@@ -38,6 +38,8 @@ export class AddressComponent implements OnInit, OnDestroy {
   txCount = 0;
   received = 0;
   sent = 0;
+  now = Date.now() / 1000;
+  balancePeriod: 'all' | '1m' = 'all';
 
   private tempTransactions: Transaction[];
   private timeTxIndexes: number[];
@@ -173,7 +175,14 @@ export class AddressComponent implements OnInit, OnDestroy {
         });
 
         this.transactions = this.tempTransactions;
+        if (this.transactions.length === this.txCount) {
+          this.fullyLoaded = true;
+        }
         this.isLoadingTransactions = false;
+
+        if (!this.showBalancePeriod()) {
+          this.setBalancePeriod('all');
+        }
       },
       (error) => {
         console.log(error);
@@ -296,6 +305,18 @@ export class AddressComponent implements OnInit, OnDestroy {
     this.txCount = this.address.chain_stats.tx_count + this.address.mempool_stats.tx_count;
   }
 
+  setBalancePeriod(period: 'all' | '1m'): boolean {
+    this.balancePeriod = period;
+    return false;
+  }
+
+  showBalancePeriod(): boolean {
+    return this.transactions?.length && (
+      !this.transactions[0].status?.confirmed
+      || this.transactions[0].status.block_time > (this.now - (60 * 60 * 24 * 30))
+    );
+  }
+
   ngOnDestroy() {
     this.mainSubscription.unsubscribe();
     this.mempoolTxSubscription.unsubscribe();

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

@@ -1,4 +1,4 @@
-<ng-container *ngIf="!noFiat && (viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin">
+<ng-container *ngIf="!noFiat && (viewAmountMode$ | async) === 'fiat' && (conversions$ | async) as conversions; else viewFiatVin">
   <span class="fiat" *ngIf="blockConversion; else noblockconversion">
     {{ addPlus && satoshis >= 0 ? '+' : '' }}{{
       (
@@ -20,10 +20,29 @@
   <ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
     <span i18n="shared.confidential">Confidential</span>
   </ng-template>
-  <ng-template #default>&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
-    <span class="symbol"><ng-template [ngIf]="network === 'liquid' && !forceBtc">L-</ng-template>
-    <ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
-    <ng-template [ngIf]="network === 'testnet'">t</ng-template>
-    <ng-template [ngIf]="network === 'signet'">s</ng-template>BTC</span>
+  <ng-template #default>
+    @if ((viewAmountMode$ | async) === 'btc' || (viewAmountMode$ | async) === 'fiat') {
+      &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
+      <span class="symbol">
+        <ng-container *ngTemplateOutlet="prefix"></ng-container>BTC
+      </span>
+    } @else {
+      @if (digitsInfo === '1.8-8') {
+        &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | number }}
+      } @else { 
+        &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | amountShortener : satoshis < 1000 && satoshis > -1000 ? 0 : 1 }}
+      }
+      <span class="symbol">
+        <ng-container *ngTemplateOutlet="prefix"></ng-container>sats
+      </span>
+    }
   </ng-template>
 </ng-template>
+
+<ng-template #prefix>
+  <ng-template [ngIf]="network === 'liquid' && !forceBtc">L-</ng-template>
+  <ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
+  <ng-template [ngIf]="network === 'testnet'">t</ng-template>
+  <ng-template [ngIf]="network === 'testnet4'">t</ng-template>
+  <ng-template [ngIf]="network === 'signet'">s</ng-template>
+</ng-template>

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

@@ -12,7 +12,7 @@ import { Price } from '../../services/price.service';
 export class AmountComponent implements OnInit, OnDestroy {
   conversions$: Observable<any>;
   currency: string;
-  viewFiat$: Observable<boolean>;
+  viewAmountMode$: Observable<'btc' | 'sats' | 'fiat'>;
   network = '';
 
   stateSubscription: Subscription;
@@ -37,7 +37,7 @@ export class AmountComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.viewFiat$ = this.stateService.viewFiat$.asObservable();
+    this.viewAmountMode$ = this.stateService.viewAmountMode$.asObservable();
     this.conversions$ = this.stateService.conversions$.asObservable();
     this.stateSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
   }

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

@@ -4,6 +4,8 @@ import { Router, NavigationEnd } from '@angular/router';
 import { StateService } from '../../services/state.service';
 import { OpenGraphService } from '../../services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
+import { ThemeService } from '../../services/theme.service';
+import { SeoService } from '../../services/seo.service';
 
 @Component({
   selector: 'app-root',
@@ -12,12 +14,12 @@ import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
   providers: [NgbTooltipConfig]
 })
 export class AppComponent implements OnInit {
-  link: HTMLElement = document.getElementById('canonical');
-
   constructor(
     public router: Router,
     private stateService: StateService,
     private openGraphService: OpenGraphService,
+    private seoService: SeoService,
+    private themeService: ThemeService,
     private location: Location,
     tooltipConfig: NgbTooltipConfig,
     @Inject(LOCALE_ID) private locale: string,
@@ -52,11 +54,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.router.events.subscribe((val) => {
       if (val instanceof NavigationEnd) {
-        let domain = 'mempool.space';
-        if (this.stateService.env.BASE_MODULE === 'liquid') {
-          domain = 'liquid.network';
-        }
-        this.link.setAttribute('href', 'https://' + domain + this.location.path());
+        this.seoService.updateCanonical(this.location.path());
       }
     });
   }

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

@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;

frontend/src/app/components/balance-widget/balance-widget.component.html

@@ -0,0 +1,59 @@
+<div class="card">
+  <div class="card-body more-padding">
+    <div class="balance-container" *ngIf="!isLoading; else loading">
+      <div class="item">
+        <h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5>
+        <div class="card-text">
+          {{ ((addressInfo.chain_stats.funded_txo_sum - addressInfo.chain_stats.spent_txo_sum) / 100_000_000) | number: '1.2-2' }} <span class="symbol" i18n="shared.btc|BTC">BTC</span>
+        </div>
+        <div class="symbol">
+          <app-fiat [value]="(addressInfo.chain_stats.funded_txo_sum - addressInfo.chain_stats.spent_txo_sum)"></app-fiat>
+        </div>
+      </div>
+      <div class="item">
+        <h5 class="card-title" i18n="dashboard.7d-change">Change (7d)</h5>
+        <div class="card-text">
+          {{ delta7d > 0 ? '+' : ''}}{{ ((delta7d) / 100_000_000) | number: '1.2-2' }} <span class="symbol" i18n="shared.btc|BTC">BTC</span>
+        </div>
+        <div class="symbol">
+          <app-fiat [value]="delta7d"></app-fiat>
+        </div>
+      </div>
+      <div class="item">
+        <h5 class="card-title" i18n="dashboard.30d-change">Change (30d)</h5>
+        <div class="card-text">
+          {{ delta30d > 0 ? '+' : ''}}{{ ((delta30d) / 100_000_000) | number: '1.2-2' }} <span class="symbol" i18n="shared.btc|BTC">BTC</span>
+        </div>
+        <div class="symbol">
+          <app-fiat [value]="delta30d"></app-fiat>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #loading>
+  <div class="balance-skeleton">
+    <div class="item">
+      <h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="dashboard.7d-change">Change (7d)</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="dashboard.30d-change">Change (30d)</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>

frontend/src/app/components/balance-widget/balance-widget.component.scss

@@ -0,0 +1,160 @@
+.balance-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 76px;
+  .shared-block {
+    color: var(--transparent-fg);
+    font-size: 12px;
+  }
+  .item {
+    padding: 0 5px;
+    width: 100%;
+    max-width: 150px;
+    &:last-child {
+      display: none;
+      @media (min-width: 485px) {
+        display: table-cell;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: table-cell;
+      }
+    }
+  }
+  .card-text {
+    font-size: 22px;
+    margin-top: -9px;
+    position: relative;
+  }
+}
+
+
+.balance-skeleton {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }
+  .item {
+    min-width: 120px;
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }
+    &:last-child{
+      display: none;
+      @media (min-width: 485px) {
+        display: block;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: block;
+      }
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .card-text {
+    .skeleton-loader {
+      width: 100%;
+      display: block;
+      &:first-child {
+        margin: 14px auto 0;
+        max-width: 80px;
+      }
+      &:last-child {
+        margin: 10px auto 0;
+        max-width: 120px;
+      }
+    }
+  }
+}
+
+.card {
+  background-color: var(--bg);
+  height: 126px;
+}
+
+.card-title {
+  color: var(--title-fg);
+  font-size: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.progress {
+  display: inline-flex;
+  width: 100%;
+  background-color: var(--secondary);
+  height: 1.1rem;
+  max-width: 180px;
+}
+
+.skeleton-loader {
+  max-width: 100%;
+}
+
+.more-padding {
+  padding: 24px 20px;
+}
+
+.small-bar {
+  height: 8px;
+  top: -4px;
+  max-width: 120px;
+}
+
+.loading-container {
+  min-height: 76px;
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 24px 20px;
+  }
+}
+
+.retarget-sign {
+  margin-right: -3px;
+  font-size: 14px;
+  top: -2px;
+  position: relative;
+}
+
+.previous-retarget-sign {
+  margin-right: -2px;
+  font-size: 10px;
+}
+
+.symbol {
+  font-size: 13px;
+  white-space: nowrap;
+}

frontend/src/app/components/balance-widget/balance-widget.component.ts

@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { Address, AddressTxSummary } from '../../interfaces/electrs.interface';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { Observable, catchError, of } from 'rxjs';
+
+@Component({
+  selector: 'app-balance-widget',
+  templateUrl: './balance-widget.component.html',
+  styleUrls: ['./balance-widget.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BalanceWidgetComponent implements OnInit, OnChanges {
+  @Input() address: string;
+  @Input() addressInfo: Address;
+  @Input() addressSummary$: Observable<AddressTxSummary[]> | null;
+  @Input() isPubkey: boolean = false;
+
+  isLoading: boolean = true;
+  error: any;
+
+  delta7d: number = 0;
+  delta30d: number = 0;
+
+  constructor(
+    public stateService: StateService,
+    private electrsApiService: ElectrsApiService,
+    private cd: ChangeDetectorRef,
+  ) { }
+
+  ngOnInit(): void {
+    
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.isLoading = true;
+    if (!this.address || !this.addressInfo) {
+      return;
+    }
+    (this.addressSummary$ || (this.isPubkey
+      ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
+      : this.electrsApiService.getAddressSummary$(this.address)).pipe(
+      catchError(e => {
+        this.error = `Failed to fetch address balance history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
+        return of(null);
+      }),
+    )).subscribe(addressSummary => {
+      if (addressSummary) {
+        this.error = null;
+        this.calculateStats(addressSummary);
+      }
+      this.isLoading = false;
+      this.cd.markForCheck();
+    });
+  }
+
+  calculateStats(summary: AddressTxSummary[]): void {
+    let weekTotal = 0;
+    let monthTotal = 0;
+
+    const weekAgo = (new Date(new Date().setHours(0, 0, 0, 0) - (7 * 24 * 60 * 60 * 1000)).getTime()) / 1000;
+    const monthAgo = (new Date(new Date().setHours(0, 0, 0, 0) - (30 * 24 * 60 * 60 * 1000)).getTime()) / 1000;
+    for (let i = 0; i < summary.length && summary[i].time >= monthAgo; i++) {
+      monthTotal += summary[i].value;
+      if (summary[i].time >= weekAgo) {
+        weekTotal += summary[i].value;
+      }
+    }
+    this.delta7d = weekTotal;
+    this.delta30d = monthTotal;
+  }
+}

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

@@ -10,7 +10,7 @@
     </div>
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+      <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>
@@ -63,7 +63,7 @@
   </div>
 
   <div [class.chart]="!widget" [class.chart-widget]="widget" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
   </div>
   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
     <div class="spinner-border text-light"></div>

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

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -138,8 +139,3 @@
   max-width: 80px;
   margin: 15px auto 3px;
 }
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}

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

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+      <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
           <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]" formControlName="dateSpan"> 1M
         </label>
@@ -37,7 +37,7 @@
   </div>
 
   <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
   </div>
   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
     <div class="spinner-border text-light"></div>

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

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -59,8 +60,3 @@
   height: 100%;
   max-height: 270px;
 }
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}

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

@@ -0,0 +1,55 @@
+<app-indexing-progress></app-indexing-progress>
+
+<div class="full-container">
+  <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-fees-subsidy-subsidy">Block Fees Vs Subsidy</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
+    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
+      <div class="btn-group btn-group-toggle" name="radioBasic">
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
+          <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 24h
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 432" [class.active]="radioGroupForm.get('dateSpan').value === '3d'">
+          <input type="radio" [value]="'3d'" fragment="3d" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3D
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 1008" [class.active]="radioGroupForm.get('dateSpan').value === '1w'">
+          <input type="radio" [value]="'1w'" fragment="1w" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1W
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
+          <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1M
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 12960" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
+          <input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3M
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 25920" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
+          <input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 6M
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 52560" [class.active]="radioGroupForm.get('dateSpan').value === '1y'">
+          <input type="radio" [value]="'1y'" fragment="1y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1Y
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 105120" [class.active]="radioGroupForm.get('dateSpan').value === '2y'">
+          <input type="radio" [value]="'2y'" fragment="2y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 2Y
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 157680" [class.active]="radioGroupForm.get('dateSpan').value === '3y'">
+          <input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3Y
+        </label>
+        <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
+          <input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> ALL
+        </label>
+      </div>
+    </form>
+  </div>
+
+  <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" [style]="{opacity: isLoading ? 0.5 : 1}"
+    (chartInit)="onChartInit($event)">
+  </div>
+  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+
+</div>

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

@@ -0,0 +1,61 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.full-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 15px;
+  width: 100%;
+  height: calc(100vh - 225px);
+  min-height: 400px;
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
+}
+
+.chart {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  padding-bottom: 20px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 55px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 55px;
+  }
+}
+.chart-widget {
+  width: 100%;
+  height: 100%;
+  max-height: 270px;
+}

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

@@ -0,0 +1,509 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
+import { EChartsOption } from '../../graphs/echarts';
+import { Observable } from 'rxjs';
+import { catchError, map, share, startWith, switchMap, tap } from 'rxjs/operators';
+import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
+import { formatNumber } from '@angular/common';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
+import { StateService } from '../../services/state.service';
+import { MiningService } from '../../services/mining.service';
+import { StorageService } from '../../services/storage.service';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+
+@Component({
+  selector: 'app-block-fees-subsidy-graph',
+  templateUrl: './block-fees-subsidy-graph.component.html',
+  styleUrls: ['./block-fees-subsidy-graph.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockFeesSubsidyGraphComponent implements OnInit {
+  @Input() right: number | string = 45;
+  @Input() left: number | string = 75;
+
+  miningWindowPreference: string;
+  radioGroupForm: UntypedFormGroup;
+
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  statsObservable$: Observable<any>;
+  data: any;
+  subsidies: { [key: number]: number } = {};
+  isLoading = true;
+  formatNumber = formatNumber;
+  timespan = '';
+  chartInstance: any = undefined;
+  showFiat = false;
+  updateZoom = false;
+  zoomSpan = 100;
+  zoomTimeSpan = '';
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private seoService: SeoService,
+    private apiService: ApiService,
+    private formBuilder: UntypedFormBuilder,
+    public stateService: StateService,
+    private storageService: StorageService,
+    private miningService: MiningService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private zone: NgZone,
+    private fiatShortenerPipe: FiatShortenerPipe,
+    private fiatCurrencyPipe: FiatCurrencyPipe,
+    private cd: ChangeDetectorRef,
+  ) {
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
+    this.radioGroupForm.controls.dateSpan.setValue('1y');
+
+    this.subsidies = this.initSubsidies();
+  }
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`:@@mining.block-fees-subsidy:Block Fees Vs Subsidy`);
+    this.seoService.setDescription($localize`:@@meta.description.bitcoin.graphs.block-fees-subsidy:See the mining fees earned per Bitcoin block compared to the Bitcoin block subsidy, visualized in BTC and USD over time.`);
+
+    this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
+    this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
+
+    this.route
+    .fragment
+    .subscribe((fragment) => {
+      if (['24h', '3d', '1w', '1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
+        this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
+      }
+    });
+
+    this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
+      .pipe(
+        startWith(this.radioGroupForm.controls.dateSpan.value),
+        switchMap((timespan) => {
+          this.isLoading = true;
+          this.storageService.setValue('miningWindowPreference', timespan);
+          this.timespan = timespan;
+          this.zoomTimeSpan = timespan;
+          return this.apiService.getHistoricalBlockFees$(timespan)
+            .pipe(
+              tap((response) => {
+                this.data = {
+                  timestamp: response.body.map(val => val.timestamp * 1000),
+                  blockHeight: response.body.map(val => val.avgHeight),
+                  blockFees: response.body.map(val => val.avgFees / 100_000_000),
+                  blockFeesFiat: response.body.filter(val => val['USD'] > 0).map(val => val.avgFees / 100_000_000 * val['USD']),
+                  blockSubsidy: response.body.map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000),
+                  blockSubsidyFiat: response.body.filter(val => val['USD'] > 0).map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD']),
+                };
+                
+                this.prepareChartOptions();
+                this.isLoading = false;
+              }),
+              map((response) => {
+                return {
+                  blockCount: parseInt(response.headers.get('x-total-count'), 10),
+                };
+              }),
+            );
+        }),
+        share()
+      );
+  }
+
+  prepareChartOptions() {
+    let title: object;
+    if (this.data.blockFees.length === 0) {
+      title = {
+        textStyle: {
+          color: 'grey',
+          fontSize: 15
+        },
+        text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
+        left: 'center',
+        top: 'center'
+      };
+    }
+
+    this.chartOptions = {
+      title: title,
+      color: [
+        '#ff9f00',
+        '#0aab2f',
+      ],
+      animation: false,
+      grid: {
+        top: 80,
+        bottom: 80,
+        right: this.right,
+        left: this.left,
+      },
+      tooltip: {
+        show: !this.isMobile(),
+        trigger: 'axis',
+        axisPointer: {
+          type: 'line'
+        },
+        backgroundColor: 'color-mix(in srgb, var(--active-bg) 95%, transparent)',
+        borderRadius: 4,
+        shadowColor: 'color-mix(in srgb, var(--active-bg) 95%, transparent)',
+        textStyle: {
+          color: 'var(--tooltip-grey)',
+          align: 'left',
+        },
+        borderColor: 'var(--active-bg)',
+        formatter: function (data) {
+          if (data.length <= 0) {
+            return '';
+          }
+          let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.zoomTimeSpan, parseInt(this.data.timestamp[data[0].dataIndex], 10))}</b><br>`;
+          for (let i = data.length - 1; i >= 0; i--) {
+            const tick = data[i];
+            if (!this.showFiat) tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data, this.locale, '1.0-3')} BTC<br>`;
+            else tooltip += `${tick.marker} ${tick.seriesName}: ${this.fiatCurrencyPipe.transform(tick.data, null, 'USD') }<br>`;
+          }
+          if (!this.showFiat) tooltip += `<div style="margin-left: 2px">${formatNumber(data.reduce((acc, val) => acc + val.data, 0), this.locale, '1.0-3')} BTC</div>`;
+          else tooltip += `<div style="margin-left: 2px">${this.fiatCurrencyPipe.transform(data.reduce((acc, val) => acc + val.data, 0), null, 'USD')}</div>`;
+          if (['24h', '3d'].includes(this.zoomTimeSpan)) {
+            tooltip += `<small>` + $localize`At block <b style="color: white; margin-left: 2px">${data[0].axisValue}` + `</small>`;
+          } else {
+            tooltip += `<small>` + $localize`Around block <b style="color: white; margin-left: 2px">${data[0].axisValue}` + `</small>`;
+          }
+          return tooltip;
+        }.bind(this)
+      },
+      xAxis: this.data.blockFees.length === 0 ? undefined : [
+        {
+          type: 'category',
+          data: this.data.blockHeight,
+          show: false,
+          axisLabel: {
+            hideOverlap: true,
+          }
+        },
+        {
+          type: 'category',
+          data: this.data.timestamp,
+          show: true,
+          position: 'bottom',
+          axisLabel: {
+            color: 'var(--grey)',
+            formatter: (val) => {
+              return formatterXAxis(this.locale, this.timespan, parseInt(val, 10));
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        }
+      ],
+      legend: this.data.blockFees.length === 0 ? undefined : {
+        data: [
+          {
+            name: 'Subsidy',
+            inactiveColor: 'var(--grey)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Fees',
+            inactiveColor: 'var(--grey)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Subsidy (USD)',
+            inactiveColor: 'var(--grey)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Fees (USD)',
+            inactiveColor: 'var(--grey)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+        ],
+        selected: {
+          'Subsidy (USD)': this.showFiat,
+          'Fees (USD)': this.showFiat,
+          'Subsidy': !this.showFiat,
+          'Fees': !this.showFiat,
+        },
+      },
+      yAxis: this.data.blockFees.length === 0 ? undefined : [
+        {
+          type: 'value',
+          axisLabel: {
+            color: 'var(--grey)',
+            formatter: (val) => {
+              return `${val} BTC`;
+            }
+          },
+          min: 0,
+          splitLine: {
+            lineStyle: {
+              type: 'dotted',
+              color: 'var(--transparent-fg)',
+              opacity: 0.25,
+            }
+          },
+        },
+        {
+          type: 'value',
+          position: 'right',
+          axisLabel: {
+            color: 'var(--grey)',
+            formatter: function(val) {
+              return this.fiatShortenerPipe.transform(val, null, 'USD');
+            }.bind(this)
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+      ],
+      series: this.data.blockFees.length === 0 ? undefined : [
+        {
+          name: 'Subsidy',
+          yAxisIndex: 0,
+          type: 'bar',
+          stack: 'total',
+          data: this.data.blockSubsidy,
+        },
+        {
+          name: 'Fees',
+          yAxisIndex: 0,
+          type: 'bar',
+          stack: 'total',
+          data: this.data.blockFees,
+        },
+        {
+          name: 'Subsidy (USD)',
+          yAxisIndex: 1,
+          type: 'bar',
+          stack: 'total',
+          data: this.data.blockSubsidyFiat,
+        },
+        {
+          name: 'Fees (USD)',
+          yAxisIndex: 1,
+          type: 'bar',
+          stack: 'total',
+          data: this.data.blockFeesFiat,
+        },
+      ],
+      dataZoom: this.data.blockFees.length === 0 ? undefined : [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        maxSpan: 100,
+        minSpan: 1,
+        moveOnMouseMove: false,
+      }, {
+        showDetail: false,
+        show: true,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        left: 20,
+        right: 15,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+        },
+      }],
+    };
+  }
+
+  onChartInit(ec) {
+    this.chartInstance = ec;
+
+    this.chartInstance.on('legendselectchanged', (params) => {
+      const isFiat = params.name.includes('USD');
+      if (isFiat === this.showFiat) return;
+
+      const isActivation = params.selected[params.name];
+      if (isFiat === isActivation) {
+        this.showFiat = true;
+        this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy' });
+        this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees' });
+        this.chartInstance.dispatchAction({ type: 'legendSelect',   name: 'Subsidy (USD)' });
+        this.chartInstance.dispatchAction({ type: 'legendSelect',   name: 'Fees (USD)' });
+      } else {
+        this.showFiat = false;
+        this.chartInstance.dispatchAction({ type: 'legendSelect',   name: 'Subsidy' });
+        this.chartInstance.dispatchAction({ type: 'legendSelect',   name: 'Fees' });
+        this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy (USD)' });
+        this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees (USD)' });
+      }
+    });
+
+    this.chartInstance.on('datazoom', (params) => {
+      if (params.silent || this.isLoading || ['24h', '3d'].includes(this.timespan)) {
+        return;
+      }
+      this.updateZoom = true;
+    });
+
+    this.chartInstance.on('click', (e) => {
+      this.zone.run(() => {
+        if (['24h', '3d'].includes(this.zoomTimeSpan)) {
+          const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.name}`);
+          if (e.event.event.shiftKey || e.event.event.ctrlKey || e.event.event.metaKey) {
+            window.open(url);
+          } else {
+            this.router.navigate([url]);
+          }
+        }
+      });
+    });
+  }
+
+  @HostListener('document:pointerup', ['$event'])
+  onPointerUp(event: PointerEvent) {
+    if (this.updateZoom) {
+      this.onZoom();
+      this.updateZoom = false;
+    }
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+
+  initSubsidies(): { [key: number]: number } {
+    let blockReward = 50 * 100_000_000;
+    const subsidies = {};
+    for (let i = 0; i <= 33; i++) {
+      subsidies[i] = blockReward;
+      blockReward = Math.floor(blockReward / 2);
+    }
+    return subsidies;
+  }
+
+  onZoom() {
+    const option = this.chartInstance.getOption();
+    const timestamps = option.xAxis[1].data;
+    const startTimestamp = timestamps[option.dataZoom[0].startValue];
+    const endTimestamp = timestamps[option.dataZoom[0].endValue];
+
+    this.isLoading = true;
+    this.cd.detectChanges();
+
+    const subscription = this.apiService.getBlockFeesFromTimespan$(Math.floor(startTimestamp / 1000), Math.floor(endTimestamp / 1000))
+    .pipe(
+      tap((response) => {
+        const startIndex = option.dataZoom[0].startValue;
+        const endIndex = option.dataZoom[0].endValue;
+        
+        // Update series with more granular data
+        const lengthBefore = this.data.timestamp.length;
+        this.data.timestamp.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.timestamp * 1000));
+        this.data.blockHeight.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.avgHeight));
+        this.data.blockFees.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.avgFees / 100_000_000));
+        this.data.blockFeesFiat.splice(startIndex, endIndex - startIndex, ...response.body.filter(val => val['USD'] > 0).map(val => val.avgFees / 100_000_000 * val['USD']));
+        this.data.blockSubsidy.splice(startIndex, endIndex - startIndex, ...response.body.map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000));
+        this.data.blockSubsidyFiat.splice(startIndex, endIndex - startIndex, ...response.body.filter(val => val['USD'] > 0).map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD']));
+        option.series[0].data = this.data.blockSubsidy;
+        option.series[1].data = this.data.blockFees;
+        option.series[2].data = this.data.blockSubsidyFiat;
+        option.series[3].data = this.data.blockFeesFiat;
+        option.xAxis[0].data = this.data.blockHeight;
+        option.xAxis[1].data = this.data.timestamp;
+        this.chartInstance.setOption(option, true);
+        const lengthAfter = this.data.timestamp.length;
+
+        // Update the zoom to keep the same range after the update
+        this.chartInstance.dispatchAction({
+          type: 'dataZoom',
+          startValue: startIndex,
+          endValue: endIndex + lengthAfter - lengthBefore,
+          silent: true,
+        });
+
+        // Update the chart
+        const newOption = this.chartInstance.getOption();
+        this.zoomSpan = newOption.dataZoom[0].end - newOption.dataZoom[0].start;
+        this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000));
+        this.isLoading = false;
+      }),
+      catchError(() => {
+        const newOption = this.chartInstance.getOption();
+        this.zoomSpan = newOption.dataZoom[0].end - newOption.dataZoom[0].start;
+        this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000));
+        this.isLoading = false;
+        this.cd.detectChanges();
+        return [];
+      })
+    ).subscribe(() => {
+      subscription.unsubscribe();
+      this.cd.detectChanges();
+    });
+  }
+
+  getTimeRangeFromTimespan(from: number, to: number): string {
+    const timespan = to - from; 
+    switch (true) {
+      case timespan >= 3600 * 24 * 365 * 4: return 'all';
+      case timespan >= 3600 * 24 * 365 * 3: return '4y';
+      case timespan >= 3600 * 24 * 365 * 2: return '3y';
+      case timespan >= 3600 * 24 * 365: return '2y';
+      case timespan >= 3600 * 24 * 30 * 6: return '1y';
+      case timespan >= 3600 * 24 * 30 * 3: return '6m';
+      case timespan >= 3600 * 24 * 30: return '3m';
+      case timespan >= 3600 * 24 * 7: return '1m';
+      case timespan >= 3600 * 24 * 3: return '1w';
+      case timespan >= 3600 * 24: return '3d';
+      default: return '24h';
+    }
+  }
+
+  onSaveChart() {
+    // @ts-ignore
+    const prevBottom = this.chartOptions.grid.bottom;
+    const now = new Date();
+    // @ts-ignore
+    this.chartOptions.grid.bottom = 40;
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `block-fees-subsidy-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartOptions.backgroundColor = 'none';
+    this.chartInstance.setOption(this.chartOptions);
+  }
+
+}

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

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+      <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>
@@ -46,7 +46,7 @@
   </div>
 
   <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
   </div>
   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
     <div class="spinner-border text-light"></div>

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

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -59,8 +60,3 @@
   height: 100%;
   max-height: 270px;
 }
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}

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

@@ -81,6 +81,20 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   tooltipPosition: Position;
 
   readyNextFrame = false;
+  lastUpdate: number = 0;
+  pendingUpdate: {
+    count: number,
+    add: { [txid: string]: TransactionStripped },
+    remove: { [txid: string]: string },
+    change: { [txid: string]: { txid: string, rate: number | undefined, acc: boolean | undefined } },
+    direction?: string,
+  } = {
+    count: 0,
+    add: {},
+    remove: {},
+    change: {},
+    direction: 'left',
+  };
 
   searchText: string;
   searchSubscription: Subscription;
@@ -176,6 +190,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   destroy(): void {
     if (this.scene) {
       this.scene.destroy();
+      this.clearUpdateQueue();
       this.start();
     }
   }
@@ -188,6 +203,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
     this.filtersAvailable = filtersAvailable;
     if (this.scene) {
+      this.clearUpdateQueue();
       this.scene.setup(transactions);
       this.readyNextFrame = true;
       this.start();
@@ -197,6 +213,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   enter(transactions: TransactionStripped[], direction: string): void {
     if (this.scene) {
+      this.clearUpdateQueue();
       this.scene.enter(transactions, direction);
       this.start();
       this.updateSearchHighlight();
@@ -205,6 +222,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   exit(direction: string): void {
     if (this.scene) {
+      this.clearUpdateQueue();
       this.scene.exit(direction);
       this.start();
       this.updateSearchHighlight();
@@ -213,13 +231,67 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   replace(transactions: TransactionStripped[], direction: string, sort: boolean = true, startTime?: number): void {
     if (this.scene) {
+      this.clearUpdateQueue();
       this.scene.replace(transactions || [], direction, sort, startTime);
       this.start();
       this.updateSearchHighlight();
     }
   }
 
+  // collates deferred updates into a set of consistent pending changes
+  queueUpdate(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left'): void {
+    for (const tx of add) {
+      this.pendingUpdate.add[tx.txid] = tx;
+      delete this.pendingUpdate.remove[tx.txid];
+      delete this.pendingUpdate.change[tx.txid];
+    }
+    for (const txid of remove) {
+      delete this.pendingUpdate.add[txid];
+      this.pendingUpdate.remove[txid] = txid;
+      delete this.pendingUpdate.change[txid];
+    }
+    for (const tx of change) {
+      if (this.pendingUpdate.add[tx.txid]) {
+        this.pendingUpdate.add[tx.txid].rate = tx.rate;
+        this.pendingUpdate.add[tx.txid].acc = tx.acc;
+      } else {
+        this.pendingUpdate.change[tx.txid] = tx;
+      }
+    }
+    this.pendingUpdate.direction = direction;
+    this.pendingUpdate.count++;
+  }
+
+  deferredUpdate(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left'): void {
+    this.queueUpdate(add, remove, change, direction);
+    this.applyQueuedUpdates();
+  }
+
+  applyQueuedUpdates(): void {
+    if (this.pendingUpdate.count && performance.now() > (this.lastUpdate + this.animationDuration)) {
+      this.applyUpdate(Object.values(this.pendingUpdate.add), Object.values(this.pendingUpdate.remove), Object.values(this.pendingUpdate.change), this.pendingUpdate.direction);
+      this.clearUpdateQueue();
+    }
+  }
+
+  clearUpdateQueue(): void {
+    this.pendingUpdate = {
+      count: 0,
+      add: {},
+      remove: {},
+      change: {},
+    };
+    this.lastUpdate = performance.now();
+  }
+
   update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
+    // merge any pending changes into this update
+    this.queueUpdate(add, remove, change);
+    this.applyUpdate(Object.values(this.pendingUpdate.add), Object.values(this.pendingUpdate.remove), Object.values(this.pendingUpdate.change), direction, resetLayout);
+    this.clearUpdateQueue();
+  }
+
+  applyUpdate(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
     if (this.scene) {
       add = add.filter(tx => !this.scene.txs[tx.txid]);
       remove = remove.filter(txid => this.scene.txs[txid]);
@@ -230,6 +302,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       }
       this.scene.update(add, remove, change, direction, resetLayout);
       this.start();
+      this.lastUpdate = performance.now();
       this.updateSearchHighlight();
     }
   }
@@ -370,6 +443,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (!now) {
       now = performance.now();
     }
+    this.applyQueuedUpdates();
     // skip re-render if there's no change to the scene
     if (this.scene && this.gl) {
       /* SET UP SHADER UNIFORMS */
@@ -577,13 +651,13 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
     return (tx: TxView) => {
       if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
-        if (this.themeService.theme !== 'contrast') {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
           return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
         } else {
           return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
         }
       } else {
-        if (this.themeService.theme !== 'contrast') {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
           return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
             tx,
             defaultColors.unmatchedfee,

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

@@ -13,7 +13,7 @@ export default class BlockScene {
   theme: ThemeService;
   orientation: string;
   flip: boolean;
-  animationDuration: number = 900;
+  animationDuration: number = 1000;
   configAnimationOffset: number | null;
   animationOffset: number;
   highlightingEnabled: boolean;
@@ -69,7 +69,7 @@ export default class BlockScene {
   }
 
   setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void {
-    this.theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
     this.updateAllColors();
   }
 
@@ -179,7 +179,7 @@ export default class BlockScene {
       removed.forEach(tx => {
         tx.destroy();
       });
-    }, 1000);
+    }, (startTime - performance.now()) + this.animationDuration + 1000);
 
     if (resetLayout) {
       add.forEach(tx => {
@@ -239,14 +239,14 @@ export default class BlockScene {
       { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
         orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
   ): void {
-    this.animationDuration = animationDuration || 1000;
+    this.animationDuration = animationDuration || this.animationDuration || 1000;
     this.configAnimationOffset = animationOffset;
     this.animationOffset = this.configAnimationOffset == null ? (this.width * 1.4) : this.configAnimationOffset;
     this.orientation = orientation;
     this.flip = flip;
     this.vertexArray = vertexArray;
     this.highlightingEnabled = highlighting;
-    theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    theme.theme === 'contrast' || theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
     this.theme = theme;
 
     this.scene = {

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

@@ -177,7 +177,7 @@ export function ageColorFunction(
     return auditColors.accelerated;
   }
 
-  const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);
+  const color = theme !== 'contrast' && theme !== 'bukele' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);
 
   const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
   return {

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

@@ -1,6 +1,6 @@
 .block-overview-tooltip {
   position: absolute;
-  background: rgba(#11131f, 0.95);
+	background: color-mix(in srgb, var(--active-bg) 95%, transparent);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);
@@ -30,7 +30,7 @@ th, td {
 }
 
 .badge.badge-accelerated {
-  background-color: var(--tertiary);
+  background-color: #653b9c;
   box-shadow: #ad7de57f 0px 0px 12px -2px;
   color: white;
   animation: acceleratePulse 1s infinite;
@@ -71,7 +71,7 @@ th, td {
 }
 
 @keyframes acceleratePulse {
-  0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
   50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
-  100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
 }

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

@@ -11,7 +11,7 @@
     </div>  
   
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+      <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
           <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> 1M
         </label>
@@ -38,7 +38,7 @@
   </div>
 
   <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
   </div>
   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
     <div class="spinner-border text-light"></div>

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

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -59,8 +60,3 @@
   height: 100%;
   max-height: 270px;
 }
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}

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

@@ -9,7 +9,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+      <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-sizes-weights' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>
@@ -45,7 +45,7 @@
   </div>
 
   <div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}">
   </div>
   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
     <div class="spinner-border text-light"></div>

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

@@ -11,7 +11,8 @@
 
 .main-title {
   position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
   margin-top: -13px;
   font-size: 10px;
   text-transform: uppercase;
@@ -59,8 +60,3 @@
   height: 100%;
   max-height: 270px;
 }
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}