multiblock fix padding, add loading spinner

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

@@ -30,7 +30,6 @@ export interface AbstractBitcoinApi {
   $getBatchedOutspendsInternal(txId: string[]): Promise<IEsploraApi.Outspend[][]>;
   $getOutSpendsByOutpoint(outpoints: { txid: string, vout: number }[]): Promise<IEsploraApi.Outspend[]>;
   $getCoinbaseTx(blockhash: string): Promise<IEsploraApi.Transaction>;
-  $getAddressTransactionSummary(address: string): Promise<IEsploraApi.AddressTxSummary[]>;
 
   startHealthChecks(): void;
   getHealthStatus(): HealthCheckHost[];

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

@@ -255,10 +255,6 @@ class BitcoinApi implements AbstractBitcoinApi {
     return this.$getRawTransaction(txids[0]);
   }
 
-  async $getAddressTransactionSummary(address: string): Promise<IEsploraApi.AddressTxSummary[]> {
-    throw new Error('Method getAddressTransactionSummary not supported by the Bitcoin RPC API.');
-  }
-
   $getEstimatedHashrate(blockHeight: number): Promise<number> {
     // 120 is the default block span in Core
     return this.bitcoindClient.getNetworkHashPs(120, blockHeight);

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

@@ -1,7 +1,6 @@
 import { Application, NextFunction, Request, Response } from 'express';
 import logger from '../../logger';
 import bitcoinClient from './bitcoin-client';
-import config from '../../config';
 
 /**
  * Define a set of routes used by the accelerator server
@@ -12,15 +11,15 @@ class BitcoinBackendRoutes {
 
   public initRoutes(app: Application) {
     app
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'get-mempool-entry', this.disableCache, this.$getMempoolEntry)
-      .post(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'decode-raw-transaction', this.disableCache, this.$decodeRawTransaction)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'get-raw-transaction', this.disableCache, this.$getRawTransaction)
-      .post(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'send-raw-transaction', this.disableCache, this.$sendRawTransaction)
-      .post(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'test-mempool-accept', this.disableCache, this.$testMempoolAccept)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'get-mempool-ancestors', this.disableCache, this.$getMempoolAncestors)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'get-block', this.disableCache, this.$getBlock)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'get-block-hash', this.disableCache, this.$getBlockHash)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/bitcoin-core/' + 'get-block-count', this.disableCache, this.$getBlockCount)
+      .get('/api/internal/bitcoin-core/' + 'get-mempool-entry', this.disableCache, this.$getMempoolEntry)
+      .post('/api/internal/bitcoin-core/' + 'decode-raw-transaction', this.disableCache, this.$decodeRawTransaction)
+      .get('/api/internal/bitcoin-core/' + 'get-raw-transaction', this.disableCache, this.$getRawTransaction)
+      .post('/api/internal/bitcoin-core/' + 'send-raw-transaction', this.disableCache, this.$sendRawTransaction)
+      .post('/api/internal/bitcoin-core/' + 'test-mempool-accept', this.disableCache, this.$testMempoolAccept)
+      .get('/api/internal/bitcoin-core/' + 'get-mempool-ancestors', this.disableCache, this.$getMempoolAncestors)
+      .get('/api/internal/bitcoin-core/' + 'get-block', this.disableCache, this.$getBlock)
+      .get('/api/internal/bitcoin-core/' + 'get-block-hash', this.disableCache, this.$getBlockHash)
+      .get('/api/internal/bitcoin-core/' + 'get-block-count', this.disableCache, this.$getBlockCount)
     ;
   }
 

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

@@ -42,7 +42,6 @@ class BitcoinRoutes {
       .get(config.MEMPOOL.API_URL_PREFIX + 'blocks/:height', this.getBlocks.bind(this))
       .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash', this.getBlock)
       .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash/summary', this.getStrippedBlockTransactions)
-      .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash/tx/:txid/summary', this.getStrippedBlockTransaction)
       .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash/audit-summary', this.getBlockAuditSummary)
       .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash/tx/:txid/audit', this.$getBlockTxAuditSummary)
       .get(config.MEMPOOL.API_URL_PREFIX + 'blocks/tip/height', this.getBlockTipHeight)
@@ -322,20 +321,6 @@ class BitcoinRoutes {
     }
   }
 
-  private async getStrippedBlockTransaction(req: Request, res: Response) {
-    try {
-      const transaction = await blocks.$getSingleTxFromSummary(req.params.hash, req.params.txid);
-      if (!transaction) {
-        handleError(req, res, 404, `transaction not found in summary`);
-        return;
-      }
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 3600 * 24 * 30).toUTCString());
-      res.json(transaction);
-    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
-    }
-  }
-
   private async getBlock(req: Request, res: Response) {
     try {
       const block = await blocks.$getBlock(req.params.hash);

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

@@ -179,11 +179,4 @@ export namespace IEsploraApi {
     burn_count: number;
   }
 
-  export interface AddressTxSummary {
-    txid: string;
-    value: number;
-    height: number;
-    time: number;
-    tx_position?: number;
-  }
 }

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

@@ -1,12 +1,12 @@
 import config from '../../config';
-import axios, { isAxiosError } from 'axios';
+import axios, { AxiosResponse, isAxiosError } from 'axios';
 import http from 'http';
 import { AbstractBitcoinApi, HealthCheckHost } from './bitcoin-api-abstract-factory';
 import { IEsploraApi } from './esplora-api.interface';
 import logger from '../../logger';
 import { Common } from '../common';
 import { SubmitPackageResult, TestMempoolAcceptResult } from './bitcoin-api.interface';
-import os from 'os';
+
 interface FailoverHost {
   host: string,
   rtts: number[],
@@ -20,13 +20,6 @@ interface FailoverHost {
   preferred?: boolean,
   checked: boolean,
   lastChecked?: number,
-  publicDomain: string,
-  hashes: {
-    frontend?: string,
-    backend?: string,
-    electrs?: string,
-    lastUpdated: number,
-  }
 }
 
 class FailoverRouter {
@@ -36,21 +29,14 @@ class FailoverRouter {
   maxHeight: number = 0;
   hosts: FailoverHost[];
   multihost: boolean;
-  gitHashInterval: number = 600000; // 10 minutes
-  pollInterval: number = 60000; // 1 minute
+  pollInterval: number = 60000;
   pollTimer: NodeJS.Timeout | null = null;
   pollConnection = axios.create();
-  localHostname: string = 'localhost';
   requestConnection = axios.create({
     httpAgent: new http.Agent({ keepAlive: true })
   });
 
   constructor() {
-    try {
-      this.localHostname = os.hostname();
-    } catch (e) {
-      logger.warn('Failed to set local hostname, using "localhost"');
-    }
     // setup list of hosts
     this.hosts = (config.ESPLORA.FALLBACK || []).map(domain => {
       return {
@@ -59,10 +45,6 @@ class FailoverRouter {
         rtts: [],
         rtt: Infinity,
         failures: 0,
-        publicDomain: 'https://' + this.extractPublicDomain(domain),
-        hashes: {
-          lastUpdated: 0,
-        },
       };
     });
     this.activeHost = {
@@ -73,10 +55,6 @@ class FailoverRouter {
       socket: !!config.ESPLORA.UNIX_SOCKET_PATH,
       preferred: true,
       checked: false,
-      publicDomain: `http://${this.localHostname}`,
-      hashes: {
-        lastUpdated: 0,
-      },
     };
     this.fallbackHost = this.activeHost;
     this.hosts.unshift(this.activeHost);
@@ -128,24 +106,6 @@ class FailoverRouter {
             host.outOfSync = false;
           }
           host.unreachable = false;
-
-          // update esplora git hash using the x-powered-by header from the height check
-          const poweredBy = result.headers['x-powered-by'];
-          if (poweredBy) {
-            const match = poweredBy.match(/([a-fA-F0-9]{5,40})/);
-            if (match && match[1]?.length) {
-              host.hashes.electrs = match[1];
-            }
-          }
-
-          // Check front and backend git hashes less often
-          if (Date.now() - host.hashes.lastUpdated > this.gitHashInterval) {
-            await Promise.all([
-              this.$updateFrontendGitHash(host),
-              this.$updateBackendGitHash(host)
-            ]);
-            host.hashes.lastUpdated = Date.now();
-          }
         } else {
           host.outOfSync = true;
           host.unreachable = true;
@@ -242,47 +202,6 @@ class FailoverRouter {
     }
   }
 
-  // methods for retrieving git hashes by host
-  private async $updateFrontendGitHash(host: FailoverHost): Promise<void> {
-    try {
-      const url = `${host.publicDomain}/resources/config.js`;
-      const response = await this.pollConnection.get<string>(url, { timeout: config.ESPLORA.FALLBACK_TIMEOUT });
-      const match = response.data.match(/GIT_COMMIT_HASH\s*=\s*['"](.*?)['"]/);
-      if (match && match[1]?.length) {
-        host.hashes.frontend = match[1];
-      }
-    } catch (e) {
-      // failed to get frontend build hash - do nothing
-    }
-  }
-
-  private async $updateBackendGitHash(host: FailoverHost): Promise<void> {
-    try {
-      const url = `${host.publicDomain}/api/v1/backend-info`;
-      const response = await this.pollConnection.get<any>(url, { timeout: config.ESPLORA.FALLBACK_TIMEOUT });
-      if (response.data?.gitCommit) {
-        host.hashes.backend = response.data.gitCommit;
-      }
-    } catch (e) {
-      // failed to get backend build hash - do nothing
-    }
-  }
-
-  // returns the public mempool domain corresponding to an esplora server url
-  // (a bit of a hack to avoid manually specifying frontend & backend URLs for each esplora server)
-  private extractPublicDomain(url: string): string {
-    // force the url to start with a valid protocol
-    const urlWithProtocol = url.startsWith('http') ? url : `https://${url}`;
-    // parse as URL and extract the hostname
-    try {
-      const parsed = new URL(urlWithProtocol);
-      return parsed.hostname;
-    } catch (e) {
-      // fallback to the original url
-      return url;
-    }
-  }
-
   private async $query<T>(method: 'get'| 'post', path, data: any, responseType = 'json', host = this.activeHost, retry: boolean = true): Promise<T> {
     let axiosConfig;
     let url;
@@ -386,7 +305,7 @@ class ElectrsApi implements AbstractBitcoinApi {
   }
 
   $getAddress(address: string): Promise<IEsploraApi.Address> {
-    return this.failoverRouter.$get<IEsploraApi.Address>('/address/' + address);
+    throw new Error('Method getAddress not implemented.');
   }
 
   $getAddressTransactions(address: string, txId?: string): Promise<IEsploraApi.Transaction[]> {
@@ -442,10 +361,6 @@ class ElectrsApi implements AbstractBitcoinApi {
     return this.failoverRouter.$get<IEsploraApi.Transaction>('/tx/' + txid);
   }
 
-  async $getAddressTransactionSummary(address: string): Promise<IEsploraApi.AddressTxSummary[]> {
-    return this.failoverRouter.$get<IEsploraApi.AddressTxSummary[]>('/address/' + address + '/txs/summary');
-  }
-
   public startHealthChecks(): void {
     this.failoverRouter.startHealthChecks();
   }
@@ -462,7 +377,6 @@ class ElectrsApi implements AbstractBitcoinApi {
         unreachable: !!host.unreachable,
         checked: !!host.checked,
         lastChecked: host.lastChecked || 0,
-        hashes: host.hashes,
       }));
     } else {
       return [];

backend/src/api/blocks.ts

@@ -412,16 +412,8 @@ class Blocks {
     }
 
     try {
-      const blockchainInfo = await bitcoinClient.getBlockchainInfo();
-      const currentBlockHeight = blockchainInfo.blocks;
-      let indexingBlockAmount = Math.min(config.MEMPOOL.INDEXING_BLOCKS_AMOUNT, currentBlockHeight);
-      if (indexingBlockAmount <= -1) {
-        indexingBlockAmount = currentBlockHeight + 1;
-      }
-      const lastBlockToIndex = Math.max(0, currentBlockHeight - indexingBlockAmount + 1);
-
       // Get all indexed block hash
-      const indexedBlocks = (await blocksRepository.$getIndexedBlocks()).filter(block => block.height >= lastBlockToIndex);
+      const indexedBlocks = await blocksRepository.$getIndexedBlocks();
       const indexedBlockSummariesHashesArray = await BlocksSummariesRepository.$getIndexedSummariesId();
 
       const indexedBlockSummariesHashes = {}; // Use a map for faster seek during the indexing loop
@@ -1224,11 +1216,6 @@ class Blocks {
     return summary.transactions;
   }
 
-  public async $getSingleTxFromSummary(hash: string, txid: string): Promise<TransactionClassified | null> {
-    const txs = await this.$getStrippedBlockTransactions(hash);
-    return txs.find(tx => tx.txid === txid) || null;
-  }
-
   /**
    * Get 15 blocks
    * 

backend/src/api/database-migration.ts

@@ -7,7 +7,7 @@ import cpfpRepository from '../repositories/CpfpRepository';
 import { RowDataPacket } from 'mysql2';
 
 class DatabaseMigration {
-  private static currentVersion = 94;
+  private static currentVersion = 83;
   private queryTimeout = 3600_000;
   private statisticsAddedIndexed = false;
   private uniqueLogs: string[] = [];
@@ -710,414 +710,6 @@ class DatabaseMigration {
       await this.$executeQuery('ALTER TABLE `blocks` ADD first_seen datetime(6) DEFAULT NULL');
       await this.updateToSchemaVersion(83);
     }
-
-    // add new pools indexes
-    if (databaseSchemaVersion < 84 && isBitcoin === true) {
-      await this.$executeQuery(`
-        ALTER TABLE \`pools\`
-          ADD INDEX \`slug\` (\`slug\`),
-          ADD INDEX \`unique_id\` (\`unique_id\`)
-      `);
-      await this.updateToSchemaVersion(84);
-    }
-
-    // lightning channels indexes
-    if (databaseSchemaVersion < 85 && isBitcoin === true) {
-      await this.$executeQuery(`
-        ALTER TABLE \`channels\`
-          ADD INDEX \`created\` (\`created\`),
-          ADD INDEX \`capacity\` (\`capacity\`),
-          ADD INDEX \`closing_reason\` (\`closing_reason\`),
-          ADD INDEX \`closing_resolved\` (\`closing_resolved\`)
-      `);
-      await this.updateToSchemaVersion(85);
-    }
-
-    // lightning nodes indexes
-    if (databaseSchemaVersion < 86 && isBitcoin === true) {
-      await this.$executeQuery(`
-        ALTER TABLE \`nodes\`
-          ADD INDEX \`status\` (\`status\`),
-          ADD INDEX \`channels\` (\`channels\`),
-          ADD INDEX \`country_id\` (\`country_id\`),
-          ADD INDEX \`as_number\` (\`as_number\`),
-          ADD INDEX \`first_seen\` (\`first_seen\`)
-      `);
-      await this.updateToSchemaVersion(86);
-    }
-
-    // lightning node sockets indexes
-    if (databaseSchemaVersion < 87 && isBitcoin === true) {
-      await this.$executeQuery('ALTER TABLE `nodes_sockets` ADD INDEX `type` (`type`)');
-      await this.updateToSchemaVersion(87);
-    }
-
-    // lightning stats indexes
-    if (databaseSchemaVersion < 88 && isBitcoin === true) {
-      await this.$executeQuery('ALTER TABLE `lightning_stats` ADD INDEX `added` (`added`)');
-      await this.updateToSchemaVersion(88);
-    }
-
-    // geo names indexes
-    if (databaseSchemaVersion < 89 && isBitcoin === true) {
-      await this.$executeQuery('ALTER TABLE `geo_names` ADD INDEX `names` (`names`)');
-      await this.updateToSchemaVersion(89);
-    }
-
-    // hashrates indexes
-    if (databaseSchemaVersion < 90 && isBitcoin === true) {
-      await this.$executeQuery('ALTER TABLE `hashrates` ADD INDEX `type` (`type`)');
-      await this.updateToSchemaVersion(90);
-    }
-
-    // block audits indexes
-    if (databaseSchemaVersion < 91 && isBitcoin === true) {
-      await this.$executeQuery('ALTER TABLE `blocks_audits` ADD INDEX `time` (`time`)');
-      await this.updateToSchemaVersion(91);
-    }
-
-    // elements_pegs indexes
-    if (databaseSchemaVersion < 92 && config.MEMPOOL.NETWORK === 'liquid') {
-      await this.$executeQuery(`
-        ALTER TABLE \`elements_pegs\`
-          ADD INDEX \`block\` (\`block\`),
-          ADD INDEX \`datetime\` (\`datetime\`),
-          ADD INDEX \`amount\` (\`amount\`),
-          ADD INDEX \`bitcoinaddress\` (\`bitcoinaddress\`),
-          ADD INDEX \`bitcointxid\` (\`bitcointxid\`)
-      `);
-      await this.updateToSchemaVersion(92);
-    }
-
-    // federation_txos indexes
-    if (databaseSchemaVersion < 93 && config.MEMPOOL.NETWORK === 'liquid') {
-      await this.$executeQuery(`
-        ALTER TABLE \`federation_txos\`
-          ADD INDEX \`unspent\` (\`unspent\`),
-          ADD INDEX \`lastblockupdate\` (\`lastblockupdate\`),
-          ADD INDEX \`blocktime\` (\`blocktime\`),
-          ADD INDEX \`emergencyKey\` (\`emergencyKey\`),
-          ADD INDEX \`expiredAt\` (\`expiredAt\`)
-      `);
-      await this.updateToSchemaVersion(93);
-    }
-
-    // Unify database schema for all mempool netwoks
-    // versions above 94 should not use network-specific flags
-    if (databaseSchemaVersion < 94) {
-
-      if (!isBitcoin) {
-        // Apply all the bitcoin specific migrations to non-bitcoin networks: liquid, liquidtestnet and testnet4 (!)
-        // Version 5
-        await this.$executeQuery('ALTER TABLE blocks ADD `reward` double unsigned NOT NULL DEFAULT "0"');
-
-        // Version 6
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `height` integer unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `tx_count` smallint unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `size` integer unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `weight` integer unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `difficulty` double NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks DROP FOREIGN KEY IF EXISTS `blocks_ibfk_1`');
-        await this.$executeQuery('ALTER TABLE pools MODIFY `id` smallint unsigned AUTO_INCREMENT');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `pool_id` smallint unsigned NULL');
-        await this.$executeQuery('ALTER TABLE blocks ADD FOREIGN KEY (`pool_id`) REFERENCES `pools` (`id`)');
-        await this.$executeQuery('ALTER TABLE blocks ADD `version` integer unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks ADD `bits` integer unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks ADD `nonce` bigint unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks ADD `merkle_root` varchar(65) NOT NULL DEFAULT ""');
-        await this.$executeQuery('ALTER TABLE blocks ADD `previous_block_hash` varchar(65) NULL');
-
-        // Version 7
-        await this.$executeQuery('DROP table IF EXISTS hashrates;');
-        await this.$executeQuery(this.getCreateDailyStatsTableQuery(), await this.$checkIfTableExists('hashrates'));
-
-        // Version 8
-        await this.$executeQuery('ALTER TABLE `hashrates` DROP INDEX `PRIMARY`');
-        await this.$executeQuery('ALTER TABLE `hashrates` ADD `id` int NOT NULL AUTO_INCREMENT PRIMARY KEY FIRST');
-        await this.$executeQuery('ALTER TABLE `hashrates` ADD `share` float NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE `hashrates` ADD `type` enum("daily", "weekly") DEFAULT "daily"');
-
-        // Version 9
-        await this.$executeQuery('ALTER TABLE `state` CHANGE `name` `name` varchar(100)');
-        await this.$executeQuery('ALTER TABLE `hashrates` ADD UNIQUE `hashrate_timestamp_pool_id` (`hashrate_timestamp`, `pool_id`)');
-
-        // Version 10
-        await this.$executeQuery('ALTER TABLE `blocks` ADD INDEX `blockTimestamp` (`blockTimestamp`)');
-
-        // Version 11
-        await this.$executeQuery(`ALTER TABLE blocks
-          ADD avg_fee INT UNSIGNED NULL,
-          ADD avg_fee_rate INT UNSIGNED NULL
-        `);
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `reward` BIGINT UNSIGNED NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `median_fee` INT UNSIGNED NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `fees` INT UNSIGNED NOT NULL DEFAULT "0"');
-
-        // Version 12
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `fees` BIGINT UNSIGNED NOT NULL DEFAULT "0"');
-
-        // Version 13
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `difficulty` DOUBLE UNSIGNED NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `median_fee` BIGINT UNSIGNED NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `avg_fee` BIGINT UNSIGNED NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE blocks MODIFY `avg_fee_rate` BIGINT UNSIGNED NOT NULL DEFAULT "0"');
-
-        // Version 14
-        await this.$executeQuery('ALTER TABLE `hashrates` DROP FOREIGN KEY `hashrates_ibfk_1`');
-        await this.$executeQuery('ALTER TABLE `hashrates` MODIFY `pool_id` SMALLINT UNSIGNED NOT NULL DEFAULT "0"');
-
-        // Version 17
-        await this.$executeQuery('ALTER TABLE `pools` ADD `slug` CHAR(50) NULL');
-
-        // Version 18
-        await this.$executeQuery('ALTER TABLE `blocks` ADD INDEX `hash` (`hash`);');
-
-        // Version 20
-        await this.$executeQuery(this.getCreateBlocksSummariesTableQuery(), await this.$checkIfTableExists('blocks_summaries'));
-
-        // Version 22
-        await this.$executeQuery('DROP TABLE IF EXISTS `difficulty_adjustments`');
-        await this.$executeQuery(this.getCreateDifficultyAdjustmentsTableQuery(), await this.$checkIfTableExists('difficulty_adjustments'));
-
-        // Version 24
-        await this.$executeQuery('DROP TABLE IF EXISTS `blocks_audits`');
-        await this.$executeQuery(this.getCreateBlocksAuditsTableQuery(), await this.$checkIfTableExists('blocks_audits'));
-
-        // Version 25
-        await this.$executeQuery(this.getCreateLightningStatisticsQuery(), await this.$checkIfTableExists('lightning_stats'));
-        await this.$executeQuery(this.getCreateNodesQuery(), await this.$checkIfTableExists('nodes'));
-        await this.$executeQuery(this.getCreateChannelsQuery(), await this.$checkIfTableExists('channels'));
-        await this.$executeQuery(this.getCreateNodesStatsQuery(), await this.$checkIfTableExists('node_stats'));
-
-        // Version 26
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD tor_nodes int(11) NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD clearnet_nodes int(11) NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD unannounced_nodes int(11) NOT NULL DEFAULT "0"');
-
-        // Version 27
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD avg_capacity bigint(20) unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD avg_fee_rate int(11) unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD avg_base_fee_mtokens bigint(20) unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD med_capacity bigint(20) unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD med_fee_rate int(11) unsigned NOT NULL DEFAULT "0"');
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD med_base_fee_mtokens bigint(20) unsigned NOT NULL DEFAULT "0"');
-
-        // Version 28
-        await this.$executeQuery(`ALTER TABLE lightning_stats MODIFY added DATE`);
-
-        // Version 29
-        await this.$executeQuery(this.getCreateGeoNamesTableQuery(), await this.$checkIfTableExists('geo_names'));
-        await this.$executeQuery('ALTER TABLE `nodes` ADD as_number int(11) unsigned NULL DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `nodes` ADD city_id int(11) unsigned NULL DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `nodes` ADD country_id int(11) unsigned NULL DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `nodes` ADD accuracy_radius int(11) unsigned NULL DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `nodes` ADD subdivision_id int(11) unsigned NULL DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `nodes` ADD longitude double NULL DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `nodes` ADD latitude double NULL DEFAULT NULL');
-
-        // Version 30
-        await this.$executeQuery('ALTER TABLE `geo_names` CHANGE `type` `type` enum("city","country","division","continent","as_organization") NOT NULL');
-
-        // Version 31
-        await this.$executeQuery('ALTER TABLE `prices` ADD `id` int NULL AUTO_INCREMENT UNIQUE');
-        await this.$executeQuery('DROP TABLE IF EXISTS `blocks_prices`');
-        await this.$executeQuery(this.getCreateBlocksPricesTableQuery(), await this.$checkIfTableExists('blocks_prices'));
-
-        // Version 32
-        await this.$executeQuery('ALTER TABLE `blocks_summaries` ADD `template` JSON DEFAULT "[]"');
-
-        // Version 33
-        await this.$executeQuery('ALTER TABLE `geo_names` CHANGE `type` `type` enum("city","country","division","continent","as_organization", "country_iso_code") NOT NULL');
-
-        // Version 34
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD clearnet_tor_nodes int(11) NOT NULL DEFAULT "0"');
-    
-        // Version 35
-        await this.$executeQuery('DELETE from `lightning_stats` WHERE added > "2021-09-19"');
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD CONSTRAINT added_unique UNIQUE (added);');
-
-        // Version 36
-        await this.$executeQuery('ALTER TABLE `nodes` ADD status TINYINT NOT NULL DEFAULT "1"');
-    
-        // Version 37
-        await this.$executeQuery(this.getCreateLNNodesSocketsTableQuery(), await this.$checkIfTableExists('nodes_sockets'));
-        
-        // Version 38
-        await this.$executeQuery(`TRUNCATE lightning_stats`);
-        await this.$executeQuery(`TRUNCATE node_stats`);
-        await this.$executeQuery('ALTER TABLE `lightning_stats` CHANGE `added` `added` timestamp NULL');
-        await this.$executeQuery('ALTER TABLE `node_stats` CHANGE `added` `added` timestamp NULL');
-        await this.updateToSchemaVersion(38);
-      
-        // Version 39
-        await this.$executeQuery('ALTER TABLE `nodes` ADD alias_search TEXT NULL DEFAULT NULL AFTER `alias`');
-        await this.$executeQuery('ALTER TABLE nodes ADD FULLTEXT(alias_search)');
-
-        // Version 40
-        await this.$executeQuery('ALTER TABLE `nodes` ADD capacity bigint(20) unsigned DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `nodes` ADD channels int(11) unsigned DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `nodes` ADD INDEX `capacity` (`capacity`);');
-
-        // Version 41
-        await this.$executeQuery('UPDATE channels SET closing_reason = NULL WHERE closing_reason = 1');
-
-        // Version 42
-        await this.$executeQuery('ALTER TABLE `channels` ADD closing_resolved tinyint(1) DEFAULT 0');
-      
-        // Version 43
-        await this.$executeQuery(this.getCreateLNNodeRecordsTableQuery(), await this.$checkIfTableExists('nodes_records'));
-
-        // Version 44
-        await this.$executeQuery('UPDATE blocks_summaries SET template = NULL');
-
-        // Version 45
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD fresh_txs JSON DEFAULT "[]"');
-    
-        // Version 48
-        await this.$executeQuery('ALTER TABLE `channels` ADD source_checked tinyint(1) DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `channels` ADD closing_fee bigint(20) unsigned DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `channels` ADD node1_funding_balance bigint(20) unsigned DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `channels` ADD node2_funding_balance bigint(20) unsigned DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `channels` ADD node1_closing_balance bigint(20) unsigned DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `channels` ADD node2_closing_balance bigint(20) unsigned DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `channels` ADD funding_ratio float unsigned DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `channels` ADD closed_by varchar(66) DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `channels` ADD single_funded tinyint(1) DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `channels` ADD outputs JSON DEFAULT "[]"');
-
-        // Version 57
-        await this.$executeQuery(`ALTER TABLE nodes MODIFY updated_at datetime NULL`);
-
-        // Version 60
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD sigop_txs JSON DEFAULT "[]"');
-
-        // Version 61
-        if (! await this.$checkIfTableExists('blocks_templates')) {
-          await this.$executeQuery('CREATE TABLE blocks_templates AS SELECT id, template FROM blocks_summaries WHERE template != "[]"');
-        }
-        await this.$executeQuery('ALTER TABLE blocks_templates MODIFY template JSON DEFAULT "[]"');
-        await this.$executeQuery('ALTER TABLE blocks_templates ADD PRIMARY KEY (id)');
-        await this.$executeQuery('ALTER TABLE blocks_summaries DROP COLUMN template');
-
-        // Version 62
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD expected_fees BIGINT UNSIGNED DEFAULT NULL');
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD expected_weight BIGINT UNSIGNED DEFAULT NULL');
-      
-        // Version 63
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD fullrbf_txs JSON DEFAULT "[]"');
-    
-        // Version 64
-        await this.$executeQuery('ALTER TABLE `nodes` ADD features text NULL');
-    
-        // Version 65
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD accelerated_txs JSON DEFAULT "[]"');
-
-        // Version 67
-        await this.$executeQuery('ALTER TABLE `blocks_summaries` ADD version INT NOT NULL DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `blocks_summaries` ADD INDEX `version` (`version`)');
-        await this.$executeQuery('ALTER TABLE `blocks_templates` ADD version INT NOT NULL DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `blocks_templates` ADD INDEX `version` (`version`)');
-
-        // Version 76
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD prioritized_txs JSON DEFAULT "[]"');
-
-        // Version 81
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD version INT NOT NULL DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD INDEX `version` (`version`)');
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD unseen_txs JSON DEFAULT "[]"');
-
-        // Version 83
-        await this.$executeQuery('ALTER TABLE `blocks` ADD first_seen datetime(6) DEFAULT NULL');
-
-        // Version 84
-        await this.$executeQuery(`
-          ALTER TABLE \`pools\`
-            ADD INDEX \`slug\` (\`slug\`),
-            ADD INDEX \`unique_id\` (\`unique_id\`)
-        `);
-
-        // Version 85
-        await this.$executeQuery(`
-          ALTER TABLE \`channels\`
-            ADD INDEX \`created\` (\`created\`),
-            ADD INDEX \`capacity\` (\`capacity\`),
-            ADD INDEX \`closing_reason\` (\`closing_reason\`),
-            ADD INDEX \`closing_resolved\` (\`closing_resolved\`)
-        `);
-        
-        // Version 86        
-        await this.$executeQuery(`
-          ALTER TABLE \`nodes\`
-            ADD INDEX \`status\` (\`status\`),
-            ADD INDEX \`channels\` (\`channels\`),
-            ADD INDEX \`country_id\` (\`country_id\`),
-            ADD INDEX \`as_number\` (\`as_number\`),
-            ADD INDEX \`first_seen\` (\`first_seen\`)
-        `);
-
-        // Version 87
-        await this.$executeQuery('ALTER TABLE `nodes_sockets` ADD INDEX `type` (`type`)');
-        await this.updateToSchemaVersion(87);
-        
-        // Version 88
-        await this.$executeQuery('ALTER TABLE `lightning_stats` ADD INDEX `added` (`added`)');
-    
-        // Version 89
-        await this.$executeQuery('ALTER TABLE `geo_names` ADD INDEX `names` (`names`)');
-    
-        // Version 90
-        await this.$executeQuery('ALTER TABLE `hashrates` ADD INDEX `type` (`type`)');
-
-        // Version 91
-        await this.$executeQuery('ALTER TABLE `blocks_audits` ADD INDEX `time` (`time`)');
-      }
-      
-      if (config.MEMPOOL.NETWORK !== 'liquid') {
-        // Apply all the liquid specific migrations to all other networks
-        // Version 68
-        await this.$executeQuery('ALTER TABLE elements_pegs ADD PRIMARY KEY (txid, txindex);');
-        await this.$executeQuery(this.getCreateFederationAddressesTableQuery(), await this.$checkIfTableExists('federation_addresses'));
-        await this.$executeQuery(this.getCreateFederationTxosTableQuery(), await this.$checkIfTableExists('federation_txos'));
-
-        // Version 71
-        await this.$executeQuery('ALTER TABLE `federation_txos` ADD timelock INT NOT NULL DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `federation_txos` ADD expiredAt INT NOT NULL DEFAULT 0');
-        await this.$executeQuery('ALTER TABLE `federation_txos` ADD emergencyKey TINYINT NOT NULL DEFAULT 0');
-
-        // Version 92
-        await this.$executeQuery(`
-          ALTER TABLE \`elements_pegs\`
-            ADD INDEX \`block\` (\`block\`),
-            ADD INDEX \`datetime\` (\`datetime\`),
-            ADD INDEX \`amount\` (\`amount\`),
-            ADD INDEX \`bitcoinaddress\` (\`bitcoinaddress\`),
-            ADD INDEX \`bitcointxid\` (\`bitcointxid\`)
-        `);
-    
-        // Version 93
-        await this.$executeQuery(`
-          ALTER TABLE \`federation_txos\`
-            ADD INDEX \`unspent\` (\`unspent\`),
-            ADD INDEX \`lastblockupdate\` (\`lastblockupdate\`),
-            ADD INDEX \`blocktime\` (\`blocktime\`),
-            ADD INDEX \`emergencyKey\` (\`emergencyKey\`),
-            ADD INDEX \`expiredAt\` (\`expiredAt\`)
-        `);
-      }
-
-      if (config.MEMPOOL.NETWORK !== 'mainnet') {
-        // Apply all the mainnet specific migrations to all other networks
-        // Version 69
-        await this.$executeQuery(this.getCreateAccelerationsTableQuery(), await this.$checkIfTableExists('accelerations'));
-
-        // Version 70
-        await this.$executeQuery('ALTER TABLE accelerations MODIFY COLUMN added DATETIME;');
-
-        // Version 77
-        await this.$executeQuery('ALTER TABLE `accelerations` ADD requested datetime DEFAULT NULL');
-      }
-      await this.updateToSchemaVersion(94);
-    }
   }
 
   /**

backend/src/api/mempool-blocks.ts

@@ -382,7 +382,7 @@ class MempoolBlocks {
 
     const ancestors: Ancestor[] = [];
     const descendants: Ancestor[] = [];
-    let ancestor: MempoolTransactionExtended;
+    let ancestor: MempoolTransactionExtended
     for (const cluster of clusters) {
       for (const memberTxid of cluster) {
         const mempoolTx = mempool[memberTxid];
@@ -462,7 +462,7 @@ class MempoolBlocks {
 
       for (let i = 0; i < block.length; i++) {
         const txid = block[i];
-        if (txid in mempool) {
+        if (txid) {
           mempoolTx = mempool[txid];
           // save position in projected blocks
           mempoolTx.position = {
@@ -481,9 +481,6 @@ class MempoolBlocks {
               mempoolTx.acceleratedAt = acceleration?.added;
               mempoolTx.feeDelta = acceleration?.feeDelta;
               for (const ancestor of mempoolTx.ancestors || []) {
-                if (!(ancestor.txid in mempool)) {
-                  continue;
-                }
                 if (!mempool[ancestor.txid].acceleration) {
                   mempool[ancestor.txid].cpfpDirty = true;
                 }
@@ -691,7 +688,7 @@ class MempoolBlocks {
       [pool: string]: { name: string, block: number, vsize: number, accelerations: string[], complete: boolean };
     } = {};
     // prepare a list of accelerations in ascending order (we'll pop items off the end of the list)
-    const accQueue: { acceleration: Acceleration, rate: number, vsize: number }[] = Object.values(accelerations).filter(acc => acc.txid in mempoolCache).map(acc => {
+    const accQueue: { acceleration: Acceleration, rate: number, vsize: number }[] = Object.values(accelerations).map(acc => {
       let vsize = mempoolCache[acc.txid].vsize;
       for (const ancestor of mempoolCache[acc.txid].ancestors || []) {
         vsize += (ancestor.weight / 4);

backend/src/api/mempool.ts

@@ -10,7 +10,6 @@ import bitcoinClient from './bitcoin/bitcoin-client';
 import bitcoinSecondClient from './bitcoin/bitcoin-second-client';
 import rbfCache from './rbf-cache';
 import { Acceleration } from './services/acceleration';
-import accelerationApi from './services/acceleration';
 import redisCache from './redis-cache';
 import blocks from './blocks';
 
@@ -208,7 +207,7 @@ class Mempool {
     return txTimes;
   }
 
-  public async $updateMempool(transactions: string[], accelerations: Record<string, Acceleration> | null, minFeeMempool: string[], minFeeTip: number, pollRate: number): Promise<void> {
+  public async $updateMempool(transactions: string[], accelerations: Acceleration[] | null, minFeeMempool: string[], minFeeTip: number, pollRate: number): Promise<void> {
     logger.debug(`Updating mempool...`);
 
     // warn if this run stalls the main loop for more than 2 minutes
@@ -355,7 +354,7 @@ class Mempool {
     const newTransactionsStripped = newTransactions.map((tx) => Common.stripTransaction(tx));
     this.latestTransactions = newTransactionsStripped.concat(this.latestTransactions).slice(0, 6);
 
-    const accelerationDelta = accelerations != null ? await this.updateAccelerations(accelerations) : [];
+    const accelerationDelta = accelerations != null ? await this.$updateAccelerations(accelerations) : [];
     if (accelerationDelta.length) {
       hasChange = true;
     }
@@ -400,11 +399,58 @@ class Mempool {
     return this.accelerations;
   }
 
-  public updateAccelerations(newAccelerationMap: Record<string, Acceleration>): string[] {
+  public $updateAccelerations(newAccelerations: Acceleration[]): string[] {
     try {
-      const accelerationDelta = accelerationApi.getAccelerationDelta(this.accelerations, newAccelerationMap);
+      const changed: string[] = [];
+
+      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
+          changed.push(acceleration.txid);
+        } else {
+          if (this.accelerations[acceleration.txid].feeDelta !== acceleration.feeDelta) {
+            // feeDelta changed
+            changed.push(acceleration.txid);
+          } else if (this.accelerations[acceleration.txid].pools?.length) {
+            let poolsChanged = false;
+            const pools = new Set();
+            this.accelerations[acceleration.txid].pools.forEach(pool => {
+              pools.add(pool);
+            });
+            acceleration.pools.forEach(pool => {
+              if (!pools.has(pool)) {
+                poolsChanged = true;
+              } else {
+                pools.delete(pool);
+              }
+            });
+            if (pools.size > 0) {
+              poolsChanged = true;
+            }
+            if (poolsChanged) {
+              // pools changed
+              changed.push(acceleration.txid);
+            }
+          }
+        }
+      }
+
+      for (const oldTxid of Object.keys(this.accelerations)) {
+        if (!newAccelerationMap[oldTxid]) {
+          // removed
+          changed.push(oldTxid);
+        }
+      }
+
       this.accelerations = newAccelerationMap;
-      return accelerationDelta;
+
+      return changed;
     } catch (e: any) {
       logger.debug(`Failed to update accelerations: ` + (e instanceof Error ? e.message : e));
       return [];

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

@@ -459,7 +459,7 @@ class MiningRoutes {
         handleError(req, res, 400, 'Acceleration data is not available.');
         return;
       }
-      res.status(200).send(Object.values(accelerationApi.getAccelerations() || {}));
+      res.status(200).send(accelerationApi.accelerations || []);
     } catch (e) {
       handleError(req, res, 500, e instanceof Error ? e.message : e);
     }

backend/src/api/mining/mining.ts

@@ -136,13 +136,9 @@ class Mining {
     poolsStatistics['blockCount'] = blockCount;
 
     const totalBlock24h: number = await BlocksRepository.$blockCount(null, '24h');
-    const totalBlock3d: number = await BlocksRepository.$blockCount(null, '3d');
-    const totalBlock1w: number = await BlocksRepository.$blockCount(null, '1w');
 
     try {
       poolsStatistics['lastEstimatedHashrate'] = await bitcoinClient.getNetworkHashPs(totalBlock24h);
-      poolsStatistics['lastEstimatedHashrate3d'] = await bitcoinClient.getNetworkHashPs(totalBlock3d);
-      poolsStatistics['lastEstimatedHashrate1w'] = await bitcoinClient.getNetworkHashPs(totalBlock1w);
     } catch (e) {
       poolsStatistics['lastEstimatedHashrate'] = 0;
       logger.debug('Bitcoin Core is not available, using zeroed value for current hashrate', logger.tags.mining);

backend/src/api/prices/prices.routes.ts

@@ -1,15 +1,10 @@
 import { Application, Request, Response } from 'express';
 import config from '../../config';
 import pricesUpdater from '../../tasks/price-updater';
-import logger from '../../logger';
-import PricesRepository from '../../repositories/PricesRepository';
 
 class PricesRoutes {
   public initRoutes(app: Application): void {
-    app
-      .get(config.MEMPOOL.API_URL_PREFIX + 'prices', this.$getCurrentPrices.bind(this))
-      .get(config.MEMPOOL.API_URL_PREFIX + 'internal/usd-price-history', this.$getAllPrices.bind(this))
-    ;
+    app.get(config.MEMPOOL.API_URL_PREFIX + 'prices', this.$getCurrentPrices.bind(this));
   }
 
   private $getCurrentPrices(req: Request, res: Response): void {
@@ -19,23 +14,6 @@ class PricesRoutes {
 
     res.json(pricesUpdater.getLatestPrices());
   }
-
-  private async $getAllPrices(req: Request, res: Response): Promise<void> {
-    res.header('Pragma', 'public');
-    res.header('Cache-control', 'public');
-    res.setHeader('Expires', new Date(Date.now() + 360_0000 / config.MEMPOOL.PRICE_UPDATES_PER_HOUR).toUTCString());
-
-    try {
-      const usdPriceHistory = await PricesRepository.$getPricesTimesAndId();
-      const responseData = usdPriceHistory.map(p => {
-        return { time: p.time, USD: p.USD };
-      });
-      res.status(200).json(responseData);
-    } catch (e: any) {
-      logger.err(`Exception ${e} in PricesRoutes::$getAllPrices. Code: ${e.code}. Message: ${e.message}`);
-      res.status(403).send();
-    }
-  }
 }
 
 export default new PricesRoutes();

backend/src/api/services/acceleration.ts

@@ -1,10 +1,7 @@
-import { WebSocket } from 'ws';
 import config from '../../config';
 import logger from '../../logger';
 import { BlockExtended } from '../../mempool.interfaces';
 import axios from 'axios';
-import mempool from '../mempool';
-import websocketHandler from '../websocket-handler';
 
 type MyAccelerationStatus = 'requested' | 'accelerating' | 'done';
 
@@ -40,23 +37,14 @@ export interface AccelerationHistory {
 };
 
 class AccelerationApi {
-  private ws: WebSocket | null = null;
-  private useWebsocket: boolean = config.MEMPOOL.OFFICIAL && config.MEMPOOL_SERVICES.ACCELERATIONS;
-  private startedWebsocketLoop: boolean = false;
-  private websocketConnected: boolean = false;
   private onDemandPollingEnabled = !config.MEMPOOL_SERVICES.ACCELERATIONS;
   private apiPath = config.MEMPOOL.OFFICIAL ? (config.MEMPOOL_SERVICES.API + '/accelerator/accelerations') : (config.EXTERNAL_DATA_SERVER.MEMPOOL_API + '/accelerations');
-  private websocketPath = config.MEMPOOL_SERVICES?.API ? `${config.MEMPOOL_SERVICES.API.replace('https://', 'wss://').replace('http://', 'ws://')}/accelerator/ws` : '/';
-  private _accelerations: Record<string, Acceleration> = {};
+  private _accelerations: Acceleration[] | null = null;
   private lastPoll = 0;
-  private lastPing = Date.now();
-  private lastPong = Date.now();
   private forcePoll = false;
   private myAccelerations: Record<string, { status: MyAccelerationStatus, added: number, acceleration?: Acceleration }> = {};
 
-  public constructor() {}
-
-  public getAccelerations(): Record<string, Acceleration> {
+  public get accelerations(): Acceleration[] | null {
     return this._accelerations;
   }
 
@@ -84,18 +72,11 @@ class AccelerationApi {
     }
   }
 
-  public async $updateAccelerations(): Promise<Record<string, Acceleration> | null> {
-    if (this.useWebsocket && this.websocketConnected) {
-      return this._accelerations;
-    }
+  public async $updateAccelerations(): Promise<Acceleration[] | null> {
     if (!this.onDemandPollingEnabled) {
       const accelerations = await this.$fetchAccelerations();
       if (accelerations) {
-        const latestAccelerations = {};
-        for (const acc of accelerations) {
-          latestAccelerations[acc.txid] = acc;
-        }
-        this._accelerations = latestAccelerations;
+        this._accelerations = accelerations;
         return this._accelerations;
       }
     } else {
@@ -104,7 +85,7 @@ class AccelerationApi {
     return null;
   }
 
-  private async $updateAccelerationsOnDemand(): Promise<Record<string, Acceleration> | null> {
+  private async $updateAccelerationsOnDemand(): Promise<Acceleration[] | null> {
     const shouldUpdate = this.forcePoll
       || this.countMyAccelerationsWithStatus('requested') > 0
       || (this.countMyAccelerationsWithStatus('accelerating') > 0 && this.lastPoll < (Date.now() - (10 * 60 * 1000)));
@@ -139,11 +120,7 @@ class AccelerationApi {
       }
     }
 
-    const latestAccelerations = {};
-    for (const acc of Object.values(this.myAccelerations).map(({ acceleration }) => acceleration).filter(acc => acc) as Acceleration[]) {
-      latestAccelerations[acc.txid] = acc;
-    }
-    this._accelerations = latestAccelerations;
+    this._accelerations = Object.values(this.myAccelerations).map(({ acceleration }) => acceleration).filter(acc => acc) as Acceleration[];
     return this._accelerations;
   }
 
@@ -175,148 +152,6 @@ class AccelerationApi {
     }
     return anyAccelerated;
   }
-
-  // get a list of accelerations that have changed between two sets of accelerations
-  public getAccelerationDelta(oldAccelerationMap: Record<string, Acceleration>, newAccelerationMap: Record<string, Acceleration>): string[] {
-    const changed: string[] = [];
-    const mempoolCache = mempool.getMempool();
-
-    for (const acceleration of Object.values(newAccelerationMap)) {
-      // skip transactions we don't know about
-      if (!mempoolCache[acceleration.txid]) {
-        continue;
-      }
-      if (oldAccelerationMap[acceleration.txid] == null) {
-        // new acceleration
-        changed.push(acceleration.txid);
-      } else {
-        if (oldAccelerationMap[acceleration.txid].feeDelta !== acceleration.feeDelta) {
-          // feeDelta changed
-          changed.push(acceleration.txid);
-        } else if (oldAccelerationMap[acceleration.txid].pools?.length) {
-          let poolsChanged = false;
-          const pools = new Set();
-            oldAccelerationMap[acceleration.txid].pools.forEach(pool => {
-            pools.add(pool);
-          });
-          acceleration.pools.forEach(pool => {
-            if (!pools.has(pool)) {
-              poolsChanged = true;
-            } else {
-              pools.delete(pool);
-            }
-          });
-          if (pools.size > 0) {
-            poolsChanged = true;
-          }
-          if (poolsChanged) {
-            // pools changed
-            changed.push(acceleration.txid);
-          }
-        }
-      }
-    }
-
-    for (const oldTxid of Object.keys(oldAccelerationMap)) {
-      if (!newAccelerationMap[oldTxid]) {
-        // removed
-        changed.push(oldTxid);
-      }
-    }
-
-    return changed;
-  }
-
-  private handleWebsocketMessage(msg: any): void {
-    if (msg?.accelerations !== null) {
-      const latestAccelerations = {};
-      for (const acc of msg?.accelerations || []) {
-        latestAccelerations[acc.txid] = acc;
-      }
-      this._accelerations = latestAccelerations;
-      websocketHandler.handleAccelerationsChanged(this._accelerations);
-    }
-  }
-
-  public async connectWebsocket(): Promise<void> {
-    if (this.startedWebsocketLoop) {
-      return;
-    }
-    while (this.useWebsocket) {
-      this.startedWebsocketLoop = true;
-      if (!this.ws) {
-        this.ws = new WebSocket(this.websocketPath);
-        this.lastPing = 0;
-
-        this.ws.on('open', () => {
-          logger.info(`Acceleration websocket opened to ${this.websocketPath}`);
-          this.websocketConnected = true;
-          this.ws?.send(JSON.stringify({
-            'watch-accelerations': true
-          }));
-        });
-
-        this.ws.on('error', (error) => {
-          let errMsg = `Acceleration websocket error on ${this.websocketPath}: ${error['code']}`;
-          if (error['errors']) {
-            errMsg += ' - ' + error['errors'].join(' - ');
-          }
-          logger.err(errMsg);
-          this.ws = null;
-          this.websocketConnected = false;
-        });
-
-        this.ws.on('close', () => {
-          logger.info('Acceleration websocket closed');
-          this.ws = null;
-          this.websocketConnected = false;
-        });
-
-        this.ws.on('message', (data, isBinary) => {
-          try {
-            const msg = (isBinary ? data : data.toString()) as string;
-            const parsedMsg = msg?.length ? JSON.parse(msg) : null;
-            this.handleWebsocketMessage(parsedMsg);
-          } catch (e) {
-            logger.warn('Failed to parse acceleration websocket message: ' + (e instanceof Error ? e.message : e));
-          }
-        });
-
-        this.ws.on('ping', () => {
-          logger.debug('received ping from acceleration websocket server');
-        });
-
-        this.ws.on('pong', () => {
-          logger.debug('received pong from acceleration websocket server');
-          this.lastPong = Date.now();
-        });
-      } else if (this.websocketConnected) {
-        if (this.lastPing && this.lastPing > this.lastPong && (Date.now() - this.lastPing > 10000)) {
-          logger.warn('No pong received within 10 seconds, terminating connection');
-          try {
-            this.ws?.terminate();
-          } catch (e) {
-            logger.warn('failed to terminate acceleration websocket connection: ' + (e instanceof Error ? e.message : e));
-          } finally {
-            this.ws = null;
-            this.websocketConnected = false;
-            this.lastPing = 0;
-          }
-        } else if (!this.lastPing || (Date.now() - this.lastPing > 30000)) {
-          logger.debug('sending ping to acceleration websocket server');
-          if (this.ws?.readyState === WebSocket.OPEN) {
-            try {
-              this.ws?.ping();
-              this.lastPing = Date.now();
-            } catch (e) {
-              logger.warn('failed to send ping to acceleration websocket server: ' + (e instanceof Error ? e.message : e));
-            }
-          }
-        }
-      }
-      await new Promise(resolve => setTimeout(resolve, 5000));
-    }
-  }
 }
 
 export default new AccelerationApi();

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

@@ -1,26 +0,0 @@
-import { Application, Request, Response } from 'express';
-import config from '../../config';
-import WalletApi from './wallets';
-
-class ServicesRoutes {
-  public initRoutes(app: Application): void {
-    app
-      .get(config.MEMPOOL.API_URL_PREFIX + 'wallet/:walletId', this.$getWallet)
-    ;
-  }
-
-  private async $getWallet(req: Request, res: Response): Promise<void> {
-    try {
-      res.header('Pragma', 'public');
-      res.header('Cache-control', 'public');
-      res.setHeader('Expires', new Date(Date.now() + 1000 * 5).toUTCString());
-      const walletId = req.params.walletId;
-      const wallet = await WalletApi.getWallet(walletId);
-      res.status(200).send(wallet);
-    } catch (e) {
-      res.status(500).send(e instanceof Error ? e.message : e);
-    }
-  }
-}
-
-export default new ServicesRoutes();

backend/src/api/services/wallets.ts

@@ -1,153 +0,0 @@
-import config from '../../config';
-import logger from '../../logger';
-import { IEsploraApi } from '../bitcoin/esplora-api.interface';
-import bitcoinApi from '../bitcoin/bitcoin-api-factory';
-import axios from 'axios';
-import { TransactionExtended } from '../../mempool.interfaces';
-
-interface WalletAddress {
-  address: string;
-  active: boolean;
-  stats: {
-    funded_txo_count: number;
-    funded_txo_sum: number;
-    spent_txo_count: number;
-    spent_txo_sum: number;
-    tx_count: number;
-  };
-  transactions: IEsploraApi.AddressTxSummary[];
-  lastSync: number;
-}
-
-interface Wallet {
-  name: string;
-  addresses: Record<string, WalletAddress>;
-  lastPoll: number;
-}
-
-const POLL_FREQUENCY = 5 * 60 * 1000; // 5 minutes
-
-class WalletApi {
-  private wallets: Record<string, Wallet> = {};
-  private syncing = false;
-
-  constructor() {
-    this.wallets = config.WALLETS.ENABLED ? (config.WALLETS.WALLETS as string[]).reduce((acc, wallet) => {
-      acc[wallet] = { name: wallet, addresses: {}, lastPoll: 0 };
-      return acc;
-    }, {} as Record<string, Wallet>) : {};
-  }
-
-  public getWallet(wallet: string): Record<string, WalletAddress> {
-    return this.wallets?.[wallet]?.addresses || {};
-  }
-
-  // resync wallet addresses from the services backend
-  async $syncWallets(): Promise<void> {
-    if (!config.WALLETS.ENABLED || this.syncing) {
-      return;
-    }
-    this.syncing = true;
-    for (const walletKey of Object.keys(this.wallets)) {
-      const wallet = this.wallets[walletKey];
-      if (wallet.lastPoll < (Date.now() - POLL_FREQUENCY)) {
-        try {
-          const response = await axios.get(config.MEMPOOL_SERVICES.API + `/wallets/${wallet.name}`);
-          const addresses: Record<string, WalletAddress> = response.data;
-          const addressList: WalletAddress[] = Object.values(addresses);
-          // sync all current addresses
-          for (const address of addressList) {
-            await this.$syncWalletAddress(wallet, address);
-          }
-          // remove old addresses
-          for (const address of Object.keys(wallet.addresses)) {
-            if (!addresses[address]) {
-              delete wallet.addresses[address];
-            }
-          }
-          wallet.lastPoll = Date.now();
-          logger.debug(`Synced ${Object.keys(wallet.addresses).length} addresses for wallet ${wallet.name}`);
-        } catch (e) {
-          logger.err(`Error syncing wallet ${wallet.name}: ${(e instanceof Error ? e.message : e)}`);
-        }
-      }
-    }
-    this.syncing = false;
-  }
-
-  // resync address transactions from esplora
-  async $syncWalletAddress(wallet: Wallet, address: WalletAddress): Promise<void> {
-    // fetch full transaction data if the address is new or still active and hasn't been synced in the last hour
-    const refreshTransactions = !wallet.addresses[address.address] || (address.active && (Date.now() - wallet.addresses[address.address].lastSync) > 60 * 60 * 1000);
-    if (refreshTransactions) {
-      try {
-        const summary = await bitcoinApi.$getAddressTransactionSummary(address.address);
-        const addressInfo = await bitcoinApi.$getAddress(address.address);
-        const walletAddress: WalletAddress = {
-          address: address.address,
-          active: address.active,
-          transactions: summary,
-          stats: addressInfo.chain_stats,
-          lastSync: Date.now(),
-        };
-        wallet.addresses[address.address] = walletAddress;
-      } catch (e) {
-        logger.err(`Error syncing wallet address ${address.address}: ${(e instanceof Error ? e.message : e)}`);
-      }
-    }
-  }
-
-  // check a new block for transactions that affect wallet address balances, and add relevant transactions to wallets
-  processBlock(block: IEsploraApi.Block, blockTxs: TransactionExtended[]): Record<string, IEsploraApi.Transaction[]> {
-    const walletTransactions: Record<string, IEsploraApi.Transaction[]> = {};
-    for (const walletKey of Object.keys(this.wallets)) {
-      const wallet = this.wallets[walletKey];
-      walletTransactions[walletKey] = [];
-      for (const tx of blockTxs) {
-        const funded: Record<string, number> = {};
-        const spent: Record<string, number> = {};
-        const fundedCount: Record<string, number> = {};
-        const spentCount: Record<string, number> = {};
-        let anyMatch = false;
-        for (const vin of tx.vin) {
-          const address = vin.prevout?.scriptpubkey_address;
-          if (address && wallet.addresses[address]) {
-            anyMatch = true;
-            spent[address] = (spent[address] ?? 0) + (vin.prevout?.value ?? 0);
-            spentCount[address] = (spentCount[address] ?? 0) + 1;
-          }
-        }
-        for (const vout of tx.vout) {
-          const address = vout.scriptpubkey_address;
-          if (address && wallet.addresses[address]) {
-            anyMatch = true;
-            funded[address] = (funded[address] ?? 0) + (vout.value ?? 0);
-            fundedCount[address] = (fundedCount[address] ?? 0) + 1;
-          }
-        }
-        for (const address of Object.keys({ ...funded, ...spent })) {
-          // update address stats
-          wallet.addresses[address].stats.tx_count++;
-          wallet.addresses[address].stats.funded_txo_count += fundedCount[address] || 0;
-          wallet.addresses[address].stats.spent_txo_count += spentCount[address] || 0;
-          wallet.addresses[address].stats.funded_txo_sum += funded[address] || 0;
-          wallet.addresses[address].stats.spent_txo_sum += spent[address] || 0;
-          // add tx to summary
-          const txSummary: IEsploraApi.AddressTxSummary = {
-            txid: tx.txid,
-            value: (funded[address] ?? 0) - (spent[address] ?? 0),
-            height: block.height,
-            time: block.timestamp,
-          };
-          wallet.addresses[address].transactions?.push(txSummary);
-        }
-        if (anyMatch) {
-          walletTransactions[walletKey].push(tx);
-        }
-      }
-    }
-    return walletTransactions;
-  }
-}
-
-export default new WalletApi();

backend/src/api/websocket-handler.ts

@@ -3,7 +3,8 @@ import * as WebSocket from 'ws';
 import {
   BlockExtended, TransactionExtended, MempoolTransactionExtended, WebsocketResponse,
   OptimizedStatistic, ILoadingIndicators, GbtCandidates, TxTrackingInfo,
-  MempoolDelta, MempoolDeltaTxids
+  MempoolDelta, MempoolDeltaTxids,
+  TransactionCompressed
 } from '../mempool.interfaces';
 import blocks from './blocks';
 import memPool from './mempool';
@@ -22,13 +23,11 @@ import BlocksSummariesRepository from '../repositories/BlocksSummariesRepository
 import Audit from './audit';
 import priceUpdater from '../tasks/price-updater';
 import { ApiPrice } from '../repositories/PricesRepository';
-import { Acceleration } from './services/acceleration';
 import accelerationApi from './services/acceleration';
 import mempool from './mempool';
 import statistics from './statistics/statistics';
 import accelerationRepository from '../repositories/AccelerationRepository';
 import bitcoinApi from './bitcoin/bitcoin-api-factory';
-import walletApi from './services/wallets';
 
 interface AddressTransactions {
   mempool: MempoolTransactionExtended[],
@@ -61,8 +60,6 @@ class WebsocketHandler {
   private lastRbfSummary: ReplacementInfo[] | null = null;
   private mempoolSequence: number = 0;
 
-  private accelerations: Record<string, Acceleration> = {};
-
   constructor() { }
 
   addWebsocketServer(wss: WebSocket.Server) {
@@ -311,14 +308,6 @@ class WebsocketHandler {
             }
           }
 
-          if (parsedMessage && parsedMessage['track-wallet']) {
-            if (parsedMessage['track-wallet'] === 'stop') {
-              client['track-wallet'] = null;
-            } else {
-              client['track-wallet'] = parsedMessage['track-wallet'];
-            }
-          }
-
           if (parsedMessage && parsedMessage['track-asset']) {
             if (/^[a-fA-F0-9]{64}$/.test(parsedMessage['track-asset'])) {
               client['track-asset'] = parsedMessage['track-asset'];
@@ -329,6 +318,7 @@ class WebsocketHandler {
 
           if (parsedMessage && parsedMessage['track-mempool-block'] !== undefined) {
             if (Number.isInteger(parsedMessage['track-mempool-block']) && parsedMessage['track-mempool-block'] >= 0) {
+              client['track-mempool-blocks'] = undefined;
               const index = parsedMessage['track-mempool-block'];
               client['track-mempool-block'] = index;
               const mBlocksWithTransactions = mempoolBlocks.getMempoolBlocksWithTransactions();
@@ -338,7 +328,31 @@ class WebsocketHandler {
                 blockTransactions: (mBlocksWithTransactions[index]?.transactions || []).map(mempoolBlocks.compressTx),
               });
             } else {
-              client['track-mempool-block'] = null;
+              client['track-mempool-block'] = undefined;
+            }
+          }
+
+          if (parsedMessage && parsedMessage['track-mempool-blocks'] !== undefined) {
+            if (parsedMessage['track-mempool-blocks'].length > 0) {
+              client['track-mempool-block'] = undefined;
+              const indices: number[] = [];
+              const mBlocksWithTransactions = mempoolBlocks.getMempoolBlocksWithTransactions();
+              const updates: { index: number, sequence: number, blockTransactions: TransactionCompressed[] }[] = [];
+              for (const i of parsedMessage['track-mempool-blocks']) {
+                const index = parseInt(i);
+                if (Number.isInteger(index) && index >= 0) {
+                  indices.push(index);
+                  updates.push({
+                    index: index,
+                    sequence: this.mempoolSequence,
+                    blockTransactions: (mBlocksWithTransactions[index]?.transactions || []).map(mempoolBlocks.compressTx),
+                  });
+                }
+              }
+              client['track-mempool-blocks'] = indices;
+              response['projected-block-transactions'] = JSON.stringify(updates);
+            } else {
+              client['track-mempool-blocks'] = undefined;
             }
           }
 
@@ -498,42 +512,6 @@ class WebsocketHandler {
     }
   }
 
-  handleAccelerationsChanged(accelerations: Record<string, Acceleration>): void {
-    if (!this.webSocketServers.length) {
-      throw new Error('No WebSocket.Server has been set');
-    }
-
-    const websocketAccelerationDelta = accelerationApi.getAccelerationDelta(this.accelerations, accelerations);
-    this.accelerations = accelerations;
-
-    if (!websocketAccelerationDelta.length) {
-      return;
-    }
-
-    // pre-compute acceleration delta
-    const accelerationUpdate = {
-      added: websocketAccelerationDelta.map(txid => accelerations[txid]).filter(acc => acc != null),
-      removed: websocketAccelerationDelta.filter(txid => !accelerations[txid]),
-    };
-
-    try {
-      const response = JSON.stringify({
-        accelerations: accelerationUpdate,
-      });
-
-      for (const server of this.webSocketServers) {
-        server.clients.forEach((client) => {
-          if (client.readyState !== WebSocket.OPEN) {
-            return;
-          }
-          client.send(response);
-        });
-      }
-    } catch (e) {
-      logger.debug(`Error sending acceleration update to websocket clients: ${e}`);
-    }
-  }
-
   handleReorg(): void {
     if (!this.webSocketServers.length) {
       throw new Error('No WebSocket.Server have been set');
@@ -610,7 +588,7 @@ class WebsocketHandler {
     const vBytesPerSecond = memPool.getVBytesPerSecond();
     const rbfTransactions = Common.findRbfTransactions(newTransactions, recentlyDeletedTransactions.flat());
     const da = difficultyAdjustment.getDifficultyAdjustment();
-    const accelerations = accelerationApi.getAccelerations();
+    const accelerations = memPool.getAccelerations();
     memPool.handleRbfTransactions(rbfTransactions);
     const rbfChanges = rbfCache.getRbfChanges();
     let rbfReplacements;
@@ -718,13 +696,10 @@ class WebsocketHandler {
     const addressCache = this.makeAddressCache(newTransactions);
     const removedAddressCache = this.makeAddressCache(deletedTransactions);
 
-    const websocketAccelerationDelta = accelerationApi.getAccelerationDelta(this.accelerations, accelerations);
-    this.accelerations = accelerations;
-
     // pre-compute acceleration delta
     const accelerationUpdate = {
-      added: websocketAccelerationDelta.map(txid => accelerations[txid]).filter(acc => acc != null),
-      removed: websocketAccelerationDelta.filter(txid => !accelerations[txid]),
+      added: accelerationDelta.map(txid => accelerations[txid]).filter(acc => acc != null),
+      removed: accelerationDelta.filter(txid => !accelerations[txid]),
     };
 
     // TODO - Fix indentation after PR is merged
@@ -961,6 +936,19 @@ class WebsocketHandler {
             delta: mBlockDeltas[index],
           });
         }
+      } else if (client['track-mempool-blocks']?.length && memPool.isInSync()) {
+        const indices = client['track-mempool-blocks'];
+        const updates: string[] = [];
+        for (const index of indices) {
+          if (mBlockDeltas[index]) {
+            updates.push(getCachedResponse(`projected-block-transactions-${index}`, {
+              index: index,
+              sequence: this.mempoolSequence,
+              delta: mBlockDeltas[index],
+            }));
+          }
+        }
+        response['projected-block-transactions'] = '[' + updates.join(',') + ']';
       }
 
       if (client['track-rbf'] === 'all' && rbfReplacements) {
@@ -1163,9 +1151,6 @@ class WebsocketHandler {
       replaced: replacedTransactions,
     };
 
-    // check for wallet transactions
-    const walletTransactions = config.WALLETS.ENABLED ? walletApi.processBlock(block, transactions) : [];
-
     const responseCache = { ...this.socketData };
     function getCachedResponse(key, data): string {
       if (!responseCache[key]) {
@@ -1360,6 +1345,27 @@ class WebsocketHandler {
             });
           }
         }
+      } else if (client['track-mempool-blocks']?.length && memPool.isInSync()) {
+        const indices = client['track-mempool-blocks'];
+        const updates: string[] = [];
+        for (const index of indices) {
+          if (mBlockDeltas && mBlockDeltas[index] && mBlocksWithTransactions[index]?.transactions?.length) {
+            if (mBlockDeltas[index].added.length > (mBlocksWithTransactions[index]?.transactions.length / 2)) {
+              updates.push(getCachedResponse(`projected-block-transactions-full-${index}`, {
+                index: index,
+                sequence: this.mempoolSequence,
+                blockTransactions: mBlocksWithTransactions[index].transactions.map(mempoolBlocks.compressTx),
+              }));
+            } else {
+              updates.push(getCachedResponse(`projected-block-transactions-delta-${index}`, {
+                index: index,
+                sequence: this.mempoolSequence,
+                delta: mBlockDeltas[index],
+              }));
+            }
+          }
+        }
+        response['projected-block-transactions'] = '[' + updates.join(',') + ']';
       }
 
       if (client['track-mempool-txids']) {
@@ -1370,11 +1376,6 @@ class WebsocketHandler {
         response['mempool-transactions'] = getCachedResponse('mempool-transactions', mempoolDelta);
       }
 
-      if (client['track-wallet']) {
-        const trackedWallet = client['track-wallet'];
-        response['wallet-transactions'] = getCachedResponse(`wallet-transactions-${trackedWallet}`, walletTransactions[trackedWallet] ?? {});
-      }
-
       if (Object.keys(response).length) {
         client.send(this.serializeResponse(response));
       }

backend/src/config.ts

@@ -162,10 +162,6 @@ interface IConfig {
     PAID: boolean;
     API_KEY: string;
   },
-  WALLETS: {
-    ENABLED: boolean;
-    WALLETS: string[];
-  }
 }
 
 const defaults: IConfig = {
@@ -328,10 +324,6 @@ const defaults: IConfig = {
     'PAID': false,
     'API_KEY': '',
   },
-  'WALLETS': {
-    'ENABLED': false,
-    'WALLETS': [],
-  },
 };
 
 class Config implements IConfig {
@@ -353,7 +345,6 @@ class Config implements IConfig {
   MEMPOOL_SERVICES: IConfig['MEMPOOL_SERVICES'];
   REDIS: IConfig['REDIS'];
   FIAT_PRICE: IConfig['FIAT_PRICE'];
-  WALLETS: IConfig['WALLETS'];
 
   constructor() {
     const configs = this.merge(configFromFile, defaults);
@@ -375,7 +366,6 @@ class Config implements IConfig {
     this.MEMPOOL_SERVICES = configs.MEMPOOL_SERVICES;
     this.REDIS = configs.REDIS;
     this.FIAT_PRICE = configs.FIAT_PRICE;
-    this.WALLETS = configs.WALLETS;
   }
 
   merge = (...objects: object[]): IConfig => {

backend/src/index.ts

@@ -32,7 +32,6 @@ import pricesRoutes from './api/prices/prices.routes';
 import miningRoutes from './api/mining/mining-routes';
 import liquidRoutes from './api/liquid/liquid.routes';
 import bitcoinRoutes from './api/bitcoin/bitcoin.routes';
-import servicesRoutes from './api/services/services-routes';
 import fundingTxFetcher from './tasks/lightning/sync-tasks/funding-tx-fetcher';
 import forensicsService from './tasks/lightning/forensics.service';
 import priceUpdater from './tasks/price-updater';
@@ -47,7 +46,6 @@ import bitcoinSecondClient from './api/bitcoin/bitcoin-second-client';
 import accelerationRoutes from './api/acceleration/acceleration.routes';
 import aboutRoutes from './api/about.routes';
 import mempoolBlocks from './api/mempool-blocks';
-import walletApi from './api/services/wallets';
 
 class Server {
   private wss: WebSocket.Server | undefined;
@@ -233,17 +231,13 @@ class Server {
       const newMempool = await bitcoinApi.$getRawMempool();
       const minFeeMempool = memPool.limitGBT ? await bitcoinSecondClient.getRawMemPool() : null;
       const minFeeTip = memPool.limitGBT ? await bitcoinSecondClient.getBlockCount() : -1;
-      const latestAccelerations = await accelerationApi.$updateAccelerations();
+      const newAccelerations = await accelerationApi.$updateAccelerations();
       const numHandledBlocks = await blocks.$updateBlocks();
       const pollRate = config.MEMPOOL.POLL_RATE_MS * (indexer.indexerIsRunning() ? 10 : 1);
       if (numHandledBlocks === 0) {
-        await memPool.$updateMempool(newMempool, latestAccelerations, minFeeMempool, minFeeTip, pollRate);
+        await memPool.$updateMempool(newMempool, newAccelerations, minFeeMempool, minFeeTip, pollRate);
       }
       indexer.$run();
-      if (config.WALLETS.ENABLED) {
-        // might take a while, so run in the background
-        walletApi.$syncWallets();
-      }
       if (config.FIAT_PRICE.ENABLED) {
         priceUpdater.$run();
       }
@@ -318,10 +312,8 @@ class Server {
       priceUpdater.setRatesChangedCallback(websocketHandler.handleNewConversionRates.bind(websocketHandler));
     }
     loadingIndicators.setProgressChangedCallback(websocketHandler.handleLoadingChanged.bind(websocketHandler));
-
-    accelerationApi.connectWebsocket();
   }
-
+  
   setUpHttpApiRoutes(): void {
     bitcoinRoutes.initRoutes(this.app);
     bitcoinCoreRoutes.initRoutes(this.app);
@@ -343,9 +335,6 @@ class Server {
     if (config.MEMPOOL_SERVICES.ACCELERATIONS) {
       accelerationRoutes.initRoutes(this.app);
     }
-    if (config.WALLETS.ENABLED) {
-      servicesRoutes.initRoutes(this.app);
-    }
     if (!config.MEMPOOL.OFFICIAL) {
       aboutRoutes.initRoutes(this.app);
     }

backend/src/repositories/BlocksRepository.ts

@@ -501,7 +501,7 @@ class BlocksRepository {
     }
 
     query += ` ORDER BY height DESC
-      LIMIT 100`;
+      LIMIT 10`;
 
     try {
       const [rows]: any[] = await DB.query(query, params);

frontend/custom-bitb-config.json

@@ -1,48 +0,0 @@
-{
-  "theme": "wiz",
-  "enterprise": "bitb",
-  "branding": {
-    "name": "bitb",
-    "title": "BITB",
-    "site_id": 20,
-    "header_img": "/resources/bitblogo.svg",
-    "footer_img": "/resources/bitblogo.svg"
-  },
-  "dashboard": {
-    "widgets": [
-      {
-        "component": "fees",
-        "mobileOrder": 4
-      },
-      {
-        "component": "walletBalance",
-        "mobileOrder": 1,
-        "props": {
-          "wallet": "BITB"
-        }
-      },
-      {
-        "component": "goggles",
-        "mobileOrder": 5
-      },
-      {
-        "component": "wallet",
-        "mobileOrder": 2,
-        "props": {
-          "wallet": "BITB",
-          "period": "all"
-        }
-      },
-      {
-        "component": "blocks"
-      },
-      {
-        "component": "walletTransactions",
-        "mobileOrder": 3,
-        "props": {
-          "wallet": "BITB"
-        }
-      }
-    ]
-  }
-}

frontend/custom-meta-config.json

@@ -1,51 +0,0 @@
-{
-  "theme": "contrast",
-  "enterprise": "meta",
-  "branding": {
-    "name": "metaplanet",
-    "title": "Metaplanet",
-    "site_id": 21,
-    "header_img": "/resources/metalogo.svg",
-    "footer_img": "/resources/metalogo.svg"
-  },
-  "dashboard": {
-    "widgets": [
-      {
-        "component": "fees",
-        "mobileOrder": 4
-      },
-      {
-        "component": "walletBalance",
-        "mobileOrder": 1,
-        "props": {
-          "wallet": "3350"
-        }
-      },
-      {
-        "component": "twitter",
-        "mobileOrder": 5,
-        "props": {
-          "handle": "Metaplanet_JP"
-        }
-      },
-      {
-        "component": "wallet",
-        "mobileOrder": 2,
-        "props": {
-          "wallet": "3350",
-          "period": "all"
-        }
-      },
-      {
-        "component": "blocks"
-      },
-      {
-        "component": "walletTransactions",
-        "mobileOrder": 3,
-        "props": {
-          "wallet": "3350"
-        }
-      }
-    ]
-  }
-}

frontend/custom-river-config.json

@@ -1,51 +0,0 @@
-{
-  "theme": "wiz",
-  "enterprise": "river",
-  "branding": {
-    "name": "river",
-    "title": "river",
-    "site_id": 22,
-    "header_img": "/resources/riverlogo.svg",
-    "footer_img": "/resources/riverlogo.svg"
-  },
-  "dashboard": {
-    "widgets": [
-      {
-        "component": "fees",
-        "mobileOrder": 4
-      },
-      {
-        "component": "walletBalance",
-        "mobileOrder": 1,
-        "props": {
-          "wallet": "RIVER"
-        }
-      },
-      {
-        "component": "twitter",
-        "mobileOrder": 5,
-        "props": {
-          "handle": "River"
-        }
-      },
-      {
-        "component": "wallet",
-        "mobileOrder": 2,
-        "props": {
-          "wallet": "RIVER",
-          "period": "all"
-        }
-      },
-      {
-        "component": "blocks"
-      },
-      {
-        "component": "walletTransactions",
-        "mobileOrder": 3,
-        "props": {
-          "wallet": "RIVER"
-        }
-      }
-    ]
-  }
-}

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

@@ -1,15 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { AppPreloadingStrategy } from '@app/app.preloading-strategy'
-import { BlockViewComponent } from '@components/block-view/block-view.component';
-import { EightBlocksComponent } from '@components/eight-blocks/eight-blocks.component';
-import { MempoolBlockViewComponent } from '@components/mempool-block-view/mempool-block-view.component';
-import { ClockComponent } from '@components/clock/clock.component';
-import { StatusViewComponent } from '@components/status-view/status-view.component';
-import { AddressGroupComponent } from '@components/address-group/address-group.component';
-import { TrackerComponent } from '@components/tracker/tracker.component';
-import { AccelerateCheckout } from '@components/accelerate-checkout/accelerate-checkout.component';
-import { TrackerGuard } from '@app/route-guards';
+import { AppPreloadingStrategy } from './app.preloading-strategy'
+import { BlockViewComponent } from './components/block-view/block-view.component';
+import { EightBlocksComponent } from './components/eight-blocks/eight-blocks.component';
+import { EightMempoolComponent } from './components/eight-mempool/eight-mempool.component';
+import { MempoolBlockViewComponent } from './components/mempool-block-view/mempool-block-view.component';
+import { ClockComponent } from './components/clock/clock.component';
+import { StatusViewComponent } from './components/status-view/status-view.component';
+import { AddressGroupComponent } from './components/address-group/address-group.component';
+import { TrackerComponent } from './components/tracker/tracker.component';
+import { AccelerateCheckout } from './components/accelerate-checkout/accelerate-checkout.component';
+import { TrackerGuard } from './route-guards';
 
 const browserWindow = window || {};
 // @ts-ignore
@@ -22,50 +23,12 @@ let routes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
         data: { preload: true },
       },
       {
         path: '',
-        loadChildren: () => import('@app/master-page.module').then(m => m.MasterPageModule),
-        data: { preload: true },
-      },
-      {
-        path: 'widget/wallet',
-        children: [],
-        component: AddressGroupComponent,
-        data: {
-          networkSpecific: true,
-        }
-      },
-      {
-        path: 'status',
-        data: { networks: ['bitcoin', 'liquid'] },
-        component: StatusViewComponent
-      },
-      {
-        path: '',
-        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
-        data: { preload: true },
-      },
-      {
-        path: '**',
-        redirectTo: '/testnet'
-      },
-    ]
-  },
-  {
-    path: 'testnet4',
-    children: [
-      {
-        path: '',
-        pathMatch: 'full',
-        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
-        data: { preload: true },
-      },
-      {
-        path: '',
-        loadChildren: () => import('@app/master-page.module').then(m => m.MasterPageModule),
+        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
         data: { preload: true },
       },
       {
@@ -83,7 +46,45 @@ let routes: Routes = [
       },
       {
         path: '',
-        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        data: { preload: true },
+      },
+      {
+        path: '**',
+        redirectTo: '/testnet'
+      },
+    ]
+  },
+  {
+    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 },
       },
       {
@@ -103,16 +104,16 @@ let routes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
         data: { preload: true },
       },
       {
         path: '',
-        loadChildren: () => import('@app/master-page.module').then(m => m.MasterPageModule),
+        loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
         data: { preload: true },
       },
       {
-        path: 'widget/wallet',
+        path: 'wallet',
         children: [],
         component: AddressGroupComponent,
         data: {
@@ -126,7 +127,7 @@ let routes: Routes = [
       },
       {
         path: '',
-        loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+        loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
         data: { preload: true },
       },
       {
@@ -138,22 +139,22 @@ let routes: Routes = [
   {
     path: '',
     pathMatch: 'full',
-    loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+    loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
     data: { preload: true },
   },
   {
     path: 'tx',
     canMatch: [TrackerGuard],
     runGuardsAndResolvers: 'always',
-    loadChildren: () => import('@components/tracker/tracker.module').then(m => m.TrackerModule),
+    loadChildren: () => import('./components/tracker/tracker.module').then(m => m.TrackerModule),
   },
   {
     path: '',
-    loadChildren: () => import('@app/master-page.module').then(m => m.MasterPageModule),
+    loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
     data: { preload: true },
   },
   {
-    path: 'widget/wallet',
+    path: 'wallet',
     children: [],
     component: AddressGroupComponent,
     data: {
@@ -165,19 +166,19 @@ let routes: Routes = [
     children: [
       {
         path: '',
-        loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
       {
         path: 'testnet',
-        loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
       {
         path: 'testnet4',
-        loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
       {
         path: 'signet',
-        loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
+        loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
       },
     ],
   },
@@ -205,6 +206,10 @@ let routes: Routes = [
     path: 'view/blocks',
     component: EightBlocksComponent,
   },
+  {
+    path: 'view/mempool-blocks',
+    component: EightMempoolComponent,
+  },
   {
     path: 'status',
     data: { networks: ['bitcoin', 'liquid'] },
@@ -212,7 +217,7 @@ let routes: Routes = [
   },
   {
     path: '',
-    loadChildren: () => import('@app/bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
+    loadChildren: () => import('./bitcoin-graphs.module').then(m => m.BitcoinGraphsModule),
     data: { preload: true },
   },
 ];
@@ -225,16 +230,16 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
         {
           path: '',
           pathMatch: 'full',
-          loadChildren: () => import('@app/liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
+          loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
           data: { preload: true },
         },
         {
           path: '',
-          loadChildren: () => import ('@app/liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule),
+          loadChildren: () => import ('./liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule),
           data: { preload: true },
         },
         {
-          path: 'widget/wallet',
+          path: 'wallet',
           children: [],
           component: AddressGroupComponent,
           data: {
@@ -248,7 +253,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
         },
         {
           path: '',
-          loadChildren: () => import('@app/liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
+          loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
           data: { preload: true },
         },
         {
@@ -260,16 +265,16 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
     {
       path: '',
       pathMatch: 'full',
-      loadChildren: () => import('@app/liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
+      loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
       data: { preload: true },
     },
     {
       path: '',
-      loadChildren: () => import ('@app/liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule),
+      loadChildren: () => import ('./liquid/liquid-master-page.module').then(m => m.LiquidMasterPageModule),
       data: { preload: true },
     },
     {
-      path: 'widget/wallet',
+      path: 'wallet',
       children: [],
       component: AddressGroupComponent,
       data: {
@@ -281,11 +286,11 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
       children: [
         {
           path: '',
-          loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
+          loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
         },
         {
           path: 'testnet',
-          loadChildren: () => import('@app/previews.module').then(m => m.PreviewsModule)
+          loadChildren: () => import('./previews.module').then(m => m.PreviewsModule)
         },
       ],
     },
@@ -296,7 +301,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
     },
     {
       path: '',
-      loadChildren: () => import('@app/liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
+      loadChildren: () => import('./liquid/liquid-graphs.module').then(m => m.LiquidGraphsModule),
       data: { preload: true },
     },
   ];

frontend/src/app/app.module.server.ts

@@ -2,11 +2,11 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 
-import { ZONE_SERVICE } from '@app/injection-tokens';
+import { ZONE_SERVICE } from './injection-tokens';
 import { AppModule } from './app.module';
-import { AppComponent } from '@components/app/app.component';
-import { HttpCacheInterceptor } from '@app/services/http-cache.interceptor';
-import { ZoneService } from '@app/services/zone.service';
+import { AppComponent } from './components/app/app.component';
+import { HttpCacheInterceptor } from './services/http-cache.interceptor';
+import { ZoneService } from './services/zone.service';
 
 
 @NgModule({
@@ -20,4 +20,4 @@ import { ZoneService } from '@app/services/zone.service';
   ],
   bootstrap: [AppComponent],
 })
-export class AppServerModule {}
+export class AppServerModule {}

frontend/src/app/app.module.ts

@@ -2,33 +2,33 @@ import { BrowserModule } from '@angular/platform-browser';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ZONE_SERVICE } from '@app/injection-tokens';
+import { ZONE_SERVICE } from './injection-tokens';
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from '@components/app/app.component';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
-import { OrdApiService } from '@app/services/ord-api.service';
-import { StateService } from '@app/services/state.service';
-import { CacheService } from '@app/services/cache.service';
-import { PriceService } from '@app/services/price.service';
-import { EnterpriseService } from '@app/services/enterprise.service';
-import { WebsocketService } from '@app/services/websocket.service';
-import { AudioService } from '@app/services/audio.service';
-import { PreloadService } from '@app/services/preload.service';
-import { SeoService } from '@app/services/seo.service';
-import { OpenGraphService } from '@app/services/opengraph.service';
-import { ZoneService } from '@app/services/zone-shim.service';
-import { SharedModule } from '@app/shared/shared.module';
-import { StorageService } from '@app/services/storage.service';
-import { HttpCacheInterceptor } from '@app/services/http-cache.interceptor';
-import { LanguageService } from '@app/services/language.service';
-import { ThemeService } from '@app/services/theme.service';
-import { TimeService } from '@app/services/time.service';
-import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
-import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
-import { ShortenStringPipe } from '@app/shared/pipes/shorten-string-pipe/shorten-string.pipe';
-import { CapAddressPipe } from '@app/shared/pipes/cap-address-pipe/cap-address-pipe';
-import { AppPreloadingStrategy } from '@app/app.preloading-strategy';
-import { ServicesApiServices } from '@app/services/services-api.service';
+import { AppComponent } from './components/app/app.component';
+import { ElectrsApiService } from './services/electrs-api.service';
+import { OrdApiService } from './services/ord-api.service';
+import { StateService } from './services/state.service';
+import { CacheService } from './services/cache.service';
+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';
+import { SharedModule } from './shared/shared.module';
+import { StorageService } from './services/storage.service';
+import { HttpCacheInterceptor } from './services/http-cache.interceptor';
+import { LanguageService } from './services/language.service';
+import { ThemeService } from './services/theme.service';
+import { TimeService } from './services/time.service';
+import { FiatShortenerPipe } from './shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from './shared/pipes/fiat-currency.pipe';
+import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
+import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
+import { AppPreloadingStrategy } from './app.preloading-strategy';
+import { ServicesApiServices } from './services/services-api.service';
 import { DatePipe } from '@angular/common';
 
 const providers = [

frontend/src/app/bitcoin-graphs.module.ts

@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
-import { MasterPageComponent } from '@components/master-page/master-page.component';
+import { MasterPageComponent } from './components/master-page/master-page.component';
 
 const routes: Routes = [
   {
     path: '',
     component: MasterPageComponent,
-    loadChildren: () => import('@app/graphs/graphs.module').then(m => m.GraphsModule),
+    loadChildren: () => import('./graphs/graphs.module').then(m => m.GraphsModule),
     data: { preload: true },
   }
 ];

frontend/src/app/bitcoin.utils.ts

@@ -1,5 +1,5 @@
-import { Transaction, Vin } from '@interfaces/electrs.interface';
-import { Hash } from '@app/shared/sha256';
+import { Transaction, Vin } from './interfaces/electrs.interface';
+import { Hash } from './shared/sha256';
 
 const P2SH_P2WPKH_COST = 21 * 4; // the WU cost for the non-witness part of P2SH-P2WPKH
 const P2SH_P2WSH_COST  = 35 * 4; // the WU cost for the non-witness part of P2SH-P2WSH
@@ -303,4 +303,4 @@ export async function calcScriptHash$(script: string): Promise<string> {
   return hashArray
     .map((bytes) => bytes.toString(16).padStart(2, '0'))
     .join('');
-}
+}

frontend/src/app/components/about/about-sponsors.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { EnterpriseService } from '@app/services/enterprise.service';
+import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
   selector: 'app-about-sponsors',

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

@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
-import { WebsocketService } from '@app/services/websocket.service';
-import { SeoService } from '@app/services/seo.service';
-import { OpenGraphService } from '@app/services/opengraph.service';
-import { StateService } from '@app/services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { OpenGraphService } from '../../services/opengraph.service';
+import { StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
-import { ApiService } from '@app/services/api.service';
-import { IBackendInfo } from '@interfaces/websocket.interface';
+import { ApiService } from '../../services/api.service';
+import { IBackendInfo } from '../../interfaces/websocket.interface';
 import { Router, ActivatedRoute } from '@angular/router';
 import { map, share, tap } from 'rxjs/operators';
-import { ITranslators } from '@interfaces/node-api.interface';
+import { ITranslators } from '../../interfaces/node-api.interface';
 import { DOCUMENT } from '@angular/common';
-import { EnterpriseService } from '@app/services/enterprise.service';
+import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
   selector: 'app-about',

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

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
-import { AboutComponent } from '@components/about/about.component';
-import { AboutSponsorsComponent } from '@components/about/about-sponsors.component';
-import { SharedModule } from '@app/shared/shared.module';
+import { AboutComponent } from './about.component';
+import { AboutSponsorsComponent } from './about-sponsors.component';
+import { SharedModule } from '../../shared/shared.module';
 
 const routes: Routes = [
   {

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

@@ -172,6 +172,10 @@
   background-color: var(--tertiary);
 }
 
+.btn-small-height {
+	line-height: 1;
+}
+
 .summary-row {
   display: flex;
   flex-direction: row;

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

@@ -1,16 +1,16 @@
 /* eslint-disable no-console */
 import { Component, OnInit, OnDestroy, Output, EventEmitter, Input, ChangeDetectorRef, SimpleChanges, HostListener } from '@angular/core';
 import { Subscription, tap, of, catchError, Observable, switchMap } from 'rxjs';
-import { ServicesApiServices } from '@app/services/services-api.service';
-import { md5 } from '@app/shared/common.utils';
-import { StateService } from '@app/services/state.service';
-import { AudioService } from '@app/services/audio.service';
-import { ETA, EtaService } from '@app/services/eta.service';
-import { Transaction } from '@interfaces/electrs.interface';
-import { MiningStats } from '@app/services/mining.service';
-import { IAuth, AuthServiceMempool } from '@app/services/auth.service';
-import { EnterpriseService } from '@app/services/enterprise.service';
-import { ApiService } from '@app/services/api.service';
+import { ServicesApiServices } from '../../services/services-api.service';
+import { md5, insecureRandomUUID } from '../../shared/common.utils';
+import { StateService } from '../../services/state.service';
+import { AudioService } from '../../services/audio.service';
+import { ETA, EtaService } from '../../services/eta.service';
+import { Transaction } from '../../interfaces/electrs.interface';
+import { MiningStats } from '../../services/mining.service';
+import { IAuth, AuthServiceMempool } from '../../services/auth.service';
+import { EnterpriseService } from '../../services/enterprise.service';
+import { ApiService } from '../../services/api.service';
 import { isDevMode } from '@angular/core';
 
 export type PaymentMethod = 'balance' | 'bitcoin' | 'cashapp' | 'applePay' | 'googlePay';
@@ -84,7 +84,13 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   timePaid: number = 0; // time acceleration requested
   math = Math;
   isMobile: boolean = window.innerWidth <= 767.98;
-  isProdDomain = false;
+  isProdDomain = ['mempool.space',
+    'mempool-staging.va1.mempool.space',
+    'mempool-staging.fmt.mempool.space',
+    'mempool-staging.fra.mempool.space',
+    'mempool-staging.tk7.mempool.space',
+    'mempool-staging.sg1.mempool.space'
+   ].indexOf(document.location.hostname) > -1;
 
   private _step: CheckoutStep = 'summary';
   simpleMode: boolean = true;
@@ -94,6 +100,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   auth: IAuth | null = null;
 
   // accelerator stuff
+  accelerationUUID: string;
   accelerationSubscription: Subscription;
   difficultySubscription: Subscription;
   estimateSubscription: Subscription;
@@ -136,7 +143,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     private authService: AuthServiceMempool,
     private enterpriseService: EnterpriseService,
   ) {
-    this.isProdDomain = this.stateService.env.PROD_DOMAINS.indexOf(document.location.hostname) > -1;
+    this.accelerationUUID = insecureRandomUUID();
 
     // Check if Apple Pay available
     // https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability#overview
@@ -200,7 +207,6 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
   }
 
   moveToStep(step: CheckoutStep): void {
-    this.processing = false;
     this._step = step;
     if (this.timeoutTimer) {
       clearTimeout(this.timeoutTimer);
@@ -386,6 +392,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     this.accelerationSubscription = this.servicesApiService.accelerate$(
       this.tx.txid,
       this.userBid,
+      this.accelerationUUID
     ).subscribe({
       next: () => {
         this.processing = false;
@@ -519,6 +526,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
                 tokenResult.token,
                 cardTag,
                 `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+                this.accelerationUUID,
                 costUSD
               ).subscribe({
                 next: () => {
@@ -618,6 +626,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
               tokenResult.token,
               cardTag,
               `accelerator-${this.tx.txid.substring(0, 15)}-${Math.round(new Date().getTime() / 1000)}`,
+              this.accelerationUUID,
               costUSD
             ).subscribe({
               next: () => {
@@ -708,6 +717,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
               tokenResult.token,
               tokenResult.details.cashAppPay.cashtag,
               tokenResult.details.cashAppPay.referenceId,
+              this.accelerationUUID,
               costUSD
             ).subscribe({
               next: () => {

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

@@ -1,6 +1,6 @@
 import { Component, Input, Output, OnChanges, EventEmitter, HostListener, OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { Transaction } from '@interfaces/electrs.interface';
-import { AccelerationEstimate, RateOption } from '@components/accelerate-checkout/accelerate-checkout.component';
+import { Transaction } from '../../interfaces/electrs.interface';
+import { AccelerationEstimate, RateOption } from './accelerate-checkout.component';
 
 interface GraphBar {
   rate: number;

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html

@@ -1,6 +1,6 @@
 <div class="acceleration-timeline box" [class.lower-padding]="!tx.status.confirmed">
   <div class="timeline-wrapper">
-    @if (!tx.status.confirmed || canceled) {
+    @if (!tx.status.confirmed) {
     <div class="timeline">
       <div class="intervals">
         <div class="node-spacer"></div>
@@ -8,7 +8,7 @@
         <div class="node-spacer"></div>
         <div class="interval">
           <div class="interval-time">
-            @if (eta && !canceled) {
+            @if (eta) {
               ~<app-time [time]="eta?.wait / 1000"></app-time>
               }
           </div>
@@ -19,20 +19,16 @@
         <div class="node-spacer"></div>
         <div class="interval-spacer"></div>
         <div class="node">
-          <div class="acc-to-confirmed right go-faster" [class.no-animation]="canceled"></div>
+          <div class="acc-to-confirmed right go-faster"></div>
         </div>
         <div class="interval-spacer">
         </div>
         <div class="node" [id]="'confirmed'">
-          <div class="acc-to-confirmed left go-faster" [class.no-animation]="canceled"></div>
+          <div class="acc-to-confirmed left go-faster"></div>
           <div class="shape-border waiting">
             <div class="shape"></div>
           </div>
-          @if (canceled) {
-          <div class="status"><span class="badge badge-danger" i18n="accelerator.canceled">Canceled</span></div>
-          } @else {
-            <div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
-          }
+          <div class="status"><span class="badge badge-waiting" i18n="transaction.rbf.mined">Mined</span></div>
         </div>
       </div>
     </div>
@@ -49,9 +45,9 @@
         <div class="interval">
           <div class="interval-time">
             @if (tx.status.confirmed) {
-              <app-time [time]="acceleratedToMined"></app-time>
-            } @else if (eta && canceled) {
-              ~<app-time [time]="eta?.wait / 1000"></app-time>
+              <div class="interval-time">
+                <app-time [time]="acceleratedToMined"></app-time>
+              </div>
             }
           </div>
         </div>
@@ -75,42 +71,42 @@
         <div class="interval-spacer">
           <div class="seen-to-acc"></div>
         </div>
-        <div class="node" [class.accelerated]="!tx.status.confirmed && !canceled" [id]="'accelerated'">
+        <div class="node" [class.accelerated]="!tx.status.confirmed" [id]="'accelerated'">
           <div class="seen-to-acc left"></div>
-          @if (tx.status.confirmed && !canceled) {
+          @if (tx.status.confirmed) {
             <div class="acc-to-confirmed right"></div>
           } @else {
           <div class="seen-to-acc right"></div>
           }
           <div  class="shape-border hovering" (pointerover)="onHover($event, 'accelerated');" (pointerout)="onBlur($event);">
             <div class="shape"></div>
-            @if (!tx.status.confirmed || canceled) {
-            <div class="connector down" [class.loading]="!canceled"></div>
+            @if (!tx.status.confirmed) {
+            <div class="connector down loading"></div>
             }
           </div>
-          @if (tx.status.confirmed && !canceled) {
+          @if (tx.status.confirmed) {
             <div class="status"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></div>
           }
-          <div class="time" [class.no-margin]="!tx.status.confirmed || canceled" [class.offset-left]="!tx.status.confirmed || canceled">
+          <div class="time" [class.no-margin]="!tx.status.confirmed" [class.offset-left]="!tx.status.confirmed">
             @if (!tx.status.confirmed) {
             <span i18n="transaction.audit.accelerated">Accelerated</span>{{ "" }} 
             }
             @if (useAbsoluteTime) {
             <span>{{ acceleratedAt * 1000 | date }}</span>
             } @else {
-            <app-time kind="since" [time]="acceleratedAt" [lowercaseStart]="!tx.status.confirmed || canceled"></app-time>
+            <app-time kind="since" [time]="acceleratedAt" [lowercaseStart]="!tx.status.confirmed"></app-time>
             }
           </div>
         </div>
         <div class="interval-spacer">
-          @if (tx.status.confirmed && !canceled) {
+          @if (tx.status.confirmed) {
           <div class="acc-to-confirmed"></div>
           } @else {
           <div class="seen-to-acc"></div>
           }
         </div>
         <div class="node" [class.selected]="tx.status.confirmed" [id]="'confirmed'">
-          @if (tx.status.confirmed && !canceled) {
+          @if (tx.status.confirmed) {
           <div class="acc-to-confirmed left"></div>
           } @else {
           <div class="seen-to-acc left"></div>

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss

@@ -129,9 +129,6 @@
           margin-left: calc(-4em + 5px);
           animation: goFasterLeft 0.8s infinite linear;
         }
-        &.no-animation {
-          animation: none;
-        }
       }
 
       &.left {

frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, OnInit, OnChanges, HostListener } from '@angular/core';
-import { ETA } from '@app/services/eta.service';
-import { Transaction } from '@interfaces/electrs.interface';
-import { Acceleration, SinglePoolStats } from '@interfaces/node-api.interface';
-import { MiningService } from '@app/services/mining.service';
+import { ETA } from '../../services/eta.service';
+import { Transaction } from '../../interfaces/electrs.interface';
+import { Acceleration, SinglePoolStats } from '../../interfaces/node-api.interface';
+import { MiningService } from '../../services/mining.service';
 
 @Component({
   selector: 'app-acceleration-timeline',
@@ -15,7 +15,6 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
   @Input() tx: Transaction;
   @Input() accelerationInfo: Acceleration;
   @Input() eta: ETA;
-  @Input() canceled: boolean;
 
   now: number;
   accelerateRatio: number;

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

@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { EChartsOption } from '@app/graphs/echarts';
+import { EChartsOption } from '../../../graphs/echarts';
 import { Observable, Subject, Subscription, combineLatest, fromEvent, merge, share } from 'rxjs';
 import { startWith, switchMap, tap } from 'rxjs/operators';
-import { SeoService } from '@app/services/seo.service';
+import { SeoService } from '../../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '@app/shared/graphs.utils';
-import { StorageService } from '@app/services/storage.service';
-import { MiningService } from '@app/services/mining.service';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../../shared/graphs.utils';
+import { StorageService } from '../../../services/storage.service';
+import { MiningService } from '../../../services/mining.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Acceleration } from '@interfaces/node-api.interface';
-import { ServicesApiServices } from '@app/services/services-api.service';
-import { StateService } from '@app/services/state.service';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { Acceleration } from '../../../interfaces/node-api.interface';
+import { ServicesApiServices } from '../../../services/services-api.service';
+import { StateService } from '../../../services/state.service';
+import { RelativeUrlPipe } from '../../../shared/pipes/relative-url/relative-url.pipe';
 
 @Component({
   selector: 'app-acceleration-fees-graph',

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ServicesApiServices } from '@app/services/services-api.service';
+import { ServicesApiServices } from '../../../services/services-api.service';
 
 export type AccelerationStats = {
   totalRequested: number;

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

@@ -4,7 +4,7 @@
 
   <div class="clearfix"></div>
 
-  <div class="acceleration-list" *ngIf="{ accelerations: accelerationList$ | async } as state">
+  <div class="acceleration-list">
     <table *ngIf="nonEmptyAccelerations; else noData" class="table table-borderless table-fixed">
       <thead>
         <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
@@ -21,8 +21,8 @@
           <th class="date text-right" i18n="accelerator.requested" *ngIf="!this.widget">Requested</th>
         </ng-container>
       </thead>
-      <tbody *ngIf="state.accelerations && nonEmptyAccelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
-        <tr *ngFor="let acceleration of state.accelerations; let i= index;">
+      <tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+        <tr *ngFor="let acceleration of accelerations; let i= index;">
           <td class="txid text-left">
             <a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
               <app-truncate [text]="acceleration.txid" [lastChars]="5"></app-truncate>

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

@@ -1,12 +1,12 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy, Inject, LOCALE_ID } from '@angular/core';
 import { BehaviorSubject, Observable, Subscription, catchError, combineLatest, filter, of, switchMap, tap, throttleTime, timer } from 'rxjs';
-import { Acceleration, BlockExtended, SinglePoolStats } from '@interfaces/node-api.interface';
-import { StateService } from '@app/services/state.service';
-import { WebsocketService } from '@app/services/websocket.service';
-import { ServicesApiServices } from '@app/services/services-api.service';
-import { SeoService } from '@app/services/seo.service';
+import { Acceleration, BlockExtended, SinglePoolStats } from '../../../interfaces/node-api.interface';
+import { StateService } from '../../../services/state.service';
+import { WebsocketService } from '../../../services/websocket.service';
+import { ServicesApiServices } from '../../../services/services-api.service';
+import { SeoService } from '../../../services/seo.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MiningService } from '@app/services/mining.service';
+import { MiningService } from '../../../services/mining.service';
 
 @Component({
   selector: 'app-accelerations-list',
@@ -151,4 +151,4 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
     this.paramSubscription?.unsubscribe();
     this.keyNavigationSubscription?.unsubscribe();
   }
-}
+}

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

@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
-import { SeoService } from '@app/services/seo.service';
-import { OpenGraphService } from '@app/services/opengraph.service';
-import { WebsocketService } from '@app/services/websocket.service';
-import { Acceleration, BlockExtended } from '@interfaces/node-api.interface';
-import { StateService } from '@app/services/state.service';
+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, Subscription, catchError, combineLatest, distinctUntilChanged, map, of, share, switchMap, tap } from 'rxjs';
-import { Color } from '@components/block-overview-graph/sprite-types';
-import { hexToColor } from '@components/block-overview-graph/utils';
-import TxView from '@components/block-overview-graph/tx-view';
-import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '@app/app.constants';
-import { ServicesApiServices } from '@app/services/services-api.service';
-import { detectWebGL } from '@app/shared/graphs.utils';
-import { AudioService } from '@app/services/audio.service';
-import { ThemeService } from '@app/services/theme.service';
+import { Color } from '../../block-overview-graph/sprite-types';
+import { hexToColor } from '../../block-overview-graph/utils';
+import TxView from '../../block-overview-graph/tx-view';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants';
+import { ServicesApiServices } from '../../../services/services-api.service';
+import { detectWebGL } from '../../../shared/graphs.utils';
+import { AudioService } from '../../../services/audio.service';
+import { ThemeService } from '../../../services/theme.service';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
 const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html

@@ -20,7 +20,7 @@
       <td class="pie-chart" rowspan="2" *ngIf="!chartPositionLeft">
         <div class="d-flex justify-content-between align-items-start">
           @if (hasCpfp) {
-            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP</button>
+            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
           }
           <ng-container *ngTemplateOutlet="pieChart"></ng-container>
         </div>
@@ -36,7 +36,7 @@
       <tr>
         <td colspan="3" class="pt-0">
           <div class="d-flex justify-content-end align-items-start">
-            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP</button>
+            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
           </div>
         </td>
       </tr>

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts

@@ -1,8 +1,8 @@
 import { Component, ChangeDetectionStrategy, Input, Output, OnChanges, SimpleChanges, EventEmitter, ChangeDetectorRef } from '@angular/core';
-import { Transaction } from '@interfaces/electrs.interface';
-import { Acceleration, SinglePoolStats } from '@interfaces/node-api.interface';
-import { EChartsOption, PieSeriesOption } from '@app/graphs/echarts';
-import { MiningStats } from '@app/services/mining.service';
+import { Transaction } from '../../../interfaces/electrs.interface';
+import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.interface';
+import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
+import { MiningStats } from '../../../services/mining.service';
 
 function lighten(color, p): { r, g, b } {
   return {
@@ -76,21 +76,15 @@ export class ActiveAccelerationBox implements OnChanges {
     acceleratingPools.forEach((poolId, index) => {
       const pool = pools[poolId];
       const poolShare = ((pool.lastEstimatedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1);
-      let color = 'white';
-      if (index >= firstSignificantPool) {
-        if (numSignificantPools > 1) {
-          color = toRGB(lighten({ r: 147, g: 57, b: 244 }, 1 - (index - firstSignificantPool) / Math.max((numSignificantPools - 1), 1)));
-        } else {
-          color = toRGB({ r: 147, g: 57, b: 244 });
-        }
-      }
       data.push(getDataItem(
         pool.lastEstimatedHashrate,
-        color,
+        index >= firstSignificantPool
+          ? toRGB(lighten({ r: 147, g: 57, b: 244 }, 1 - (index - firstSignificantPool) / (numSignificantPools - 1)))
+          : 'white',
         `<b style="color: white">${pool.name} (${poolShare}%)</b>`,
         true,
       ) as PieSeriesOption);
-    });
+    })
     this.acceleratedByPercentage = ((totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1) + '%';
     const notAcceleratedByPercentage = ((1 - (totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate)) * 100).toFixed(1) + '%';
     data.push(getDataItem(
@@ -154,4 +148,4 @@ export class ActiveAccelerationBox implements OnChanges {
   onToggleCpfp(): void {
     this.toggleCpfp.emit();
   }
-}
+}

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

@@ -1,9 +1,9 @@
 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 { StateService } from '@app/services/state.service';
-import { WebsocketService } from '@app/services/websocket.service';
+import { Acceleration } from '../../../interfaces/node-api.interface';
+import { StateService } from '../../../services/state.service';
+import { WebsocketService } from '../../../services/websocket.service';
 
 @Component({
   selector: 'app-pending-stats',

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

@@ -1,15 +1,16 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { echarts, EChartsOption } from '@app/graphs/echarts';
+import { echarts, EChartsOption } from '../../graphs/echarts';
 import { BehaviorSubject, Observable, Subscription, combineLatest, of } from 'rxjs';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
-import { AddressTxSummary, ChainStats } from '@interfaces/electrs.interface';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
-import { AmountShortenerPipe } from '@app/shared/pipes/amount-shortener.pipe';
+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 '@app/shared/pipes/relative-url/relative-url.pipe';
-import { StateService } from '@app/services/state.service';
-import { PriceService } from '@app/services/price.service';
-import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '../../services/state.service';
+import { PriceService } from '../../services/price.service';
+import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
+import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
 
 const periodSeconds = {
   '1d': (60 * 60 * 24),
@@ -44,18 +45,14 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   @Input() right: number | string = 10;
   @Input() left: number | string = 70;
   @Input() widget: boolean = false;
-  @Input() defaultFiat: boolean = false;
-  @Input() showLegend: boolean = true;
-  @Input() showYAxis: boolean = true;
 
-  adjustedLeft: number;
-  adjustedRight: number;
   data: any[] = [];
   fiatData: any[] = [];
   hoverData: any[] = [];
   conversions: any;
   allowZoom: boolean = false;
-
+  initialRight = this.right;
+  initialLeft = this.left;
   selected = { [$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`]: true, 'Fiat': false };
 
   subscription: Subscription;
@@ -80,17 +77,15 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
     private relativeUrlPipe: RelativeUrlPipe,
     private priceService: PriceService,
     private fiatCurrencyPipe: FiatCurrencyPipe,
+    private fiatShortenerPipe: FiatShortenerPipe,
     private zone: NgZone,
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     this.isLoading = true;
-    if (!this.addressSummary$ && (!this.address || !this.stats)) {
+    if (!this.address || !this.stats) {
       return;
     }
-    if (changes.defaultFiat) {
-      this.selected['Fiat'] = !!this.defaultFiat;
-    }
     if (changes.address || changes.isPubkey || changes.addressSummary$ || changes.stats) {
       if (this.subscription) {
         this.subscription.unsubscribe();
@@ -123,7 +118,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
                     } else if (this.conversions && this.conversions['USD']) {
                       price = this.conversions['USD'];
                     }
-                    return { ...item, price: price };
+                    return { ...item, price: price }
                   });
                 }
               }),
@@ -149,16 +144,15 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   }
 
   prepareChartOptions(summary: AddressTxSummary[]) {
-    if (!summary) {
+    if (!summary || !this.stats) {
       return;
     }
-
-    const total = this.stats ? (this.stats.funded_txo_sum - this.stats.spent_txo_sum) : summary.reduce((acc, tx) => acc + tx.value, 0);
-    let runningTotal = total;
+    
+    let total = (this.stats.funded_txo_sum - this.stats.spent_txo_sum);
     const processData = summary.map(d => {
-        const balance = runningTotal;
-        const fiatBalance = runningTotal * d.price / 100_000_000;
-        runningTotal -= d.value;
+        const balance = total;
+        const fiatBalance = total * d.price / 100_000_000;
+        total -= d.value;
         return {
             time: d.time * 1000,
             balance,
@@ -166,7 +160,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
             d
         };
     }).reverse();
-
+    
     this.data = processData.filter(({ d }) => d.txid !== undefined).map(({ time, balance, d }) => [time, balance, d]);
     this.fiatData = processData.map(({ time, fiatBalance, balance, d }) => [time, fiatBalance, d, balance]);
 
@@ -178,15 +172,12 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
       this.fiatData = this.fiatData.filter(d => d[0] >= startFiat);
     }
     this.data.push(
-      {value: [now, total], symbol: 'none', tooltip: { show: false }}
+      {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.adjustedRight = this.selected['Fiat'] ? +this.right + 40 : +this.right;
-    this.adjustedLeft = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? +this.left : +this.left - 40;
-
     this.chartOptions = {
       color: [
         new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -202,10 +193,10 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
       grid: {
         top: 20,
         bottom: this.allowZoom ? 65 : 20,
-        right: this.adjustedRight,
-        left: this.adjustedLeft,
+        right: this.right,
+        left: this.left,
       },
-      legend: (this.showLegend && !this.stateService.isAnyTestnet()) ? {
+      legend: !this.stateService.isAnyTestnet() ? {
         data: [
           {
             name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`,
@@ -253,22 +244,21 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
           let tooltip = '<div>';
 
           const hasTx = data[0].data[2].txid;
-          const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
-
-          tooltip += `<div>
-            <div style="text-align: right;">
-            <div><b>${date}</b></div>`;
-
           if (hasTx) {
             const header = data.length === 1
             ? `${data[0].data[2].txid.slice(0, 6)}...${data[0].data[2].txid.slice(-6)}`
             : `${data.length} transactions`;
-            tooltip += `<div><b>${header}</b></div>`;
+            tooltip += `<span><b>${header}</b></span>`;
           }
-
+          
+          const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
+          
+          tooltip += `<div>
+            <div style="text-align: right;">`;
+          
           const formatBTC = (val, decimal) => (val / 100_000_000).toFixed(decimal);
           const formatFiat = (val) => this.fiatCurrencyPipe.transform(val, null, 'USD');
-
+          
           const btcVal = btcData.reduce((total, d) => total + d.data[2].value, 0);
           const fiatVal = fiatData.reduce((total, d) => total + d.data[2].value * d.data[2].price / 100_000_000, 0);
           const btcColor = btcVal === 0 ? '' : (btcVal > 0 ? 'var(--green)' : 'var(--red)');
@@ -300,7 +290,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
             }
           }
 
-          tooltip += `</div></div>`;
+          tooltip += `</div><span>${date}</span></div>`;
           return tooltip;
         }.bind(this)
       },
@@ -316,26 +306,22 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
           type: 'value',
           position: 'left',
           axisLabel: {
-            show: this.showYAxis,
             color: 'rgb(110, 112, 121)',
             formatter: (val): string => {
               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, undefined, true)} BTC`;
+                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0)} BTC`;
               }
               else if (valSpan > 1_000_000_000) {
-                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2, undefined, true)} BTC`;
+                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 (valSpan > 10_000_000) {
                 return `${(val / 100_000_000).toFixed(2)} BTC`;
               } else if (valSpan > 1_000_000) {
-                if (maxValue > 100_000_000_000) {
-                  return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 3, undefined, true)} BTC`;
-                }
                 return `${(val / 100_000_000).toFixed(3)} BTC`;
               } else {
-                return `${this.amountShortenerPipe.transform(val, 0, undefined, true)} sats`;
+                return `${this.amountShortenerPipe.transform(val, 0)} sats`;
               }
             }
           },
@@ -347,10 +333,9 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
         {
           type: 'value',
           axisLabel: {
-            show: this.showYAxis,
             color: 'rgb(110, 112, 121)',
             formatter: function(val) {
-              return `$${this.amountShortenerPipe.transform(val, 3, undefined, true, true)}`;
+              return this.fiatShortenerPipe.transform(val, null, 'USD');
             }.bind(this)
           },
           splitLine: {
@@ -404,8 +389,8 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
         type: 'slider',
         brushSelect: false,
         realtime: true,
-        left: this.adjustedLeft,
-        right: this.adjustedRight,
+        left: this.left,
+        right: this.right,
         selectedDataBackground: {
           lineStyle: {
             color: '#fff',
@@ -418,7 +403,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
 
   onChartClick(e) {
     if (this.hoverData?.length && this.hoverData[0]?.[2]?.txid) {
-      this.zone.run(() => {
+      this.zone.run(() => { 
         const url = this.relativeUrlPipe.transform(`/tx/${this.hoverData[0][2].txid}`);
         if (e.event.event.shiftKey || e.event.event.ctrlKey || e.event.event.metaKey) {
           window.open(url);
@@ -435,26 +420,26 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
 
   onLegendSelectChanged(e) {
     this.selected = e.selected;
-    this.adjustedRight = this.selected['Fiat'] ? +this.right + 40 : +this.right;
-    this.adjustedLeft = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? +this.left : +this.left - 40;
+    this.right = this.selected['Fiat'] ? +this.initialRight + 40 : this.initialRight;
+    this.left = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? this.initialLeft : +this.initialLeft - 40;
 
     this.chartOptions = {
       grid: {
-        right: this.adjustedRight,
-        left: this.adjustedLeft,
+        right: this.right,
+        left: this.left,
       },
       legend: {
         selected: this.selected,
       },
       dataZoom: this.allowZoom ? [{
-        left: this.adjustedLeft,
-        right: this.adjustedRight,
+        left: this.left,
+        right: this.right,
       }, {
-        left: this.adjustedLeft,
-        right: this.adjustedRight,
+        left: this.left,
+        right: this.right,
       }] : undefined
     };
-
+    
     if (this.chartInstance) {
       this.chartInstance.setOption(this.chartOptions);
     }
@@ -483,7 +468,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
     // Add a point at today's date to make the graph end at the current time
     extendedSummary.unshift({ time: Date.now() / 1000, value: 0 });
     extendedSummary.reverse();
-
+    
     let oneHour = 60 * 60;
     // Fill gaps longer than interval
     for (let i = 0; i < extendedSummary.length - 1; i++) {
@@ -496,7 +481,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
         i += hours - 1;
       }
     }
-
+  
     return extendedSummary.reverse();
   }
 }

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

@@ -1,15 +1,15 @@
 import { Component, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, catchError } from 'rxjs/operators';
-import { Address, Transaction } from '@interfaces/electrs.interface';
-import { WebsocketService } from '@app/services/websocket.service';
-import { StateService } from '@app/services/state.service';
-import { AudioService } from '@app/services/audio.service';
-import { ApiService } from '@app/services/api.service';
+import { Address, Transaction } from '../../interfaces/electrs.interface';
+import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from '../../services/state.service';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
 import { of, Subscription, forkJoin } from 'rxjs';
-import { SeoService } from '@app/services/seo.service';
-import { AddressInformation } from '@interfaces/node-api.interface';
+import { SeoService } from '../../services/seo.service';
+import { AddressInformation } from '../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-address-group',

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

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
-import { Vin, Vout } from '@interfaces/electrs.interface';
-import { StateService } from '@app/services/state.service';
-import { AddressType, AddressTypeInfo } from '@app/shared/address-utils';
+import { Vin, Vout } from '../../interfaces/electrs.interface';
+import { StateService } from '../../services/state.service';
+import { AddressType, AddressTypeInfo } from '../../shared/address-utils';
 
 @Component({
   selector: 'app-address-labels',

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

@@ -12,7 +12,7 @@
           <app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
         </a>
       </td>
-      <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" [digitsInfo]="getAmountDigits(transaction.value)" [noFiat]="true"></app-amount></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" [showTooltip]="true"></app-time></td>
     </tr>

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

@@ -1,9 +1,9 @@
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { StateService } from '@app/services/state.service';
-import { Address, AddressTxSummary } from '@interfaces/electrs.interface';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+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 '@app/services/price.service';
+import { PriceService } from '../../services/price.service';
 
 @Component({
   selector: 'app-address-transactions-widget',
@@ -43,7 +43,7 @@ export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, On
 
   startAddressSubscription(): void {
     this.isLoading = true;
-    if (!this.addressSummary$ && (!this.address || !this.addressInfo)) {
+    if (!this.address || !this.addressInfo) {
       return;
     }
     this.transactions$ = (this.addressSummary$ || (this.isPubkey
@@ -55,7 +55,7 @@ export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, On
       })
     )).pipe(
       map(summary => {
-        return summary?.filter(tx => Math.abs(tx.value) >= 1000000)?.slice(0, 6);
+        return summary?.slice(0, 6);
       }),
       switchMap(txs => {
         return (zip(txs.map(tx => this.priceService.getBlockPrice$(tx.time, txs.length < 3, this.currency).pipe(
@@ -68,12 +68,6 @@ export class AddressTransactionsWidgetComponent implements OnInit, OnChanges, On
         ))));
       })
     );
-
-  }
-
-  getAmountDigits(value: number): string {
-    const decimals = Math.max(0, 4 - Math.ceil(Math.log10(Math.abs(value / 100_000_000))));
-    return `1.${decimals}-${decimals}`;
   }
 
   ngOnDestroy(): void {

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

@@ -1,16 +1,16 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, filter, catchError, map, tap } from 'rxjs/operators';
-import { Address, Transaction } from '@interfaces/electrs.interface';
-import { StateService } from '@app/services/state.service';
-import { OpenGraphService } from '@app/services/opengraph.service';
-import { AudioService } from '@app/services/audio.service';
-import { ApiService } from '@app/services/api.service';
+import { Address, Transaction } from '../../interfaces/electrs.interface';
+import { StateService } from '../../services/state.service';
+import { OpenGraphService } from '../../services/opengraph.service';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
 import { of, merge, Subscription, Observable } from 'rxjs';
-import { SeoService } from '@app/services/seo.service';
-import { seoDescriptionNetwork } from '@app/shared/common.utils';
-import { AddressInformation } from '@interfaces/node-api.interface';
+import { SeoService } from '../../services/seo.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { AddressInformation } from '../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-address-preview',

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

@@ -117,7 +117,7 @@
       </h2>
     </div>
 
-    <app-transactions-list [transactions]="transactions" [showConfirmations]="true" [addresses]="[address.address]" (loadMore)="loadMore()"></app-transactions-list>
+    <app-transactions-list [transactions]="transactions" [showConfirmations]="true" [address]="address.address" (loadMore)="loadMore()"></app-transactions-list>
 
     <div class="text-center">
       <ng-template [ngIf]="isLoadingTransactions">

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

@@ -1,17 +1,17 @@
 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, filter, catchError, map, tap } from 'rxjs/operators';
-import { Address, ChainStats, Transaction, Utxo, Vin } from '@interfaces/electrs.interface';
-import { WebsocketService } from '@app/services/websocket.service';
-import { StateService } from '@app/services/state.service';
-import { AudioService } from '@app/services/audio.service';
-import { ApiService } from '@app/services/api.service';
+import { Address, ChainStats, Transaction, Utxo, Vin } from '../../interfaces/electrs.interface';
+import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from '../../services/state.service';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
 import { of, merge, Subscription, Observable, forkJoin } from 'rxjs';
-import { SeoService } from '@app/services/seo.service';
-import { seoDescriptionNetwork } from '@app/shared/common.utils';
-import { AddressInformation } from '@interfaces/node-api.interface';
-import { AddressTypeInfo } from '@app/shared/address-utils';
+import { SeoService } from '../../services/seo.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { AddressInformation } from '../../interfaces/node-api.interface';
+import { AddressTypeInfo } from '../../shared/address-utils';
 
 class AddressStats implements ChainStats {
   address: string;

frontend/src/app/components/addresses-treemap/addresses-treemap.component.html

@@ -1,10 +0,0 @@
-<div class="addresses-treemap-container">
-  <div *ngIf="addresses" style="height: 300px">
-    <div *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
-    </div>
-  </div>
-
-  <div *ngIf="!stateService.isBrowser || isLoading" class="text-center loading-spinner">
-    <div class="spinner-border text-light"></div>
-  </div>
-</div>

frontend/src/app/components/addresses-treemap/addresses-treemap.component.scss

@@ -1,17 +0,0 @@
-.node-channels-container {
-  position: relative;
-}
-
-.loading-spinner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: 100;
-}
-
-.spinner-border {
-  position: relative;
-  top: 225px;
-}

frontend/src/app/components/addresses-treemap/addresses-treemap.component.ts

@@ -1,150 +0,0 @@
-import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges } from '@angular/core';
-import { Router } from '@angular/router';
-import { EChartsOption, TreemapSeriesOption } from '@app/graphs/echarts';
-import { lerpColor } from '@app/shared/graphs.utils';
-import { AmountShortenerPipe } from '@app/shared/pipes/amount-shortener.pipe';
-import { LightningApiService } from '@app/lightning/lightning-api.service';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
-import { StateService } from '@app/services/state.service';
-import { Address } from '@interfaces/electrs.interface';
-import { formatNumber } from '@angular/common';
-
-@Component({
-  selector: 'app-addresses-treemap',
-  templateUrl: './addresses-treemap.component.html',
-  styleUrls: ['./addresses-treemap.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AddressesTreemap implements OnChanges {
-  @Input() addresses: Address[];
-  @Input() isLoading: boolean = false;
-
-  chartInstance: any;
-  chartOptions: EChartsOption = {};
-  chartInitOptions = {
-    renderer: 'svg',
-  };
-
-  constructor(
-    @Inject(LOCALE_ID) public locale: string,
-    private lightningApiService: LightningApiService,
-    private amountShortenerPipe: AmountShortenerPipe,
-    private zone: NgZone,
-    private router: Router,
-    public stateService: StateService,
-  ) {}
-
-  ngOnChanges(): void {
-    this.prepareChartOptions();
-  }
-
-  prepareChartOptions(): void {
-    const data = this.addresses.map(address => ({
-      address: address.address,
-      value: address.chain_stats.funded_txo_sum - address.chain_stats.spent_txo_sum,
-      stats: address.chain_stats,
-    }));
-    // only consider visible items for the color gradient
-    const totalValue = data.reduce((acc, address) => acc + address.value, 0);
-    const maxTxs = data.filter(address => address.value > (totalValue / 2000)).reduce((max, address) => Math.max(max, address.stats.tx_count), 0);
-    const dataItems = data.map(address => ({
-      ...address,
-      itemStyle: {
-        color: lerpColor('#1E88E5', '#D81B60', address.stats.tx_count / maxTxs),
-      }
-    }));
-    this.chartOptions = {
-      tooltip: {
-        trigger: 'item',
-        textStyle: {
-          align: 'left',
-        }
-      },
-      series: <TreemapSeriesOption[]>[
-        {
-          height: 300,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          top: 0,
-          roam: false,
-          type: 'treemap',
-          data: dataItems,
-          nodeClick: 'link',
-          progressive: 100,
-          tooltip: {
-            show: true,
-            backgroundColor: 'rgba(17, 19, 31, 1)',
-            borderRadius: 4,
-            shadowColor: 'rgba(0, 0, 0, 0.5)',
-            textStyle: {
-              color: '#b1b1b1',
-            },
-            borderColor: '#000',
-            formatter: (value): string => {
-              if (!value.data.address) {
-                return '';
-              }
-              return `
-                <table style="table-layout: fixed;">
-                  <tbody>
-                    <tr>
-                      <td colspan="2"><b style="color: white; margin-left: 2px">${value.data.address}</b></td>
-                    </tr>
-                    <tr>
-                      <td>Received</td>
-                      <td style="text-align: right">${this.formatValue(value.data.stats.funded_txo_sum)}</td>
-                    </tr>
-                    <tr>
-                      <td>Sent</td>
-                      <td style="text-align: right">${this.formatValue(value.data.stats.spent_txo_sum)}</td>
-                    </tr>
-                    <tr>
-                      <td>Balance</td>
-                      <td style="text-align: right">${this.formatValue(value.data.stats.funded_txo_sum - value.data.stats.spent_txo_sum)}</td>
-                    </tr>
-                    <tr>
-                      <td>Transaction count</td>
-                      <td style="text-align: right">${value.data.stats.tx_count}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              `;
-            }
-          },
-          itemStyle: {
-            borderColor: 'black',
-            borderWidth: 1,
-          },
-          breadcrumb: {
-            show: false,
-          }
-        }
-      ]
-    };    
-  }
-
-  formatValue(sats: number): string {
-    if (sats > 100000000) {
-      return formatNumber(sats / 100000000, this.locale, '1.2-2') + ' BTC';
-    } else {
-     return this.amountShortenerPipe.transform(sats, 2) + ' sats';
-    }
-  }
-
-  onChartInit(ec: any): void {
-    this.chartInstance = ec;
-
-    this.chartInstance.on('click', (e) => {
-      //@ts-ignore
-      if (!e.data.address) {
-        return;
-      }
-      this.zone.run(() => {
-        //@ts-ignore
-        const url = new RelativeUrlPipe(this.stateService).transform(`/address/${e.data.address}`);
-        this.router.navigate([url]);
-      });
-    });
-  }
-}

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { StorageService } from '@app/services/storage.service';
-import { StateService } from '@app/services/state.service';
+import { StorageService } from '../../services/storage.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-amount-selector',

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { StateService } from '@app/services/state.service';
+import { StateService } from '../../services/state.service';
 import { Observable, Subscription } from 'rxjs';
-import { Price } from '@app/services/price.service';
+import { Price } from '../../services/price.service';
 
 @Component({
   selector: 'app-amount',

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

@@ -1,11 +1,11 @@
 import { Location } from '@angular/common';
 import { Component, HostListener, OnInit, Inject, LOCALE_ID, HostBinding } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
-import { StateService } from '@app/services/state.service';
-import { OpenGraphService } from '@app/services/opengraph.service';
+import { StateService } from '../../services/state.service';
+import { OpenGraphService } from '../../services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
-import { ThemeService } from '@app/services/theme.service';
-import { SeoService } from '@app/services/seo.service';
+import { ThemeService } from '../../services/theme.service';
+import { SeoService } from '../../services/seo.service';
 
 @Component({
   selector: 'app-root',

frontend/src/app/components/asset-circulation/asset-circulation.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { moveDec } from '@app/bitcoin.utils';
-import { AssetsService } from '@app/services/assets.service';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
-import { environment } from '@environments/environment';
+import { moveDec } from '../../bitcoin.utils';
+import { AssetsService } from '../../services/assets.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-asset-circulation',

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

@@ -1,17 +1,17 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, filter, catchError, take } from 'rxjs/operators';
-import { Asset, Transaction } from '@interfaces/electrs.interface';
-import { WebsocketService } from '@app/services/websocket.service';
-import { StateService } from '@app/services/state.service';
-import { AudioService } from '@app/services/audio.service';
-import { ApiService } from '@app/services/api.service';
+import { Asset, Transaction } from '../../interfaces/electrs.interface';
+import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from '../../services/state.service';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
 import { of, merge, Subscription, combineLatest } from 'rxjs';
-import { SeoService } from '@app/services/seo.service';
-import { environment } from '@environments/environment';
-import { AssetsService } from '@app/services/assets.service';
-import { moveDec } from '@app/bitcoin.utils';
+import { SeoService } from '../../services/seo.service';
+import { environment } from '../../../environments/environment';
+import { AssetsService } from '../../services/assets.service';
+import { moveDec } from '../../bitcoin.utils';
 
 @Component({
   selector: 'app-asset',

frontend/src/app/components/assets/asset-group/asset-group.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { combineLatest, Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
-import { ApiService } from '@app/services/api.service';
-import { AssetsService } from '@app/services/assets.service';
+import { ApiService } from '../../../services/api.service';
+import { AssetsService } from '../../../services/assets.service';
 
 @Component({
   selector: 'app-asset-group',

frontend/src/app/components/assets/assets-featured/assets-featured.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ApiService } from '@app/services/api.service';
-import { StateService } from '@app/services/state.service';
+import { ApiService } from '../../../services/api.service';
+import { StateService } from '../../../services/state.service';
 
 @Component({
   selector: 'app-assets-featured',

frontend/src/app/components/assets/assets-nav/assets-nav.component.ts

@@ -4,12 +4,12 @@ import { Router } from '@angular/router';
 import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
 import { merge, Observable, of, Subject } from 'rxjs';
 import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
-import { AssetExtended } from '@interfaces/electrs.interface';
-import { AssetsService } from '@app/services/assets.service';
-import { SeoService } from '@app/services/seo.service';
-import { StateService } from '@app/services/state.service';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
-import { environment } from '@environments/environment';
+import { AssetExtended } from '../../../interfaces/electrs.interface';
+import { AssetsService } from '../../../services/assets.service';
+import { SeoService } from '../../../services/seo.service';
+import { StateService } from '../../../services/state.service';
+import { RelativeUrlPipe } from '../../../shared/pipes/relative-url/relative-url.pipe';
+import { environment } from '../../../../environments/environment';
 
 @Component({
   selector: 'app-assets-nav',

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

@@ -1,13 +1,13 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { AssetsService } from '@app/services/assets.service';
-import { environment } from '@environments/environment';
+import { AssetsService } from '../../services/assets.service';
+import { environment } from '../../../environments/environment';
 import { UntypedFormGroup } from '@angular/forms';
 import { filter, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, Observable } from 'rxjs';
-import { AssetExtended } from '@interfaces/electrs.interface';
-import { SeoService } from '@app/services/seo.service';
-import { StateService } from '@app/services/state.service';
+import { AssetExtended } from '../../interfaces/electrs.interface';
+import { SeoService } from '../../services/seo.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-assets',

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

@@ -4,10 +4,10 @@
       <div class="item">
         <h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5>
         <div class="card-text">
-          {{ ((total) / 100_000_000) | number: '1.2-2' }} <span class="symbol" i18n="shared.btc|BTC">BTC</span>
+          {{ ((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]="(total)"></app-fiat>
+          <app-fiat [value]="(addressInfo.chain_stats.funded_txo_sum - addressInfo.chain_stats.spent_txo_sum)"></app-fiat>
         </div>
       </div>
       <div class="item">

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { StateService } from '@app/services/state.service';
-import { Address, AddressTxSummary } from '@interfaces/electrs.interface';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+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({
@@ -19,7 +19,6 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {
   isLoading: boolean = true;
   error: any;
 
-  total: number = 0;
   delta7d: number = 0;
   delta30d: number = 0;
 
@@ -35,7 +34,7 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     this.isLoading = true;
-    if (!this.addressSummary$ && (!this.address || !this.addressInfo)) {
+    if (!this.address || !this.addressInfo) {
       return;
     }
     (this.addressSummary$ || (this.isPubkey
@@ -58,7 +57,6 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {
   calculateStats(summary: AddressTxSummary[]): void {
     let weekTotal = 0;
     let monthTotal = 0;
-    this.total = this.addressInfo ? this.addressInfo.chain_stats.funded_txo_sum - this.addressInfo.chain_stats.spent_txo_sum : summary.reduce((acc, tx) => acc + tx.value, 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;

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

@@ -4,7 +4,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription, of, timer } from 'rxjs';
 import { filter, repeat, retry, switchMap, take, tap } from 'rxjs/operators';
-import { ServicesApiServices } from '@app/services/services-api.service';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 @Component({
   selector: 'app-bitcoin-invoice',

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

@@ -1,17 +1,17 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
-import { echarts, EChartsOption } from '@app/graphs/echarts';
+import { echarts, EChartsOption } from '../../graphs/echarts';
 import { Observable, combineLatest, of } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '@app/services/api.service';
-import { SeoService } from '@app/services/seo.service';
+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, formatterXAxisLabel, formatterXAxisTimeCategory } from '@app/shared/graphs.utils';
-import { StorageService } from '@app/services/storage.service';
-import { MiningService } from '@app/services/mining.service';
-import { selectPowerOfTen } from '@app/bitcoin.utils';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
-import { StateService } from '@app/services/state.service';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
+import { StorageService } from '../../services/storage.service';
+import { MiningService } from '../../services/mining.service';
+import { selectPowerOfTen } from '../../bitcoin.utils';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '../../services/state.service';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({

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

@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { echarts, EChartsOption } from '@app/graphs/echarts';
+import { echarts, EChartsOption } from '../../graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '@app/services/api.service';
-import { SeoService } from '@app/services/seo.service';
+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 '@app/shared/graphs.utils';
-import { StorageService } from '@app/services/storage.service';
-import { MiningService } from '@app/services/mining.service';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
+import { StorageService } from '../../services/storage.service';
+import { MiningService } from '../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
-import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
-import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
-import { StateService } from '@app/services/state.service';
+import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-block-fees-graph',

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

@@ -1,19 +1,19 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
-import { EChartsOption } from '@app/graphs/echarts';
+import { EChartsOption } from '../../graphs/echarts';
 import { Observable } from 'rxjs';
 import { catchError, map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '@app/services/api.service';
-import { SeoService } from '@app/services/seo.service';
+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 '@app/shared/graphs.utils';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
-import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
-import { StateService } from '@app/services/state.service';
-import { MiningService } from '@app/services/mining.service';
-import { StorageService } from '@app/services/storage.service';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+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',

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

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit, OnDestroy } from '@angular/core';
-import { ActiveFilter, FilterGroups, FilterMode, GradientMode, TransactionFilters } from '@app/shared/filters.utils';
-import { StateService } from '@app/services/state.service';
+import { ActiveFilter, FilterGroups, FilterMode, GradientMode, TransactionFilters } from '../../shared/filters.utils';
+import { StateService } from '../../services/state.service';
 import { Subscription } from 'rxjs';
 
 
@@ -115,4 +115,4 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
   ngOnDestroy(): void {
     this.filterSubscription.unsubscribe();
   }
-}
+}

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

@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
-import { EChartsOption } from '@app/graphs/echarts';
+import { EChartsOption } from '../../graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '@app/services/api.service';
-import { SeoService } from '@app/services/seo.service';
+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, formatterXAxisLabel, formatterXAxisTimeCategory } from '@app/shared/graphs.utils';
-import { StorageService } from '@app/services/storage.service';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
+import { StorageService } from '../../services/storage.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
-import { StateService } from '@app/services/state.service';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-block-health-graph',

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

@@ -1,17 +1,17 @@
 import { Component, ElementRef, ViewChild, HostListener, Input, Output, EventEmitter, NgZone, AfterViewInit, OnDestroy, OnChanges } from '@angular/core';
-import { TransactionStripped } from '@interfaces/node-api.interface';
-import { FastVertexArray } from '@components/block-overview-graph/fast-vertex-array';
-import BlockScene from '@components/block-overview-graph/block-scene';
-import TxSprite from '@components/block-overview-graph/tx-sprite';
-import TxView from '@components/block-overview-graph/tx-view';
-import { Color, Position } from '@components/block-overview-graph/sprite-types';
-import { Price } from '@app/services/price.service';
-import { StateService } from '@app/services/state.service';
-import { ThemeService } from '@app/services/theme.service';
+import { TransactionStripped } from '../../interfaces/node-api.interface';
+import { FastVertexArray } from './fast-vertex-array';
+import BlockScene from './block-scene';
+import TxSprite from './tx-sprite';
+import TxView from './tx-view';
+import { Color, Position } from './sprite-types';
+import { Price } from '../../services/price.service';
+import { StateService } from '../../services/state.service';
+import { ThemeService } from '../../services/theme.service';
 import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from '@components/block-overview-graph/utils';
-import { ActiveFilter, FilterMode, toFlags } from '@app/shared/filters.utils';
-import { detectWebGL } from '@app/shared/graphs.utils';
+import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from './utils';
+import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
+import { detectWebGL } from '../../shared/graphs.utils';
 
 const unmatchedOpacity = 0.2;
 const unmatchedAuditColors = {
@@ -553,7 +553,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
         x: cssX,
         y: cssY
       };
-      const selected = this.scene.getTxAt({ x, y });
+      const selected = this.scene.getTxAt({ x, y: this.displayHeight - y });
       const currentPreview = this.selectedTx || this.hoverTx;
 
       if (selected !== currentPreview) {
@@ -627,7 +627,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.scene) {
       const x = cssX * window.devicePixelRatio;
       const y = cssY * window.devicePixelRatio;
-      const selected = this.scene.getTxAt({ x, y });
+      const selected = this.scene.getTxAt({ x, y: this.displayHeight - y });
       if (selected && selected.txid) {
         this.txClickEvent.emit({ tx: selected, keyModifier });
       }
@@ -681,10 +681,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
 // WebGL shader attributes
 const attribs = {
-  offset: { type: 'FLOAT', count: 2, pointer: null, offset: 0 },
+  bounds: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
   posX: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
   posY: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
-  posR: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
   colR: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
   colG: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
   colB: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
@@ -707,10 +706,9 @@ varying lowp vec4 vColor;
 // each attribute contains [x: startValue, y: endValue, z: startTime, w: rate]
 // shader interpolates between start and end values at the given rate, from the given time
 
-attribute vec2 offset;
+attribute vec4 bounds;
 attribute vec4 posX;
 attribute vec4 posY;
-attribute vec4 posR;
 attribute vec4 colR;
 attribute vec4 colG;
 attribute vec4 colB;
@@ -735,10 +733,7 @@ float interpolateAttribute(vec4 attr) {
 void main() {
   vec4 screenTransform = vec4(2.0 / screenSize.x, 2.0 / screenSize.y, -1.0, -1.0);
   // vec4 screenTransform = vec4(1.0 / screenSize.x, 1.0 / screenSize.y, -0.5, -0.5);
-
-  float radius = interpolateAttribute(posR);
-  vec2 position = vec2(interpolateAttribute(posX), interpolateAttribute(posY)) + (radius * offset);
-
+  vec2 position = clamp(vec2(interpolateAttribute(posX), interpolateAttribute(posY)), bounds.xy, bounds.zw);
   gl_Position = vec4(position * screenTransform.xy + screenTransform.zw, 1.0, 1.0);
 
   float red = interpolateAttribute(colR);

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

@@ -1,9 +1,9 @@
-import { FastVertexArray } from '@components/block-overview-graph/fast-vertex-array';
-import TxView from '@components/block-overview-graph/tx-view';
-import { TransactionStripped } from '@interfaces/node-api.interface';
-import { Color, Position, Square, ViewUpdateParams } from '@components/block-overview-graph/sprite-types';
-import { defaultColorFunction, contrastColorFunction } from '@components/block-overview-graph/utils';
-import { ThemeService } from '@app/services/theme.service';
+import { FastVertexArray } from './fast-vertex-array';
+import TxView from './tx-view';
+import { TransactionStripped } from '../../interfaces/node-api.interface';
+import { Color, Position, Square, ViewUpdateParams } from './sprite-types';
+import { defaultColorFunction, contrastColorFunction } from './utils';
+import { ThemeService } from '../../services/theme.service';
 
 export default class BlockScene {
   scene: { count: number, offset: { x: number, y: number}};
@@ -18,6 +18,8 @@ export default class BlockScene {
   animationOffset: number;
   highlightingEnabled: boolean;
   filterFlags: bigint | null = 0b00000100_00000000_00000000_00000000n;
+  x: number;
+  y: number;
   width: number;
   height: number;
   gridWidth: number;
@@ -31,14 +33,16 @@ export default class BlockScene {
   animateUntil = 0;
   dirty: boolean;
 
-  constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
-      { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
+  constructor({ x = 0, y = 0, width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
+      { x?: number, y?: number, width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
         orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
   ) {
-    this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
+    this.init({ x, y,width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
   }
 
-  resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
+  resize({ x = 0, y = 0, width = this.width, height = this.height, animate = true }: { x?: number, y?: number, width?: number, height?: number, animate: boolean }): void {
+    this.x = x;
+    this.y = y;
     this.width = width;
     this.height = height;
     this.gridSize = this.width / this.gridWidth;
@@ -224,7 +228,11 @@ export default class BlockScene {
   getTxAt(position: Position): TxView | void {
     if (this.layout) {
       const gridPosition = this.screenToGrid(position);
-      return this.layout.getTx(gridPosition);
+      if (gridPosition.x >= 0 && gridPosition.x < this.gridWidth && gridPosition.y >= 0 && gridPosition.y < this.gridHeight) {
+        return this.layout.getTx(gridPosition);
+      } else {
+        return null;
+      }
     } else {
       return null;
     }
@@ -238,8 +246,8 @@ export default class BlockScene {
     this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value));
   }
 
-  private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
-      { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
+  private init({ x, y, width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
+      { x: number, y: number, width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
         orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
   ): void {
     this.animationDuration = animationDuration || this.animationDuration || 1000;
@@ -264,7 +272,7 @@ export default class BlockScene {
     this.vbytesPerUnit = blockLimit / Math.pow(resolution / 1.02, 2);
     this.gridWidth = resolution;
     this.gridHeight = resolution;
-    this.resize({ width, height, animate: true });
+    this.resize({ x, y, width, height, animate: true });
     this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
 
     this.txs = {};
@@ -274,7 +282,7 @@ export default class BlockScene {
   }
 
   private applyTxUpdate(tx: TxView, update: ViewUpdateParams): void {
-    this.animateUntil = Math.max(this.animateUntil, tx.update(update));
+    this.animateUntil = Math.max(this.animateUntil, tx.update(update, { minX: this.x, maxX: this.x + this.width, minY: this.y, maxY: this.y + this.height }));
   }
 
   private updateTxColor(tx: TxView, startTime: number, delay: number, animate: boolean = true, duration?: number): void {
@@ -390,6 +398,7 @@ export default class BlockScene {
           position: {
             x: tx.screenPosition.x + (direction === 'right' ? this.width + this.animationOffset : (direction === 'left' ? -this.width - this.animationOffset : 0)),
             y: tx.screenPosition.y + (direction === 'up' ? this.height + this.animationOffset : (direction === 'down' ? -this.height - this.animationOffset : 0)),
+            s: tx.screenPosition.s
           }
         },
         duration: this.animationDuration,
@@ -449,18 +458,18 @@ export default class BlockScene {
           break;
       }
       return {
-        x: x + this.unitPadding - (slotSize / 2),
-        y: y + this.unitPadding - (slotSize / 2),
+        x: this.x + x + this.unitPadding - (slotSize / 2),
+        y: this.y + y + this.unitPadding - (slotSize / 2),
         s: squareSize
       };
     } else {
-      return { x: 0, y: 0, s: 0 };
+      return { x: this.x, y: this.y, s: 0 };
     }
   }
 
   private screenToGrid(position: Position): Position {
-    let x = position.x;
-    let y = this.height - position.y;
+    let x = position.x - this.x;
+    let y = position.y - this.y;
     let t;
 
     switch (this.orientation) {
@@ -917,4 +926,4 @@ class BlockLayout {
 
 function feeRateDescending(a: TxView, b: TxView) {
   return b.feerate - a.feerate;
-}
+}

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

@@ -8,7 +8,7 @@
   or compacting into a smaller Float32Array when there's space to do so.
 */
 
-import TxSprite from '@components/block-overview-graph/tx-sprite';
+import TxSprite from './tx-sprite';
 
 export class FastVertexArray {
   length: number;

frontend/src/app/components/block-overview-graph/tx-sprite.ts

@@ -1,13 +1,14 @@
-import { FastVertexArray } from '@components/block-overview-graph/fast-vertex-array';
-import { InterpolatedAttribute, Attributes, OptionalAttributes, SpriteUpdateParams, Update } from '@components/block-overview-graph/sprite-types';
+import { FastVertexArray } from './fast-vertex-array';
+import { InterpolatedAttribute, Attributes, OptionalAttributes, SpriteUpdateParams, Update } from './sprite-types';
 
 const attribKeys = ['a', 'b', 't', 'v'];
-const updateKeys = ['x', 'y', 's', 'r', 'g', 'b', 'a'];
+const updateKeys = ['x', 'y', 'r', 'g', 'b', 'a'];
+const attributeKeys = ['x', 'y', 's', 'r', 'g', 'b', 'a'];
 
 export default class TxSprite {
-  static vertexSize = 30;
+  static vertexSize = 28;
   static vertexCount = 6;
-  static dataSize: number = (30 * 6);
+  static dataSize: number = (28 * 6);
 
   vertexArray: FastVertexArray;
   vertexPointer: number;
@@ -16,15 +17,26 @@ export default class TxSprite {
   attributes: Attributes;
   tempAttributes: OptionalAttributes;
 
+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;
 
-  constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray) {
+
+  constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray, minX: number, maxX: number, minY: number, maxY: number) {
     const offsetTime = params.start;
     this.vertexArray = vertexArray;
-    this.vertexData = Array(VI.length).fill(0);
+    this.vertexData = Array(TxSprite.dataSize).fill(0);
+
     this.updateMap = {
       x: 0, y: 0, s: 0, r: 0, g: 0, b: 0, a: 0
     };
 
+    this.minX = minX;
+    this.maxX = maxX;
+    this.minY = minY;
+    this.maxY = maxY;
+
     this.attributes = {
       x: { a: params.x, b: params.x, t: offsetTime, v: 0, d: 0 },
       y: { a: params.y, b: params.y, t: offsetTime, v: 0, d: 0 },
@@ -77,11 +89,24 @@ export default class TxSprite {
       minDuration: minimum remaining transition duration when adjust = true
       temp: if true, this update is only temporary (can be reversed with 'resume')
   */
-  update(params: SpriteUpdateParams): void {
+  update(params: SpriteUpdateParams, minX?: number, maxX?: number, minY?: number, maxY?: number): void {
     const offsetTime = params.start || performance.now();
     const v = params.duration > 0 ? (1 / params.duration) : 0;
 
-    updateKeys.forEach(key => {
+    if (minX != null) {
+      this.minX = minX;
+    }
+    if (maxX != null) {
+      this.maxX = maxX;
+    }
+    if (minY != null) {
+      this.minY = minY;
+    }
+    if (maxY != null) {
+      this.maxY = maxY;
+    }
+
+    attributeKeys.forEach(key => {
       this.updateMap[key] = params[key];
     });
 
@@ -139,18 +164,32 @@ export default class TxSprite {
         ...this.tempAttributes
       };
     }
-    const size = attributes.s;
 
     // update vertex data in place
     // ugly, but avoids overhead of allocating large temporary arrays
-    const vertexStride = VI.length + 2;
+    const vertexStride = VI.length + 4;
     for (let vertex = 0; vertex < 6; vertex++) {
-      this.vertexData[vertex * vertexStride] = vertexOffsetFactors[vertex][0];
-      this.vertexData[(vertex * vertexStride) + 1] = vertexOffsetFactors[vertex][1];
-      for (let step = 0; step < VI.length; step++) {
+      this.vertexData[vertex * vertexStride] = this.minX;
+      this.vertexData[(vertex * vertexStride) + 1] = this.minY;
+      this.vertexData[(vertex * vertexStride) + 2] = this.maxX;
+      this.vertexData[(vertex * vertexStride) + 3] = this.maxY;
+
+      // x
+      this.vertexData[(vertex * vertexStride) + 4] = attributes[VI[0].a][VI[0].f] + (vertexOffsetFactors[vertex][0] * attributes.s.a);
+      this.vertexData[(vertex * vertexStride) + 5] = attributes[VI[1].a][VI[1].f] + (vertexOffsetFactors[vertex][0] * attributes.s.b);
+      this.vertexData[(vertex * vertexStride) + 6] = attributes[VI[2].a][VI[2].f];
+      this.vertexData[(vertex * vertexStride) + 7] = attributes[VI[3].a][VI[3].f];
+
+      // y
+      this.vertexData[(vertex * vertexStride) + 8] = attributes[VI[4].a][VI[4].f] + (vertexOffsetFactors[vertex][1] * attributes.s.a);
+      this.vertexData[(vertex * vertexStride) + 9] = attributes[VI[5].a][VI[5].f] + (vertexOffsetFactors[vertex][1] * attributes.s.b);
+      this.vertexData[(vertex * vertexStride) + 10] = attributes[VI[6].a][VI[6].f];
+      this.vertexData[(vertex * vertexStride) + 11] = attributes[VI[7].a][VI[7].f];
+
+      for (let step = 8; step < VI.length; step++) {
         // components of each field in the vertex array are defined by an entry in VI:
         // VI[i].a is the attribute, VI[i].f is the inner field, VI[i].offA and VI[i].offB are offset factors
-        this.vertexData[(vertex * vertexStride) + step + 2] = attributes[VI[step].a][VI[step].f];
+        this.vertexData[(vertex * vertexStride) + step + 4] = attributes[VI[step].a][VI[step].f];
       }
     }
 

frontend/src/app/components/block-overview-graph/tx-view.ts

@@ -1,10 +1,10 @@
-import TxSprite from '@components/block-overview-graph/tx-sprite';
-import { FastVertexArray } from '@components/block-overview-graph/fast-vertex-array';
-import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from '@components/block-overview-graph/sprite-types';
-import { hexToColor } from '@components/block-overview-graph/utils';
-import BlockScene from '@components/block-overview-graph/block-scene';
-import { TransactionStripped } from '@interfaces/node-api.interface';
-import { TransactionFlags } from '@app/shared/filters.utils';
+import TxSprite from './tx-sprite';
+import { FastVertexArray } from './fast-vertex-array';
+import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from './sprite-types';
+import { hexToColor } from './utils';
+import BlockScene from './block-scene';
+import { TransactionStripped } from '../../interfaces/node-api.interface';
+import { TransactionFlags } from '../../shared/filters.utils';
 
 const hoverTransitionTime = 300;
 const defaultHoverColor = hexToColor('1bd8f4');
@@ -106,7 +106,7 @@ export default class TxView implements TransactionStripped {
 
     returns minimum transition end time
   */
-  update(params: ViewUpdateParams): number {
+  update(params: ViewUpdateParams, { minX, maxX, minY, maxY }: { minX: number, maxX: number, minY: number, maxY: number }): number {
     if (params.jitter) {
       params.delay += (Math.random() * params.jitter);
     }
@@ -115,21 +115,35 @@ export default class TxView implements TransactionStripped {
       this.initialised = true;
       this.sprite = new TxSprite(
         toSpriteUpdate(params),
-        this.vertexArray
+        this.vertexArray,
+        minX,
+        maxX,
+        minY,
+        maxY
       );
       // apply any pending hover event
       if (this.hover) {
         params.duration = Math.max(params.duration, hoverTransitionTime);
-        this.sprite.update({
-          ...this.hoverColor,
-          duration: hoverTransitionTime,
-          adjust: false,
-          temp: true
-        });
+        this.sprite.update(
+          {
+            ...this.hoverColor,
+            duration: hoverTransitionTime,
+            adjust: false,
+            temp: true
+          },
+          minX,
+          maxX,
+          minY,
+          maxY
+        );
       }
     } else {
       this.sprite.update(
-        toSpriteUpdate(params)
+        toSpriteUpdate(params),
+        minX,
+        maxX,
+        minY,
+        maxY
       );
     }
     this.dirty = false;

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

@@ -1,6 +1,6 @@
-import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '@app/app.constants';
-import { Color } from '@components/block-overview-graph/sprite-types';
-import TxView from '@components/block-overview-graph/tx-view';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants';
+import { Color } from './sprite-types';
+import TxView from './tx-view';
 
 export function hexToColor(hex: string): Color {
   return {

frontend/src/app/components/block-overview-multi/block-overview-multi.component.html

@@ -0,0 +1,24 @@
+
+<div class="block-overview-graph">
+  <canvas *browserOnly class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
+  @if (!disableSpinner) {
+    <div class="loader-wrapper" [class.hidden]="!isLoading && !unavailable">
+      <div *ngIf="!unavailable" class="spinner-border ml-3 loading" role="status"></div>
+      <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
+    </div>
+  }
+  <app-block-overview-tooltip
+    [tx]="selectedTx || hoverTx"
+    [cursorPosition]="tooltipPosition"
+    [clickable]="!!selectedTx"
+    [auditEnabled]="auditHighlighting"
+    [blockConversion]="blockConversion"
+    [filterFlags]="activeFilterFlags"
+    [filterMode]="filterMode"
+    [relativeTime]="relativeTime"
+  ></app-block-overview-tooltip>
+  <app-block-filters *ngIf="webGlEnabled && showFilters && filtersAvailable" [excludeFilters]="excludeFilters" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
+  <div *ngIf="!webGlEnabled" class="placeholder">
+    <span i18n="webgl-disabled">Your browser does not support this feature.</span>
+  </div>
+</div>

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

@@ -0,0 +1,67 @@
+.block-overview-graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--stat-box-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-column: 1/-1;
+
+  .placeholder {
+    display: flex;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.graph-alignment {
+  position: relative;
+  width: 100%;
+}
+
+.grid-align {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 75px);
+  justify-content: center;
+}
+
+.block-overview-canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &.clickable {
+    cursor: pointer;
+  }
+}
+
+.loader-wrapper {
+  position: absolute;
+  background: #181b2d7f;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 500ms 500ms;
+  pointer-events: none;
+
+  &.hidden {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,803 @@
+import { Component, ElementRef, ViewChild, HostListener, Input, Output, EventEmitter, NgZone, AfterViewInit, OnDestroy, OnChanges } from '@angular/core';
+import { TransactionStripped } from '../../interfaces/node-api.interface';
+import { FastVertexArray } from '../block-overview-graph/fast-vertex-array';
+import BlockScene from '../block-overview-graph/block-scene';
+import TxSprite from '../block-overview-graph/tx-sprite';
+import TxView from '../block-overview-graph/tx-view';
+import { Color, Position } from '../block-overview-graph/sprite-types';
+import { Price } from '../../services/price.service';
+import { StateService } from '../../services/state.service';
+import { ThemeService } from '../../services/theme.service';
+import { Subscription } from 'rxjs';
+import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from '../block-overview-graph/utils';
+import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
+import { detectWebGL } from '../../shared/graphs.utils';
+
+const unmatchedOpacity = 0.2;
+const unmatchedAuditColors = {
+  censored: setOpacity(defaultAuditColors.censored, unmatchedOpacity),
+  missing: setOpacity(defaultAuditColors.missing, unmatchedOpacity),
+  added: setOpacity(defaultAuditColors.added, unmatchedOpacity),
+  added_prioritized: setOpacity(defaultAuditColors.added_prioritized, unmatchedOpacity),
+  prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity),
+  accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity),
+};
+const unmatchedContrastAuditColors = {
+  censored: setOpacity(contrastAuditColors.censored, unmatchedOpacity),
+  missing: setOpacity(contrastAuditColors.missing, unmatchedOpacity),
+  added: setOpacity(contrastAuditColors.added, unmatchedOpacity),
+  added_prioritized: setOpacity(contrastAuditColors.added_prioritized, unmatchedOpacity),
+  prioritized: setOpacity(contrastAuditColors.prioritized, unmatchedOpacity),
+  accelerated: setOpacity(contrastAuditColors.accelerated, unmatchedOpacity),
+};
+
+@Component({
+  selector: 'app-block-overview-multi',
+  templateUrl: './block-overview-multi.component.html',
+  styleUrls: ['./block-overview-multi.component.scss'],
+})
+export class BlockOverviewMultiComponent implements AfterViewInit, OnDestroy, OnChanges {
+  @Input() isLoading: boolean;
+  @Input() resolution: number;
+  @Input() numBlocks: number;
+  @Input() padding: number = 0;
+  @Input() blockWidth: number = 360;
+  @Input() autofit: boolean = false;
+  @Input() blockLimit: number;
+  @Input() orientation = 'left';
+  @Input() flip = true;
+  @Input() animationDuration: number = 1000;
+  @Input() animationOffset: number | null = null;
+  @Input() disableSpinner = false;
+  @Input() mirrorTxid: string | void;
+  @Input() unavailable: boolean = false;
+  @Input() auditHighlighting: boolean = false;
+  @Input() showFilters: boolean = false;
+  @Input() excludeFilters: string[] = [];
+  @Input() filterFlags: bigint | null = null;
+  @Input() filterMode: FilterMode = 'and';
+  @Input() gradientMode: 'fee' | 'age' = 'fee';
+  @Input() relativeTime: number | null;
+  @Input() blockConversion: Price;
+  @Input() overrideColors: ((tx: TxView) => Color) | null = null;
+  @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
+  @Output() txHoverEvent = new EventEmitter<string>();
+  @Output() readyEvent = new EventEmitter();
+
+  @ViewChild('blockCanvas')
+  canvas: ElementRef<HTMLCanvasElement>;
+  themeChangedSubscription: Subscription;
+
+  gl: WebGLRenderingContext;
+  animationFrameRequest: number;
+  animationHeartBeat: number;
+  displayWidth: number;
+  displayHeight: number;
+  displayBlockWidth: number;
+  displayPadding: number;
+  cssWidth: number;
+  cssHeight: number;
+  shaderProgram: WebGLProgram;
+  vertexArray: FastVertexArray;
+  running: boolean;
+  scenes: BlockScene[] = [];
+  hoverTx: TxView | void;
+  selectedTx: TxView | void;
+  highlightTx: TxView | void;
+  mirrorTx: TxView | void;
+  tooltipPosition: Position;
+
+  readyNextFrame = false;
+  lastUpdate: number = 0;
+  pendingUpdates: {
+    count: number,
+    add: { [txid: string]: TransactionStripped },
+    remove: { [txid: string]: string },
+    change: { [txid: string]: { txid: string, rate: number | undefined, acc: boolean | undefined } },
+    direction?: string,
+  }[] = [];
+
+  searchText: string;
+  searchSubscription: Subscription;
+  filtersAvailable: boolean = true;
+  activeFilterFlags: bigint | null = null;
+
+  webGlEnabled = true;
+
+  constructor(
+    readonly ngZone: NgZone,
+    readonly elRef: ElementRef,
+    public stateService: StateService,
+    private themeService: ThemeService,
+  ) {
+    this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
+    this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
+  }
+
+  ngAfterViewInit(): void {
+    if (this.canvas) {
+      this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false);
+      this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false);
+      this.gl = this.canvas.nativeElement.getContext('webgl');
+      this.initScenes();
+
+      if (this.gl) {
+        this.initCanvas();
+        this.resizeCanvas();
+        this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => {
+          for (const scene of this.scenes) {
+            scene.setColorFunction(this.getColorFunction());
+          }
+        });
+      }
+    }
+  }
+
+  initScenes(): void {
+    for (const scene of this.scenes) {
+      if (scene) {
+        scene.destroy();
+      }
+    }
+    this.scenes = [];
+    this.pendingUpdates = [];
+    for (let i = 0; i < this.numBlocks; i++) {
+      this.scenes.push(null);
+      this.pendingUpdates.push({
+        count: 0,
+        add: {},
+        remove: {},
+        change: {},
+        direction: 'left',
+      });
+    }
+    this.resizeCanvas();
+    this.start();
+  }
+
+  ngOnChanges(changes): void {
+    if (changes.numBlocks) {
+      this.initScenes();
+    }
+    if (changes.orientation || changes.flip) {
+      for (const scene of this.scenes) {
+        scene?.setOrientation(this.orientation, this.flip);
+      }
+    }
+    if (changes.auditHighlighting) {
+      this.setHighlightingEnabled(this.auditHighlighting);
+    }
+    if (changes.overrideColor) {
+      for (const scene of this.scenes) {
+        scene?.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
+      }
+    }
+    if ((changes.filterFlags || changes.showFilters || changes.filterMode || changes.gradientMode)) {
+      this.setFilterFlags();
+    }
+  }
+
+  setFilterFlags(goggle?: ActiveFilter): void {
+    this.filterMode = goggle?.mode || this.filterMode;
+    this.gradientMode = goggle?.gradient || 'fee'; // this.gradientMode;
+    this.activeFilterFlags = goggle?.filters ? toFlags(goggle.filters) : this.filterFlags;
+    for (const scene of this.scenes) {
+      if (scene) {
+        if (this.activeFilterFlags != null && this.filtersAvailable) {
+          scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode));
+        } else {
+          scene.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
+        }
+      }
+    }
+    this.start();
+  }
+
+  ngOnDestroy(): void {
+    if (this.animationFrameRequest) {
+      cancelAnimationFrame(this.animationFrameRequest);
+      clearTimeout(this.animationHeartBeat);
+    }
+    if (this.canvas) {
+      this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
+      this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
+      this.themeChangedSubscription?.unsubscribe();
+    }
+  }
+
+  clear(block: number, direction): void {
+    this.exit(block, direction);
+    this.start();
+  }
+
+  destroy(block: number): void {
+    if (this.scenes[block]) {
+      this.scenes[block].destroy();
+      this.clearUpdateQueue(block);
+      this.start();
+    }
+  }
+
+  // initialize the scene without any entry transition
+  setup(block: number, transactions: TransactionStripped[], sort: boolean = false): void {
+    const filtersAvailable = transactions.reduce((flagSet, tx) => flagSet || tx.flags > 0, false);
+    if (filtersAvailable !== this.filtersAvailable) {
+      this.setFilterFlags();
+    }
+    this.filtersAvailable = filtersAvailable;
+    if (this.scenes[block]) {
+      this.clearUpdateQueue(block);
+      this.scenes[block].setup(transactions, sort);
+      this.readyNextFrame = true;
+      this.start();
+    }
+  }
+
+  enter(block: number, transactions: TransactionStripped[], direction: string): void {
+    if (this.scenes[block]) {
+      this.clearUpdateQueue(block);
+      this.scenes[block].enter(transactions, direction);
+      this.start();
+    }
+  }
+
+  exit(block: number, direction: string): void {
+    if (this.scenes[block]) {
+      this.clearUpdateQueue(block);
+      this.scenes[block].exit(direction);
+      this.start();
+    }
+  }
+
+  replace(block: number, transactions: TransactionStripped[], direction: string, sort: boolean = true, startTime?: number): void {
+    if (this.scenes[block]) {
+      this.clearUpdateQueue(block);
+      this.scenes[block].replace(transactions || [], direction, sort, startTime);
+      this.start();
+    }
+  }
+
+  // collates deferred updates into a set of consistent pending changes
+  queueUpdate(block: number, add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left'): void {
+    for (const tx of add) {
+      this.pendingUpdates[block].add[tx.txid] = tx;
+      delete this.pendingUpdates[block].remove[tx.txid];
+      delete this.pendingUpdates[block].change[tx.txid];
+    }
+    for (const txid of remove) {
+      delete this.pendingUpdates[block].add[txid];
+      this.pendingUpdates[block].remove[txid] = txid;
+      delete this.pendingUpdates[block].change[txid];
+    }
+    for (const tx of change) {
+      if (this.pendingUpdates[block].add[tx.txid]) {
+        this.pendingUpdates[block].add[tx.txid].rate = tx.rate;
+        this.pendingUpdates[block].add[tx.txid].acc = tx.acc;
+      } else {
+        this.pendingUpdates[block].change[tx.txid] = tx;
+      }
+    }
+    this.pendingUpdates[block].direction = direction;
+    this.pendingUpdates[block].count++;
+  }
+
+  deferredUpdate(block: number, add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left'): void {
+    this.queueUpdate(block, add, remove, change, direction);
+    this.applyQueuedUpdates();
+  }
+
+  applyQueuedUpdates(): void {
+    for (const [index, pendingUpdate] of this.pendingUpdates.entries()) {
+      if (pendingUpdate.count && performance.now() > (this.lastUpdate + this.animationDuration)) {
+        this.applyUpdate(index, Object.values(pendingUpdate.add), Object.values(pendingUpdate.remove), Object.values(pendingUpdate.change), pendingUpdate.direction);
+        this.clearUpdateQueue(index);
+      }
+    }
+  }
+
+  clearUpdateQueue(block: number): void {
+    this.pendingUpdates[block] = {
+      count: 0,
+      add: {},
+      remove: {},
+      change: {},
+    };
+    this.lastUpdate = performance.now();
+  }
+
+  update(block: number, add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
+    // merge any pending changes into this update
+    this.queueUpdate(block, add, remove, change, direction);
+    this.applyUpdate(block,Object.values(this.pendingUpdates[block].add), Object.values(this.pendingUpdates[block].remove), Object.values(this.pendingUpdates[block].change), direction, resetLayout);
+    this.clearUpdateQueue(block);
+  }
+
+  applyUpdate(block: number, add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined, acc: boolean | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
+    if (this.scenes[block]) {
+      add = add.filter(tx => !this.scenes[block].txs[tx.txid]);
+      remove = remove.filter(txid => this.scenes[block].txs[txid]);
+      change = change.filter(tx => this.scenes[block].txs[tx.txid]);
+
+      if (this.gradientMode === 'age') {
+        this.scenes[block].updateAllColors();
+      }
+      this.scenes[block].update(add, remove, change, direction, resetLayout);
+      this.start();
+      this.lastUpdate = performance.now();
+    }
+  }
+
+  initCanvas(): void {
+    if (!this.canvas || !this.gl) {
+      return;
+    }
+
+    this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+    const shaderSet = [
+      {
+        type: this.gl.VERTEX_SHADER,
+        src: vertShaderSrc
+      },
+      {
+        type: this.gl.FRAGMENT_SHADER,
+        src: fragShaderSrc
+      }
+    ];
+
+    this.shaderProgram = this.buildShaderProgram(shaderSet);
+
+    this.gl.useProgram(this.shaderProgram);
+
+    // Set up alpha blending
+    this.gl.enable(this.gl.BLEND);
+    this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
+
+    const glBuffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, glBuffer);
+
+    /* SET UP SHADER ATTRIBUTES */
+    Object.keys(attribs).forEach((key, i) => {
+      attribs[key].pointer = this.gl.getAttribLocation(this.shaderProgram, key);
+      this.gl.enableVertexAttribArray(attribs[key].pointer);
+    });
+
+    this.start();
+  }
+
+  handleContextLost(event): void {
+    event.preventDefault();
+    cancelAnimationFrame(this.animationFrameRequest);
+    this.animationFrameRequest = null;
+    this.running = false;
+    this.gl = null;
+  }
+
+  handleContextRestored(event): void {
+    if (this.canvas?.nativeElement) {
+      this.gl = this.canvas.nativeElement.getContext('webgl');
+      if (this.gl) {
+        this.initCanvas();
+      }
+    }
+  }
+
+  @HostListener('window:resize', ['$event'])
+  resizeCanvas(): void {
+    if (this.canvas) {
+      this.cssWidth = this.canvas.nativeElement.offsetParent.clientWidth;
+      this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight;
+      this.displayWidth = window.devicePixelRatio * this.cssWidth;
+      this.displayHeight = window.devicePixelRatio * this.cssHeight;
+      this.displayBlockWidth = window.devicePixelRatio * this.blockWidth;
+      this.displayPadding = window.devicePixelRatio * this.padding;
+      this.canvas.nativeElement.width = this.displayWidth;
+      this.canvas.nativeElement.height = this.displayHeight;
+      if (this.gl) {
+        this.gl.viewport(0, 0, this.displayWidth, this.displayHeight);
+      }
+      for (let i = 0; i < this.scenes.length; i++) {
+        const blocksPerRow = Math.floor(this.displayWidth / (this.displayBlockWidth + (this.displayPadding * 2)));
+        const x = this.displayPadding + ((i % blocksPerRow) * (this.displayBlockWidth + (this.displayPadding * 2)));
+        const numRows = Math.ceil(this.scenes.length / blocksPerRow);
+        const row = numRows - Math.floor(i / blocksPerRow) - 1;
+        const y = this.displayPadding + this.displayHeight - ((row + 1) * (this.displayBlockWidth + (this.displayPadding * 2)));
+        if (this.scenes[i]) {
+          this.scenes[i].resize({ x, y, width: this.displayBlockWidth, height: this.displayBlockWidth, animate: false });
+          this.start();
+        } else {
+          this.scenes[i] = new BlockScene({ x, y, width: this.displayBlockWidth, height: this.displayBlockWidth, resolution: this.resolution,
+            blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, theme: this.themeService,
+            highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset,
+          colorFunction: this.getColorFunction() });
+          this.start();
+        }
+      }
+    }
+  }
+
+  compileShader(src, type): WebGLShader {
+    if (!this.gl) {
+      return;
+    }
+    const shader = this.gl.createShader(type);
+
+    this.gl.shaderSource(shader, src);
+    this.gl.compileShader(shader);
+
+    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+      console.log(`Error compiling ${type === this.gl.VERTEX_SHADER ? 'vertex' : 'fragment'} shader:`);
+      console.log(this.gl.getShaderInfoLog(shader));
+    }
+    return shader;
+  }
+
+  buildShaderProgram(shaderInfo): WebGLProgram {
+    if (!this.gl) {
+      return;
+    }
+    const program = this.gl.createProgram();
+
+    shaderInfo.forEach((desc) => {
+      const shader = this.compileShader(desc.src, desc.type);
+      if (shader) {
+        this.gl.attachShader(program, shader);
+      }
+    });
+
+    this.gl.linkProgram(program);
+
+    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+      console.log('Error linking shader program:');
+      console.log(this.gl.getProgramInfoLog(program));
+    }
+
+    return program;
+  }
+
+  start(): void {
+    this.running = true;
+    this.ngZone.runOutsideAngular(() => this.doRun());
+  }
+
+  doRun(): void {
+    if (this.animationFrameRequest) {
+      cancelAnimationFrame(this.animationFrameRequest);
+    }
+    this.animationFrameRequest = requestAnimationFrame(() => this.run());
+  }
+
+  run(now?: DOMHighResTimeStamp): void {
+    if (!now) {
+      now = performance.now();
+    }
+    this.applyQueuedUpdates();
+    // skip re-render if there's no change to the scene
+    if (this.scenes.length && this.gl) {
+      /* SET UP SHADER UNIFORMS */
+      // screen dimensions
+      this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight);
+      // frame timestamp
+      this.gl.uniform1f(this.gl.getUniformLocation(this.shaderProgram, 'now'), now);
+
+      if (this.vertexArray.dirty) {
+        /* SET UP SHADER ATTRIBUTES */
+        Object.keys(attribs).forEach((key, i) => {
+          this.gl.vertexAttribPointer(attribs[key].pointer,
+          attribs[key].count,  // number of primitives in this attribute
+          this.gl[attribs[key].type],  // type of primitive in this attribute (e.g. gl.FLOAT)
+          false, // never normalised
+          stride,   // distance between values of the same attribute
+          attribs[key].offset);  // offset of the first value
+        });
+
+        const pointArray = this.vertexArray.getVertexData();
+
+        if (pointArray.length) {
+          this.gl.bufferData(this.gl.ARRAY_BUFFER, pointArray, this.gl.DYNAMIC_DRAW);
+          this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize);
+        }
+        this.vertexArray.dirty = false;
+      } else {
+        const pointArray = this.vertexArray.getVertexData();
+        if (pointArray.length) {
+          this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize);
+        }
+      }
+
+      if (this.readyNextFrame) {
+        this.readyNextFrame = false;
+        this.readyEvent.emit();
+      }
+    }
+
+    /* LOOP */
+    if (this.running && this.scenes.length && now <= (this.scenes.reduce((max, scene) => scene.animateUntil > max ? scene.animateUntil : max, 0) + 500)) {
+      this.doRun();
+    } else {
+      if (this.animationHeartBeat) {
+        clearTimeout(this.animationHeartBeat);
+      }
+      this.animationHeartBeat = window.setTimeout(() => {
+        this.start();
+      }, 1000);
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  clickAway(event) {
+    if (!this.elRef.nativeElement.contains(event.target)) {
+      const currentPreview = this.selectedTx || this.hoverTx;
+      if (currentPreview) {
+        for (const scene of this.scenes) {
+          if (scene) {
+            scene.setHover(currentPreview, false);
+          }
+        }
+        this.start();
+      }
+      this.hoverTx = null;
+      this.selectedTx = null;
+      this.onTxHover(null);
+    }
+  }
+
+  @HostListener('pointerup', ['$event'])
+  onClick(event) {
+    if (!this.canvas) {
+      return;
+    }
+    if (event.target === this.canvas.nativeElement && event.pointerType === 'touch') {
+      this.setPreviewTx(event.offsetX, event.offsetY, true);
+    } else if (event.target === this.canvas.nativeElement) {
+      const keyMod = event.shiftKey || event.ctrlKey || event.metaKey;
+      const middleClick = event.which === 2 || event.button === 1;
+      this.onTxClick(event.offsetX, event.offsetY, keyMod || middleClick);
+    }
+  }
+
+  @HostListener('pointermove', ['$event'])
+  onPointerMove(event) {
+    if (!this.canvas) {
+      return;
+    }
+    if (event.target === this.canvas.nativeElement) {
+      this.setPreviewTx(event.offsetX, event.offsetY, false);
+    } else {
+      this.onPointerLeave(event);
+    }
+  }
+
+  @HostListener('pointerleave', ['$event'])
+  onPointerLeave(event) {
+    if (event.pointerType !== 'touch') {
+      this.setPreviewTx(-1, -1, true);
+    }
+  }
+
+  setPreviewTx(cssX: number, cssY: number, clicked: boolean = false) {
+    const x = cssX * window.devicePixelRatio;
+    const y = cssY * window.devicePixelRatio;
+    if (!this.selectedTx || clicked) {
+      this.tooltipPosition = {
+        x: cssX,
+        y: cssY
+      };
+      const currentPreview = this.selectedTx || this.hoverTx;
+      let selected;
+      for (const scene of this.scenes) {
+        if (scene) {
+          selected = scene.getTxAt({ x, y: this.displayHeight - y });
+          if (selected) {
+            break;
+          }
+        }
+      }
+
+      if (selected !== currentPreview) {
+        if (currentPreview) {
+          for (const scene of this.scenes) {
+            if (scene) {
+              scene.setHover(currentPreview, false);
+              break;
+            }
+          }
+          this.start();
+        }
+        if (selected) {
+          for (const scene of this.scenes) {
+            if (scene) {
+              scene.setHover(selected, true);
+              break;
+            }
+          }
+          this.start();
+          if (clicked) {
+            this.selectedTx = selected;
+          } else {
+            this.hoverTx = selected;
+            this.onTxHover(this.hoverTx ? this.hoverTx.txid : null);
+          }
+        } else {
+          if (clicked) {
+            this.selectedTx = null;
+          }
+          this.hoverTx = null;
+          this.onTxHover(null);
+        }
+      } else if (clicked) {
+        if (selected === this.selectedTx) {
+          this.hoverTx = this.selectedTx;
+          this.selectedTx = null;
+          this.onTxHover(this.hoverTx ? this.hoverTx.txid : null);
+        } else {
+          this.selectedTx = selected;
+        }
+      }
+    }
+  }
+
+  updateSearchHighlight(): void {
+    if (this.highlightTx && this.highlightTx.txid !== this.searchText) {
+      for (const scene of this.scenes) {
+        if (scene) {
+          scene.setHighlight(this.highlightTx, false);
+        }
+      }
+      this.start();
+    } else if (this.searchText && this.searchText.length === 64) {
+      for (const scene of this.scenes) {
+        if (scene) {
+          const highlightTx = scene.txs[this.searchText];
+          if (highlightTx) {
+            scene.setHighlight(highlightTx, true);
+            this.highlightTx = highlightTx;
+            this.start();
+          }
+        }
+      }
+    }
+  }
+
+  setHighlightingEnabled(enabled: boolean): void {
+    for (const scene of this.scenes) {
+      scene.setHighlighting(enabled);
+    }
+    this.start();
+  }
+
+  onTxClick(cssX: number, cssY: number, keyModifier: boolean = false) {
+    for (const scene of this.scenes) {
+      if (scene) {
+        const x = cssX * window.devicePixelRatio;
+        const y = cssY * window.devicePixelRatio;
+        const selected = scene.getTxAt({ x, y: this.displayHeight - y });
+        if (selected && selected.txid) {
+          this.txClickEvent.emit({ tx: selected, keyModifier });
+          return;
+        }
+      }
+    }
+  }
+
+  onTxHover(hoverId: string) {
+    this.txHoverEvent.emit(hoverId);
+  }
+
+  getColorFunction(): ((tx: TxView) => Color) {
+    if (this.overrideColors) {
+      return this.overrideColors;
+    } else if (this.filterFlags) {
+      return this.getFilterColorFunction(this.filterFlags, this.gradientMode);
+    } else if (this.activeFilterFlags) {
+      return this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode);
+    } else {
+      return this.getFilterColorFunction(0n, this.gradientMode);
+    }
+  }
+
+  getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
+    return (tx: TxView) => {
+      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
+          return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
+        } else {
+          return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
+        }
+      } else {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
+          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
+            tx,
+            defaultColors.unmatchedfee,
+            unmatchedAuditColors,
+            this.relativeTime || (Date.now() / 1000)
+          );
+        } else {
+          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : contrastColorFunction(
+            tx,
+            contrastColors.unmatchedfee,
+            unmatchedContrastAuditColors,
+            this.relativeTime || (Date.now() / 1000)
+          );
+        }
+      }
+    };
+  }
+}
+
+// WebGL shader attributes
+const attribs = {
+  bounds: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  posX: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  posY: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  colR: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  colG: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  colB: { type: 'FLOAT', count: 4, pointer: null, offset: 0 },
+  colA: { type: 'FLOAT', count: 4, pointer: null, offset: 0 }
+};
+// Calculate the number of bytes per vertex based on specified attributes
+const stride = Object.values(attribs).reduce((total, attrib) => {
+  return total + (attrib.count * 4);
+}, 0);
+// Calculate vertex attribute offsets
+for (let i = 0, offset = 0; i < Object.keys(attribs).length; i++) {
+  const attrib = Object.values(attribs)[i];
+  attrib.offset = offset;
+  offset += (attrib.count * 4);
+}
+
+const vertShaderSrc = `
+varying lowp vec4 vColor;
+
+// each attribute contains [x: startValue, y: endValue, z: startTime, w: rate]
+// shader interpolates between start and end values at the given rate, from the given time
+
+attribute vec4 bounds;
+attribute vec4 posX;
+attribute vec4 posY;
+attribute vec4 colR;
+attribute vec4 colG;
+attribute vec4 colB;
+attribute vec4 colA;
+
+uniform vec2 screenSize;
+uniform float now;
+
+float smootherstep(float x) {
+  x = clamp(x, 0.0, 1.0);
+  float ix = 1.0 - x;
+  x = x * x;
+  return x / (x + ix * ix);
+}
+
+float interpolateAttribute(vec4 attr) {
+  float d = (now - attr.z) * attr.w;
+  float delta = smootherstep(d);
+  return mix(attr.x, attr.y, delta);
+}
+
+void main() {
+  vec4 screenTransform = vec4(2.0 / screenSize.x, 2.0 / screenSize.y, -1.0, -1.0);
+  // vec4 screenTransform = vec4(1.0 / screenSize.x, 1.0 / screenSize.y, -0.5, -0.5);
+  vec2 position = clamp(vec2(interpolateAttribute(posX), interpolateAttribute(posY)), bounds.xy, bounds.zw);
+  gl_Position = vec4(position * screenTransform.xy + screenTransform.zw, 1.0, 1.0);
+
+  float red = interpolateAttribute(colR);
+  float green = interpolateAttribute(colG);
+  float blue = interpolateAttribute(colB);
+  float alpha = interpolateAttribute(colA);
+
+  vColor = vec4(red, green, blue, alpha);
+}
+`;
+
+const fragShaderSrc = `
+varying lowp vec4 vColor;
+
+void main() {
+  gl_FragColor = vColor;
+  // premultiply alpha
+  gl_FragColor.rgb *= gl_FragColor.a;
+}
+`;

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

@@ -1,9 +1,9 @@
 import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { Position } from '@components/block-overview-graph/sprite-types.js';
-import { Price } from '@app/services/price.service';
-import { TransactionStripped } from '@interfaces/node-api.interface.js';
-import { Filter, FilterMode, TransactionFlags, toFilters } from '@app/shared/filters.utils';
-import { Block } from '@interfaces/electrs.interface.js';
+import { Position } from '../../components/block-overview-graph/sprite-types.js';
+import { Price } from '../../services/price.service';
+import { TransactionStripped } from '../../interfaces/node-api.interface.js';
+import { Filter, FilterMode, TransactionFlags, toFilters } from '../../shared/filters.utils';
+import { Block } from '../../interfaces/electrs.interface.js';
 
 @Component({
   selector: 'app-block-overview-tooltip',

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

@@ -1,18 +1,18 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { echarts, EChartsOption } from '@app/graphs/echarts';
+import { echarts, EChartsOption } from '../../graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '@app/services/api.service';
-import { SeoService } from '@app/services/seo.service';
+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 '@app/shared/graphs.utils';
-import { MiningService } from '@app/services/mining.service';
-import { StorageService } from '@app/services/storage.service';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
+import { MiningService } from '../../services/mining.service';
+import { StorageService } from '../../services/storage.service';
 import { ActivatedRoute } from '@angular/router';
-import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
-import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
-import { StateService } from '@app/services/state.service';
+import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-block-rewards-graph',

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

@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
-import { EChartsOption} from '@app/graphs/echarts';
+import { EChartsOption} from '../../graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '@app/services/api.service';
-import { SeoService } from '@app/services/seo.service';
+import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { StorageService } from '@app/services/storage.service';
-import { MiningService } from '@app/services/mining.service';
+import { StorageService } from '../../services/storage.service';
+import { MiningService } from '../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
-import { download, formatterXAxis } from '@app/shared/graphs.utils';
-import { StateService } from '@app/services/state.service';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-block-sizes-weights-graph',

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

@@ -1,15 +1,15 @@
 import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, tap, catchError, shareReplay, filter } from 'rxjs/operators';
 import { of, Subscription } from 'rxjs';
-import { StateService } from '@app/services/state.service';
-import { SeoService } from '@app/services/seo.service';
-import { BlockExtended, TransactionStripped } from '@interfaces/node-api.interface';
-import { ApiService } from '@app/services/api.service';
-import { seoDescriptionNetwork } from '@app/shared/common.utils';
-import { BlockOverviewGraphComponent } from '@components/block-overview-graph/block-overview-graph.component';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
+import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { BlockOverviewGraphComponent } from '../block-overview-graph/block-overview-graph.component';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 
 function bestFitResolution(min, max, n): number {
   const target = (min + max) / 2;

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

@@ -1,16 +1,16 @@
 import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
 import { of, Subscription, asyncScheduler, forkJoin } from 'rxjs';
-import { StateService } from '@app/services/state.service';
-import { SeoService } from '@app/services/seo.service';
-import { OpenGraphService } from '@app/services/opengraph.service';
-import { BlockExtended, TransactionStripped } from '@interfaces/node-api.interface';
-import { ApiService } from '@app/services/api.service';
-import { seoDescriptionNetwork } from '@app/shared/common.utils';
-import { BlockOverviewGraphComponent } from '@components/block-overview-graph/block-overview-graph.component';
-import { ServicesApiServices } from '@app/services/services-api.service';
+import { StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
+import { OpenGraphService } from '../../services/opengraph.service';
+import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 @Component({
   selector: 'app-block-preview',

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

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { StateService } from '@app/services/state.service';
-import { Transaction, Vout } from '@interfaces/electrs.interface';
+import { StateService } from '../../services/state.service';
+import { Transaction, Vout } from '../../interfaces/electrs.interface';
 import { Observable, Subscription, catchError, combineLatest, map, of, startWith, switchMap, tap } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
-import { PreloadService } from '@app/services/preload.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { PreloadService } from '../../services/preload.service';
 
 @Component({
   selector: 'app-block-transactions',

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

@@ -1,23 +1,23 @@
 import { Component, OnInit, OnDestroy, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { ElectrsApiService } from '@app/services/electrs-api.service';
+import { ElectrsApiService } from '../../services/electrs-api.service';
 import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, filter } from 'rxjs/operators';
 import { Observable, of, Subscription, asyncScheduler, EMPTY, combineLatest, forkJoin } from 'rxjs';
-import { StateService } from '@app/services/state.service';
-import { SeoService } from '@app/services/seo.service';
-import { WebsocketService } from '@app/services/websocket.service';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
-import { Acceleration, BlockAudit, BlockExtended, TransactionStripped } from '@interfaces/node-api.interface';
-import { ApiService } from '@app/services/api.service';
-import { BlockOverviewGraphComponent } from '@components/block-overview-graph/block-overview-graph.component';
-import { detectWebGL } from '@app/shared/graphs.utils';
-import { seoDescriptionNetwork } from '@app/shared/common.utils';
-import { PriceService, Price } from '@app/services/price.service';
-import { CacheService } from '@app/services/cache.service';
-import { ServicesApiServices } from '@app/services/services-api.service';
-import { PreloadService } from '@app/services/preload.service';
-import { identifyPrioritizedTransactions } from '@app/shared/transaction.utils';
+import { StateService } from '../../services/state.service';
+import { SeoService } from '../../services/seo.service';
+import { WebsocketService } from '../../services/websocket.service';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { Acceleration, BlockAudit, BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
+import { detectWebGL } from '../../shared/graphs.utils';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { PriceService, Price } from '../../services/price.service';
+import { CacheService } from '../../services/cache.service';
+import { ServicesApiServices } from '../../services/services-api.service';
+import { PreloadService } from '../../services/preload.service';
+import { identifyPrioritizedTransactions } from '../../shared/transaction.utils';
 
 @Component({
   selector: 'app-block',
@@ -822,4 +822,4 @@ export class BlockComponent implements OnInit, OnDestroy {
        this.fees = blockReward;
     }
   }
-}
+}

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

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
-import { BlockComponent } from '@components/block/block.component';
-import { BlockTransactionsComponent } from '@components/block/block-transactions.component';
-import { SharedModule } from '@app/shared/shared.module';
+import { BlockComponent } from './block.component';
+import { BlockTransactionsComponent } from './block-transactions.component';
+import { SharedModule } from '../../shared/shared.module';
 
 const routes: Routes = [
   {

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

@@ -1,10 +1,10 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Observable, Subscription, delay, filter, tap } from 'rxjs';
-import { StateService } from '@app/services/state.service';
-import { specialBlocks } from '@app/app.constants';
-import { BlockExtended } from '@interfaces/node-api.interface';
+import { StateService } from '../../services/state.service';
+import { specialBlocks } from '../../app.constants';
+import { BlockExtended } from '../../interfaces/node-api.interface';
 import { Location } from '@angular/common';
-import { CacheService } from '@app/services/cache.service';
+import { CacheService } from '../../services/cache.service';
 
 interface BlockchainBlock extends BlockExtended {
   placeholder?: boolean;

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
 import { firstValueFrom, Subscription } from 'rxjs';
-import { StateService } from '@app/services/state.service';
-import { StorageService } from '@app/services/storage.service';
+import { StateService } from '../../services/state.service';
+import { StorageService } from '../../services/storage.service';
 
 @Component({
   selector: 'app-blockchain',

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

@@ -2,14 +2,13 @@ import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, I
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, combineLatest, Observable, timer, of, Subscription } from 'rxjs';
 import { debounceTime, delayWhen, filter, map, retryWhen, scan, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
-import { BlockExtended } from '@interfaces/node-api.interface';
-import { ApiService } from '@app/services/api.service';
-import { StateService } from '@app/services/state.service';
-import { WebsocketService } from '@app/services/websocket.service';
-import { SeoService } from '@app/services/seo.service';
-import { OpenGraphService } from '@app/services/opengraph.service';
-import { seoDescriptionNetwork } from '@app/shared/common.utils';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { BlockExtended } from '../../interfaces/node-api.interface';
+import { ApiService } from '../../services/api.service';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
+import { SeoService } from '../../services/seo.service';
+import { OpenGraphService } from '../../services/opengraph.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
 
 @Component({
   selector: 'app-blocks-list',
@@ -50,7 +49,6 @@ export class BlocksList implements OnInit {
     private ogService: OpenGraphService,
     private route: ActivatedRoute,
     private router: Router,
-    private relativeUrlPipe: RelativeUrlPipe,
     @Inject(LOCALE_ID) private locale: string,
   ) {
     this.isMempoolModule = this.stateService.env.BASE_MODULE === 'mempool';
@@ -184,7 +182,7 @@ export class BlocksList implements OnInit {
   }
 
   pageChange(page: number): void {
-    this.router.navigate([this.relativeUrlPipe.transform('/blocks/'), page]);
+    this.router.navigate(['blocks', page]);
   }
 
   trackByBlock(index: number, block: BlockExtended): number {

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

@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { combineLatest, Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
-import { StateService } from '@app/services/state.service';
-import { WebsocketService } from '@app/services/websocket.service';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-calculator',

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

@@ -1,17 +1,15 @@
 <ng-template [ngIf]="button" [ngIfElse]="btnLink">
-  <button [class]="class" type="button" [disabled]="text === ''" style="box-shadow: none;" (click)="copyText()">
-    <span style="position: relative;top: -2px;left: 1px;">
+  <button #btn [attr.data-clipboard-text]="text" [class]="class" type="button" [disabled]="text === ''">
+    <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;top: -2px;left: 1px;">
       <app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
-      <span *ngIf="showMessage" class="copied-message" style="top: 29px; left: -23.5px;">{{ copiedMessage }}</span>
     </span>
   </button>
 </ng-template>
 
 <ng-template #btnLink>
-  <span style="position: relative;">
-    <button class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" style="box-shadow: none;" (click)="copyText()">
+  <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
+    <button #btn class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" [attr.data-clipboard-text]="text"> 
       <app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
     </button>
-    <span *ngIf="showMessage" class="copied-message" style="top: 29px; left: -23.5px;">{{ copiedMessage }}</span>
   </span>
 </ng-template>

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

@@ -7,19 +7,7 @@
   padding-left: 0.4rem;
 }
 
-.copied-message {
-  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
-  color: var(--fg);
-  font-family: sans-serif;
-  font-size: .8rem;
-  font-weight: 400;
-  text-decoration: none;
-  text-align: left;
-  padding: .6em .75rem;
-  border-radius: 4px;
-  position: absolute;
-  white-space: nowrap;
-  box-shadow: 0 .5rem 1rem -.5rem #000;
-  z-index: 1000;
-  opacity: .9;
-}
+img {
+  position: relative;
+  left: -3px;
+}

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

@@ -1,4 +1,6 @@
-import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, ViewChild, ElementRef, AfterViewInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import * as ClipboardJS from 'clipboard';
+import * as tlite from 'tlite';
 
 @Component({
   selector: 'app-clipboard',
@@ -6,14 +8,15 @@ import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@a
   styleUrls: ['./clipboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ClipboardComponent {
+export class ClipboardComponent implements AfterViewInit {
+  @ViewChild('btn') btn: ElementRef;
+  @ViewChild('buttonWrapper') buttonWrapper: ElementRef;
   @Input() button = false;
   @Input() class = 'btn btn-secondary ml-1';
   @Input() size: 'small' | 'normal' | 'large' = 'normal';
   @Input() text: string;
   @Input() leftPadding = true;
   copiedMessage: string = $localize`:@@clipboard.copied-message:Copied!`;
-  showMessage = false;
 
   widths = {
     small: '10',
@@ -21,40 +24,22 @@ export class ClipboardComponent {
     large: '18',
   };
 
-  constructor(
-    private cd: ChangeDetectorRef,
-  ) { }
+  clipboard: any;
 
-  async copyText() {
-    if (this.text && !this.showMessage) {
-      try {
-        await this.copyToClipboard(this.text);
-        this.showMessage = true;
-        this.cd.markForCheck();
-        setTimeout(() => {
-          this.showMessage = false;
-          this.cd.markForCheck();
-        }, 1000);
-      } catch (error) {
-        console.error('Clipboard copy failed:', error);
-      }
-    }
+  constructor() { }
+
+  ngAfterViewInit() {
+    this.clipboard = new ClipboardJS(this.btn.nativeElement);
+    this.clipboard.on('success', () => {
+      tlite.show(this.buttonWrapper.nativeElement);
+      setTimeout(() => {
+        tlite.hide(this.buttonWrapper.nativeElement);
+      }, 1000);
+    });
   }
 
-  async copyToClipboard(text: string) {
-    if (navigator.clipboard) {
-      await navigator.clipboard.writeText(text);
-    } else {
-      // Use the 'out of viewport hidden text area' trick on non-secure contexts
-      const textarea = document.createElement('textarea');
-      textarea.value = this.text;
-      textarea.style.opacity = '0';
-      textarea.setAttribute('readonly', 'true'); // Don't trigger keyboard on mobile
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand('copy');
-      textarea.remove();
-    }
+  onDestroy() {
+    this.clipboard.destroy();
   }
 
 }

frontend/src/app/components/clock-face/clock-face.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { Subscription, tap, timer } from 'rxjs';
-import { StateService } from '@app/services/state.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-clock-face',

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

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
 import { Observable, Subscription, of, switchMap, tap } from 'rxjs';
-import { StateService } from '@app/services/state.service';
-import { BlockExtended } from '@interfaces/node-api.interface';
-import { WebsocketService } from '@app/services/websocket.service';
-import { MempoolInfo, Recommendedfees } from '@interfaces/websocket.interface';
+import { StateService } from '../../services/state.service';
+import { BlockExtended } from '../../interfaces/node-api.interface';
+import { WebsocketService } from '../../services/websocket.service';
+import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 
 @Component({
   selector: 'app-clock',

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, ChangeDetectorRef } from '@angular/core';
 import { firstValueFrom, Subscription } from 'rxjs';
-import { StateService } from '@app/services/state.service';
+import { StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-clockchain',