Merge pull request #980 from knorrium/docker_node_16_10_0

Set Dockerfiles to use Node v16.10.0

.github/workflows/cypress.yml

@@ -25,7 +25,6 @@ jobs:
           wait-on-timeout: 120
           record: true
           parallel: true
-          env: BASE_MODULE=mempool
           group: Tests on ${{ matrix.browser }} (Mempool)
           browser: ${{ matrix.browser }}
           ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
@@ -46,7 +45,6 @@ jobs:
           record: true
           parallel: true
           spec: cypress/integration/liquid/liquid.spec.ts
-          env: BASE_MODULE=liquid
           group: Tests on ${{ matrix.browser }} (Liquid)
           browser: ${{ matrix.browser }}
           ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
@@ -67,7 +65,6 @@ jobs:
           record: true
           parallel: true
           spec: cypress/integration/bisq/bisq.spec.ts
-          env: BASE_MODULE=bisq
           group: Tests on ${{ matrix.browser }} (Bisq)
           browser: ${{ matrix.browser }}
           ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'

README.md

@@ -2,7 +2,7 @@
 
 Mempool is the fully featured visualizer, explorer, and API service running on [mempool.space](https://mempool.space/), an open source project developed and operated for the benefit of the Bitcoin community, with a focus on the emerging transaction fee market to help our transition into a multi-layer ecosystem.
 
-![mempool](https://mempool.space/resources/screenshots/v2.2.0-dashboard.png)
+![mempool](https://mempool.space/resources/screenshots/v2.2.1-dashboard.png)
 
 ## Installation Methods
 
@@ -176,7 +176,7 @@ Install the supplied nginx.conf and nginx-mempool.conf in /etc/nginx
 
 ```bash
   # install nginx and certbot
-  apt-get install -y nginx python-certbot-nginx
+  apt-get install -y nginx python3-certbot-nginx
 
   # install the mempool configuration for nginx
   cp nginx.conf nginx-mempool.conf /etc/nginx/

backend/mempool-config.sample.json

@@ -12,7 +12,8 @@
     "BLOCK_WEIGHT_UNITS": 4000000,
     "INITIAL_BLOCKS_AMOUNT": 8,
     "MEMPOOL_BLOCKS_AMOUNT": 8,
-    "PRICE_FEED_UPDATE_INTERVAL": 3600
+    "PRICE_FEED_UPDATE_INTERVAL": 3600,
+    "USE_SECOND_NODE_FOR_MINFEE": false
   },
   "CORE_RPC": {
     "HOST": "127.0.0.1",
@@ -28,8 +29,7 @@
   "ESPLORA": {
     "REST_API_URL": "http://127.0.0.1:3000"
   },
-  "CORE_RPC_MINFEE": {
-    "ENABLED": false,
+  "SECOND_CORE_RPC": {
     "HOST": "127.0.0.1",
     "PORT": 8332,
     "USERNAME": "mempool",

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mempool-backend",
-  "version": "2.2.2",
+  "version": "2.3.0-dev",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mempool-backend",
-      "version": "2.2.2",
+      "version": "2.3.0-dev",
       "license": "GNU Affero General Public License v3.0",
       "dependencies": {
         "@mempool/bitcoin": "^3.0.3",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-backend",
-  "version": "2.2.2",
+  "version": "2.3.0-dev",
   "description": "Bitcoin mempool visualizer and blockchain explorer backend",
   "license": "GNU Affero General Public License v3.0",
   "homepage": "https://mempool.space",

backend/src/api/bisq/interfaces.ts

@@ -71,7 +71,7 @@ interface BisqScriptPubKey {
   addresses: string[];
   asm: string;
   hex: string;
-  reqSigs: number;
+  reqSigs?: number;
   type: string;
 }
 

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

@@ -11,4 +11,12 @@ export interface AbstractBitcoinApi {
   $getAddress(address: string): Promise<IEsploraApi.Address>;
   $getAddressTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]>;
   $getAddressPrefix(prefix: string): string[];
+  $sendRawTransaction(rawTransaction: string): Promise<string>;
+}
+export interface BitcoinRpcCredentials {
+  host: string;
+  port: number;
+  user: string;
+  pass: string;
+  timeout: number;
 }

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

@@ -3,16 +3,17 @@ import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
 import EsploraApi from './esplora-api';
 import BitcoinApi from './bitcoin-api';
 import ElectrumApi from './electrum-api';
+import bitcoinClient from './bitcoin-client';
 
 function bitcoinApiFactory(): AbstractBitcoinApi {
   switch (config.MEMPOOL.BACKEND) {
     case 'esplora':
       return new EsploraApi();
     case 'electrum':
-      return new ElectrumApi();
+      return new ElectrumApi(bitcoinClient);
     case 'none':
     default:
-      return new BitcoinApi();
+      return new BitcoinApi(bitcoinClient);
   }
 }
 

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

@@ -72,7 +72,7 @@ export namespace IBitcoinApi {
     time: number;                    //  (numeric) Same as blocktime
   }
 
-  interface Vin {
+  export interface Vin {
     txid?: string;                   //  (string) The transaction id
     vout?: number;                   //  (string)
     scriptSig?: {                    //  (json object) The script
@@ -82,17 +82,22 @@ export namespace IBitcoinApi {
     sequence: number;                //  (numeric) The script sequence number
     txinwitness?: string[];          //  (string) hex-encoded witness data
     coinbase?: string;
+    is_pegin?: boolean;              //  (boolean) Elements peg-in
   }
 
-  interface Vout {
+  export interface Vout {
     value: number;                   //  (numeric) The value in BTC
     n: number;                       //  (numeric) index
+    asset?: string;                  //  (string) Elements asset id
     scriptPubKey: {                  //  (json object)
       asm: string;                   //  (string) the asm
       hex: string;                   //  (string) the hex
-      reqSigs: number;               //  (numeric) The required sigs
+      reqSigs?: number;              //  (numeric) The required sigs
       type: string;                  //  (string) The type, eg 'pubkeyhash'
-      addresses: string[]            //  (string) bitcoin address
+      address?: string;              //  (string) bitcoin address
+      addresses?: string[];           //  (string) bitcoin addresses
+      pegout_chain?: string;         //  (string) Elements peg-out chain
+      pegout_addresses?: string[];   //  (string) Elements peg-out addresses
     };
   }
 

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

@@ -1,5 +1,3 @@
-import config from '../../config';
-import * as bitcoin from '@mempool/bitcoin';
 import * as bitcoinjs from 'bitcoinjs-lib';
 import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
 import { IBitcoinApi } from './bitcoin-api.interface';
@@ -10,16 +8,10 @@ import { TransactionExtended } from '../../mempool.interfaces';
 
 class BitcoinApi implements AbstractBitcoinApi {
   private rawMempoolCache: IBitcoinApi.RawMempool | null = null;
-  private bitcoindClient: any;
+  protected bitcoindClient: any;
 
-  constructor() {
-    this.bitcoindClient = new bitcoin.Client({
-      host: config.CORE_RPC.HOST,
-      port: config.CORE_RPC.PORT,
-      user: config.CORE_RPC.USERNAME,
-      pass: config.CORE_RPC.PASSWORD,
-      timeout: 60000,
-    });
+  constructor(bitcoinClient: any) {
+    this.bitcoindClient = bitcoinClient;
   }
 
   $getRawTransaction(txId: string, skipConversion = false, addPrevout = false): Promise<IEsploraApi.Transaction> {
@@ -106,6 +98,10 @@ class BitcoinApi implements AbstractBitcoinApi {
     return found;
   }
 
+  $sendRawTransaction(rawTransaction: string): Promise<string> {
+    return this.bitcoindClient.sendRawTransaction(rawTransaction);
+  }
+
   protected async $convertTransaction(transaction: IBitcoinApi.Transaction, addPrevout: boolean): Promise<IEsploraApi.Transaction> {
     let esploraTransaction: IEsploraApi.Transaction = {
       txid: transaction.txid,
@@ -123,7 +119,8 @@ class BitcoinApi implements AbstractBitcoinApi {
       return {
         value: vout.value * 100000000,
         scriptpubkey: vout.scriptPubKey.hex,
-        scriptpubkey_address: vout.scriptPubKey && vout.scriptPubKey.addresses ? vout.scriptPubKey.addresses[0] : '',
+        scriptpubkey_address: vout.scriptPubKey && vout.scriptPubKey.address ? vout.scriptPubKey.address
+          : vout.scriptPubKey.addresses ? vout.scriptPubKey.addresses[0] : '',
         scriptpubkey_asm: vout.scriptPubKey.asm ? this.convertScriptSigAsm(vout.scriptPubKey.asm) : '',
         scriptpubkey_type: this.translateScriptPubKeyType(vout.scriptPubKey.type),
       };
@@ -302,6 +299,11 @@ class BitcoinApi implements AbstractBitcoinApi {
       const witnessScript = vin.witness[vin.witness.length - 1];
       vin.inner_witnessscript_asm = this.convertScriptSigAsm(bitcoinjs.script.toASM(Buffer.from(witnessScript, 'hex')));
     }
+
+    if (vin.prevout.scriptpubkey_type === 'v1_p2tr' && vin.witness && vin.witness.length > 1) {
+      const witnessScript = vin.witness[vin.witness.length - 2];
+      vin.inner_witnessscript_asm = this.convertScriptSigAsm(bitcoinjs.script.toASM(Buffer.from(witnessScript, 'hex')));
+    }
   }
 
 }

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

@@ -1,53 +0,0 @@
-import config from '../../config';
-import * as bitcoin from '@mempool/bitcoin';
-import { IBitcoinApi } from './bitcoin-api.interface';
-
-class BitcoinBaseApi {
-  bitcoindClient: any;
-  bitcoindClientMempoolInfo: any;
-
-  constructor() {
-    this.bitcoindClient = new bitcoin.Client({
-      host: config.CORE_RPC.HOST,
-      port: config.CORE_RPC.PORT,
-      user: config.CORE_RPC.USERNAME,
-      pass: config.CORE_RPC.PASSWORD,
-      timeout: 60000,
-    });
-
-    if (config.CORE_RPC_MINFEE.ENABLED) {
-      this.bitcoindClientMempoolInfo = new bitcoin.Client({
-        host: config.CORE_RPC_MINFEE.HOST,
-        port: config.CORE_RPC_MINFEE.PORT,
-        user: config.CORE_RPC_MINFEE.USERNAME,
-        pass: config.CORE_RPC_MINFEE.PASSWORD,
-        timeout: 60000,
-      });
-    }
-  }
-
-  $getMempoolInfo(): Promise<IBitcoinApi.MempoolInfo> {
-    if (config.CORE_RPC_MINFEE.ENABLED) {
-      return Promise.all([
-        this.bitcoindClient.getMempoolInfo(),
-        this.bitcoindClientMempoolInfo.getMempoolInfo()
-      ]).then(([mempoolInfo, secondMempoolInfo]) => {
-        mempoolInfo.maxmempool = secondMempoolInfo.maxmempool;
-        mempoolInfo.mempoolminfee = secondMempoolInfo.mempoolminfee;
-        mempoolInfo.minrelaytxfee = secondMempoolInfo.minrelaytxfee;
-        return mempoolInfo;
-      });
-    }
-    return this.bitcoindClient.getMempoolInfo();
-  }
-
-  $getBlockchainInfo(): Promise<IBitcoinApi.BlockchainInfo> {
-    return this.bitcoindClient.getBlockchainInfo();
-  }
-
-  $validateAddress(address: string): Promise<IBitcoinApi.AddressInformation> {
-    return this.bitcoindClient.validateAddress(address);
-  }
-}
-
-export default new BitcoinBaseApi();

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

@@ -0,0 +1,13 @@
+import config from '../../config';
+import * as bitcoin from '@mempool/bitcoin';
+import { BitcoinRpcCredentials } from './bitcoin-api-abstract-factory';
+
+const nodeRpcCredentials: BitcoinRpcCredentials = {
+  host: config.CORE_RPC.HOST,
+  port: config.CORE_RPC.PORT,
+  user: config.CORE_RPC.USERNAME,
+  pass: config.CORE_RPC.PASSWORD,
+  timeout: 60000,
+};
+
+export default new bitcoin.Client(nodeRpcCredentials);

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

@@ -0,0 +1,13 @@
+import config from '../../config';
+import * as bitcoin from '@mempool/bitcoin';
+import { BitcoinRpcCredentials } from './bitcoin-api-abstract-factory';
+
+const nodeRpcCredentials: BitcoinRpcCredentials = {
+  host: config.SECOND_CORE_RPC.HOST,
+  port: config.SECOND_CORE_RPC.PORT,
+  user: config.SECOND_CORE_RPC.USERNAME,
+  pass: config.SECOND_CORE_RPC.PASSWORD,
+  timeout: 60000,
+};
+
+export default new bitcoin.Client(nodeRpcCredentials);

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

@@ -1,23 +1,20 @@
 import config from '../../config';
 import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
-import { IBitcoinApi } from './bitcoin-api.interface';
 import { IEsploraApi } from './esplora-api.interface';
 import { IElectrumApi } from './electrum-api.interface';
 import BitcoinApi from './bitcoin-api';
-import mempool from '../mempool';
 import logger from '../../logger';
 import * as ElectrumClient from '@mempool/electrum-client';
 import * as sha256 from 'crypto-js/sha256';
 import * as hexEnc from 'crypto-js/enc-hex';
 import loadingIndicators from '../loading-indicators';
 import memoryCache from '../memory-cache';
-import bitcoinBaseApi from './bitcoin-base.api';
 
 class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
   private electrumClient: any;
 
-  constructor() {
-    super();
+  constructor(bitcoinClient: any) {
+    super(bitcoinClient);
 
     const electrumConfig = { client: 'mempool-v2', version: '1.4' };
     const electrumPersistencePolicy = { retryPeriod: 10000, maxRetry: 1000, callback: null };
@@ -45,7 +42,7 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
   }
 
   async $getAddress(address: string): Promise<IEsploraApi.Address> {
-    const addressInfo = await bitcoinBaseApi.$validateAddress(address);
+    const addressInfo = await this.bitcoindClient.validateAddress(address);
     if (!addressInfo || !addressInfo.isvalid) {
       return ({
         'address': address,
@@ -90,16 +87,13 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
         },
         'electrum': true,
       };
-    } catch (e) {
-      if (e === 'failed to get confirmed status') {
-        e = 'The number of transactions on this address exceeds the Electrum server limit';
-      }
-      throw new Error(typeof e === 'string' ? e : 'Error');
+    } catch (e: any) {
+      throw new Error(typeof e === 'string' ? e : e && e.message || e);
     }
   }
 
   async $getAddressTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]> {
-    const addressInfo = await bitcoinBaseApi.$validateAddress(address);
+    const addressInfo = await this.bitcoindClient.validateAddress(address);
     if (!addressInfo || !addressInfo.isvalid) {
      return [];
     }
@@ -127,12 +121,9 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
       }
 
       return transactions;
-    } catch (e) {
+    } catch (e: any) {
       loadingIndicators.setProgress('address-' + address, 100);
-      if (e === 'failed to get confirmed status') {
-        e = 'The number of transactions on this address exceeds the Electrum server limit';
-      }
-      throw new Error(typeof e === 'string' ? e : 'Error');
+      throw new Error(typeof e === 'string' ? e : e && e.message || e);
     }
   }
 

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

@@ -56,6 +56,10 @@ class ElectrsApi implements AbstractBitcoinApi {
   $getAddressPrefix(prefix: string): string[] {
     throw new Error('Method not implemented.');
   }
+
+  $sendRawTransaction(rawTransaction: string): Promise<string> {
+    throw new Error('Method not implemented.');
+  }
 }
 
 export default ElectrsApi;

backend/src/api/blocks.ts

@@ -6,7 +6,7 @@ import { BlockExtended, TransactionExtended } from '../mempool.interfaces';
 import { Common } from './common';
 import diskCache from './disk-cache';
 import transactionUtils from './transaction-utils';
-import bitcoinBaseApi from './bitcoin/bitcoin-base.api';
+import bitcoinClient from './bitcoin/bitcoin-client';
 
 class Blocks {
   private blocks: BlockExtended[] = [];
@@ -45,7 +45,7 @@ class Blocks {
     }
 
     if (!this.lastDifficultyAdjustmentTime) {
-      const blockchainInfo = await bitcoinBaseApi.$getBlockchainInfo();
+      const blockchainInfo = await bitcoinClient.getBlockchainInfo();
       if (blockchainInfo.blocks === blockchainInfo.headers) {
         const heightDiff = blockHeightTip % 2016;
         const blockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff);

backend/src/api/common.ts

@@ -1,6 +1,8 @@
 import { CpfpInfo, TransactionExtended, TransactionStripped } from '../mempool.interfaces';
 import config from '../config';
 export class Common {
+  static nativeAssetId = '6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d';
+
   static median(numbers: number[]) {
     let medianNr = 0;
     const numsLen = numbers.length;

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

@@ -0,0 +1,111 @@
+import { IBitcoinApi } from '../bitcoin/bitcoin-api.interface';
+import bitcoinClient from '../bitcoin/bitcoin-client';
+import bitcoinSecondClient from '../bitcoin/bitcoin-second-client';
+import { Common } from '../common';
+import { DB } from '../../database';
+import logger from '../../logger';
+
+class ElementsParser {
+  private isRunning = false;
+
+  constructor() { }
+
+  public async $parse() {
+    if (this.isRunning) {
+      return;
+    }
+    try {
+      this.isRunning = true;
+      const result = await bitcoinClient.getChainTips();
+      const tip = result[0].height;
+      const latestBlock = await this.$getLatestBlockFromDatabase();
+      for (let height = latestBlock.block + 1; height <= tip; height++) {
+        const blockHash: IBitcoinApi.ChainTips = await bitcoinClient.getBlockHash(height);
+        const block: IBitcoinApi.Block = await bitcoinClient.getBlock(blockHash, 2);
+        await this.$parseBlock(block);
+        await this.$saveLatestBlockToDatabase(block.height, block.time, block.hash);
+      }
+      this.isRunning = false;
+    } catch (e) {
+      this.isRunning = false;
+      throw new Error(e instanceof Error ? e.message : 'Error');
+    }
+  }
+
+  public async $getPegDataByMonth(): Promise<any> {
+    const connection = await DB.pool.getConnection();
+    const query = `SELECT SUM(amount) AS amount, DATE_FORMAT(FROM_UNIXTIME(datetime), '%Y-%m-01') AS date FROM elements_pegs GROUP BY DATE_FORMAT(FROM_UNIXTIME(datetime), '%Y%m')`;
+    const [rows] = await connection.query<any>(query);
+    connection.release();
+    return rows;
+  }
+
+  protected async $parseBlock(block: IBitcoinApi.Block) {
+    for (const tx of block.tx) {
+      await this.$parseInputs(tx, block);
+      await this.$parseOutputs(tx, block);
+    }
+  }
+
+  protected async $parseInputs(tx: IBitcoinApi.Transaction, block: IBitcoinApi.Block) {
+    for (const [index, input] of tx.vin.entries()) {
+      if (input.is_pegin) {
+        await this.$parsePegIn(input, index, tx.txid, block);
+      }
+    }
+  }
+
+  protected async $parsePegIn(input: IBitcoinApi.Vin, vindex: number, txid: string, block: IBitcoinApi.Block) {
+    const bitcoinTx: IBitcoinApi.Transaction = await bitcoinSecondClient.getRawTransaction(input.txid, true);
+    const prevout = bitcoinTx.vout[input.vout || 0];
+    const outputAddress = prevout.scriptPubKey.address || (prevout.scriptPubKey.addresses && prevout.scriptPubKey.addresses[0]) || '';
+    await this.$savePegToDatabase(block.height, block.time, prevout.value * 100000000, txid, vindex,
+      outputAddress, bitcoinTx.txid, prevout.n, 1);
+  }
+
+  protected async $parseOutputs(tx: IBitcoinApi.Transaction, block: IBitcoinApi.Block) {
+    for (const output of tx.vout) {
+      if (output.scriptPubKey.pegout_chain) {
+        await this.$savePegToDatabase(block.height, block.time, 0 - output.value * 100000000, tx.txid, output.n,
+          (output.scriptPubKey.pegout_addresses && output.scriptPubKey.pegout_addresses[0] || ''), '', 0, 0);
+      }
+      if (!output.scriptPubKey.pegout_chain && output.scriptPubKey.type === 'nulldata'
+        && output.value && output.value > 0 && output.asset && output.asset === Common.nativeAssetId) {
+        await this.$savePegToDatabase(block.height, block.time, 0 - output.value * 100000000, tx.txid, output.n,
+          (output.scriptPubKey.pegout_addresses && output.scriptPubKey.pegout_addresses[0] || ''), '', 0, 1);
+      }
+    }
+  }
+
+  protected async $savePegToDatabase(height: number, blockTime: number, amount: number, txid: string,
+    txindex: number, bitcoinaddress: string, bitcointxid: string, bitcoinindex: number, final_tx: number): Promise<void> {
+    const connection = await DB.pool.getConnection();
+    const query = `INSERT INTO elements_pegs(
+        block, datetime, amount, txid, txindex, bitcoinaddress, bitcointxid, bitcoinindex, final_tx
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+
+    const params: (string | number)[] = [
+      height, blockTime, amount, txid, txindex, bitcoinaddress, bitcointxid, bitcoinindex, final_tx
+    ];
+    await connection.query(query, params);
+    connection.release();
+    logger.debug(`Saved L-BTC peg from block height #${height} with TXID ${txid}.`);
+  }
+
+  protected async $getLatestBlockFromDatabase(): Promise<any> {
+    const connection = await DB.pool.getConnection();
+    const query = `SELECT block, datetime, block_hash FROM last_elements_block`;
+    const [rows] = await connection.query<any>(query);
+    connection.release();
+    return rows[0];
+  }
+
+  protected async $saveLatestBlockToDatabase(blockHeight: number, datetime: number, blockHash: string) {
+    const connection = await DB.pool.getConnection();
+    const query = `UPDATE last_elements_block SET block = ?, datetime = ?, block_hash = ?`;
+    await connection.query<any>(query, [blockHeight, datetime, blockHash]);
+    connection.release();
+  }
+}
+
+export default new ElementsParser();

backend/src/api/mempool-blocks.ts

@@ -75,7 +75,8 @@ class MempoolBlocks {
     let blockSize = 0;
     let transactions: TransactionExtended[] = [];
     transactionsSorted.forEach((tx) => {
-      if (blockWeight + tx.weight <= config.MEMPOOL.BLOCK_WEIGHT_UNITS || mempoolBlocks.length === config.MEMPOOL.MEMPOOL_BLOCKS_AMOUNT) {
+      if (blockWeight + tx.weight <= config.MEMPOOL.BLOCK_WEIGHT_UNITS
+        || mempoolBlocks.length === config.MEMPOOL.MEMPOOL_BLOCKS_AMOUNT - 1) {
         blockWeight += tx.weight;
         blockSize += tx.size;
         transactions.push(tx);

backend/src/api/mempool.ts

@@ -5,8 +5,9 @@ import logger from '../logger';
 import { Common } from './common';
 import transactionUtils from './transaction-utils';
 import { IBitcoinApi } from './bitcoin/bitcoin-api.interface';
-import bitcoinBaseApi from './bitcoin/bitcoin-base.api';
 import loadingIndicators from './loading-indicators';
+import bitcoinClient from './bitcoin/bitcoin-client';
+import bitcoinSecondClient from './bitcoin/bitcoin-second-client';
 
 class Mempool {
   private static WEBSOCKET_REFRESH_RATE_MS = 10000;
@@ -61,7 +62,7 @@ class Mempool {
   }
 
   public async $updateMemPoolInfo() {
-    this.mempoolInfo = await bitcoinBaseApi.$getMempoolInfo();
+    this.mempoolInfo = await this.$getMempoolInfo();
   }
 
   public getMempoolInfo(): IBitcoinApi.MempoolInfo {
@@ -205,6 +206,21 @@ class Mempool {
       }
     }
   }
+
+  private $getMempoolInfo() {
+    if (config.MEMPOOL.USE_SECOND_NODE_FOR_MINFEE) {
+      return Promise.all([
+        bitcoinClient.getMempoolInfo(),
+        bitcoinSecondClient.getMempoolInfo()
+      ]).then(([mempoolInfo, secondMempoolInfo]) => {
+        mempoolInfo.maxmempool = secondMempoolInfo.maxmempool;
+        mempoolInfo.mempoolminfee = secondMempoolInfo.mempoolminfee;
+        mempoolInfo.minrelaytxfee = secondMempoolInfo.minrelaytxfee;
+        return mempoolInfo;
+      });
+    }
+    return bitcoinClient.getMempoolInfo();
+  }
 }
 
 export default new Mempool();

backend/src/api/statistics.ts

@@ -3,13 +3,14 @@ import { DB } from '../database';
 import logger from '../logger';
 
 import { Statistic, TransactionExtended, OptimizedStatistic } from '../mempool.interfaces';
+import config from '../config';
 
 class Statistics {
   protected intervalTimer: NodeJS.Timer | undefined;
   protected newStatisticsEntryCallback: ((stats: OptimizedStatistic) => void) | undefined;
   protected queryTimeout = 120000;
   protected cache: { [date: string]: OptimizedStatistic[] } = {
-    '24h': [], '1w': [], '1m': [], '3m': [], '6m': [], '1y': [],
+    '24h': [], '1w': [], '1m': [], '3m': [], '6m': [], '1y': [], '2y': [], '3y': []
   };
 
   public setNewStatisticsEntryCallback(fn: (stats: OptimizedStatistic) => void) {
@@ -48,6 +49,8 @@ class Statistics {
     this.cache['3m'] = await this.$list3M();
     this.cache['6m'] = await this.$list6M();
     this.cache['1y'] = await this.$list1Y();
+    this.cache['2y'] = await this.$list2Y();
+    this.cache['3y'] = await this.$list3Y();
     logger.debug('Statistics cache created');
   }
 
@@ -82,10 +85,15 @@ class Statistics {
       250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
 
     const weightVsizeFees: { [feePerWU: number]: number } = {};
+    const lastItem = logFees.length - 1;
 
     memPoolArray.forEach((transaction) => {
       for (let i = 0; i < logFees.length; i++) {
-        if ((logFees[i] === 2000 && transaction.effectiveFeePerVsize >= 2000) || transaction.effectiveFeePerVsize <= logFees[i]) {
+        if (
+          (config.MEMPOOL.NETWORK === 'liquid' && (i === lastItem || transaction.effectiveFeePerVsize * 10 < logFees[i + 1]))
+          ||
+          (config.MEMPOOL.NETWORK !== 'liquid' && (i === lastItem || transaction.effectiveFeePerVsize < logFees[i + 1]))
+        ) {
           if (weightVsizeFees[logFees[i]]) {
             weightVsizeFees[logFees[i]] += transaction.vsize;
           } else {
@@ -403,10 +411,37 @@ class Statistics {
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
     } catch (e) {
-      logger.err('$list6M() error' + (e instanceof Error ? e.message : e));
+      logger.err('$list1Y() error' + (e instanceof Error ? e.message : e));
       return [];
     }
   }
+
+  public async $list2Y(): Promise<OptimizedStatistic[]> {
+    try {
+      const connection = await DB.pool.getConnection();
+      const query = this.getQueryForDays(120960);
+      const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
+      connection.release();
+      return this.mapStatisticToOptimizedStatistic(rows);
+    } catch (e) {
+      logger.err('$list2Y() error' + (e instanceof Error ? e.message : e));
+      return [];
+    }
+  }
+
+  public async $list3Y(): Promise<OptimizedStatistic[]> {
+    try {
+      const connection = await DB.pool.getConnection();
+      const query = this.getQueryForDays(181440);
+      const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
+      connection.release();
+      return this.mapStatisticToOptimizedStatistic(rows);
+    } catch (e) {
+      logger.err('$list3Y() error' + (e instanceof Error ? e.message : e));
+      return [];
+    }
+  }
+
   private mapStatisticToOptimizedStatistic(statistic: Statistic[]): OptimizedStatistic[] {
     return statistic.map((s) => {
       return {

backend/src/api/websocket-handler.ts

@@ -14,7 +14,6 @@ import transactionUtils from './transaction-utils';
 
 class WebsocketHandler {
   private wss: WebSocket.Server | undefined;
-  private nativeAssetId = '6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d';
   private extraInitProperties = {};
 
   constructor() { }
@@ -308,7 +307,7 @@ class WebsocketHandler {
 
         newTransactions.forEach((tx) => {
 
-          if (client['track-asset'] === this.nativeAssetId) {
+          if (client['track-asset'] === Common.nativeAssetId) {
             if (tx.vin.some((vin) => !!vin.is_pegin)) {
               foundTransactions.push(tx);
               return;
@@ -439,7 +438,7 @@ class WebsocketHandler {
         const foundTransactions: TransactionExtended[] = [];
 
         transactions.forEach((tx) => {
-          if (client['track-asset'] === this.nativeAssetId) {
+          if (client['track-asset'] === Common.nativeAssetId) {
             if (tx.vin && tx.vin.some((vin) => !!vin.is_pegin)) {
               foundTransactions.push(tx);
               return;

backend/src/config.ts

@@ -15,6 +15,7 @@ interface IConfig {
     INITIAL_BLOCKS_AMOUNT: number;
     MEMPOOL_BLOCKS_AMOUNT: number;
     PRICE_FEED_UPDATE_INTERVAL: number;
+    USE_SECOND_NODE_FOR_MINFEE: boolean;
   };
   ESPLORA: {
     REST_API_URL: string;
@@ -30,8 +31,7 @@ interface IConfig {
     USERNAME: string;
     PASSWORD: string;
   };
-  CORE_RPC_MINFEE: {
-    ENABLED: boolean;
+  SECOND_CORE_RPC: {
     HOST: string;
     PORT: number;
     USERNAME: string;
@@ -77,6 +77,7 @@ const defaults: IConfig = {
     'INITIAL_BLOCKS_AMOUNT': 8,
     'MEMPOOL_BLOCKS_AMOUNT': 8,
     'PRICE_FEED_UPDATE_INTERVAL': 3600,
+    'USE_SECOND_NODE_FOR_MINFEE': false,
   },
   'ESPLORA': {
     'REST_API_URL': 'http://127.0.0.1:3000',
@@ -92,8 +93,7 @@ const defaults: IConfig = {
     'USERNAME': 'mempool',
     'PASSWORD': 'mempool'
   },
-  'CORE_RPC_MINFEE': {
-    'ENABLED': false,
+  'SECOND_CORE_RPC': {
     'HOST': '127.0.0.1',
     'PORT': 8332,
     'USERNAME': 'mempool',
@@ -129,7 +129,7 @@ class Config implements IConfig {
   ESPLORA: IConfig['ESPLORA'];
   ELECTRUM: IConfig['ELECTRUM'];
   CORE_RPC: IConfig['CORE_RPC'];
-  CORE_RPC_MINFEE: IConfig['CORE_RPC_MINFEE'];
+  SECOND_CORE_RPC: IConfig['SECOND_CORE_RPC'];
   DATABASE: IConfig['DATABASE'];
   SYSLOG: IConfig['SYSLOG'];
   STATISTICS: IConfig['STATISTICS'];
@@ -141,7 +141,7 @@ class Config implements IConfig {
     this.ESPLORA = configs.ESPLORA;
     this.ELECTRUM = configs.ELECTRUM;
     this.CORE_RPC = configs.CORE_RPC;
-    this.CORE_RPC_MINFEE = configs.CORE_RPC_MINFEE;
+    this.SECOND_CORE_RPC = configs.SECOND_CORE_RPC;
     this.DATABASE = configs.DATABASE;
     this.SYSLOG = configs.SYSLOG;
     this.STATISTICS = configs.STATISTICS;

backend/src/index.ts

@@ -20,6 +20,7 @@ import logger from './logger';
 import backendInfo from './api/backend-info';
 import loadingIndicators from './api/loading-indicators';
 import mempool from './api/mempool';
+import elementsParser from './api/liquid/elements-parser';
 
 class Server {
   private wss: WebSocket.Server | undefined;
@@ -68,7 +69,8 @@ class Server {
         next();
       })
       .use(express.urlencoded({ extended: true }))
-      .use(express.json());
+      .use(express.text())
+    ;
 
     this.server = http.createServer(this.app);
     this.wss = new WebSocket.Server({ server: this.server });
@@ -112,7 +114,7 @@ class Server {
         await memPool.$updateMemPoolInfo();
       } catch (e) {
         const msg = `updateMempoolInfo: ${(e instanceof Error ? e.message : e)}`;
-        if (config.CORE_RPC_MINFEE.ENABLED) {
+        if (config.MEMPOOL.USE_SECOND_NODE_FOR_MINFEE) {
           logger.warn(msg);
         } else {
           logger.debug(msg);
@@ -141,6 +143,15 @@ class Server {
     if (this.wss) {
       websocketHandler.setWebsocketServer(this.wss);
     }
+    if (config.MEMPOOL.NETWORK === 'liquid' && config.DATABASE.ENABLED) {
+      blocks.setNewBlockCallback(async () => {
+        try {
+          await elementsParser.$parse();
+        } catch (e) {
+          logger.warn('Elements parsing error: ' + (e instanceof Error ? e.message : e));
+        }
+      });
+    }
     websocketHandler.setupConnectionHandling();
     statistics.setNewStatisticsEntryCallback(websocketHandler.handleNewStatistic.bind(websocketHandler));
     blocks.setNewBlockCallback(websocketHandler.handleNewBlock.bind(websocketHandler));
@@ -159,6 +170,7 @@ class Server {
       .get(config.MEMPOOL.API_URL_PREFIX + 'backend-info', routes.getBackendInfo)
       .get(config.MEMPOOL.API_URL_PREFIX + 'init-data', routes.getInitData)
       .get(config.MEMPOOL.API_URL_PREFIX + 'validate-address/:address', routes.validateAddress)
+      .post(config.MEMPOOL.API_URL_PREFIX + 'tx/push', routes.$postTransactionForm)
       .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
         try {
           const response = await axios.get('https://mempool.space/api/v1/donations', { responseType: 'stream', timeout: 10000 });
@@ -206,6 +218,8 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/3m', routes.get3MStatistics.bind(routes))
         .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/6m', routes.get6MStatistics.bind(routes))
         .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/1y', routes.get1YStatistics.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/2y', routes.get2YStatistics.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/3y', routes.get3YStatistics.bind(routes))
         ;
     }
 
@@ -236,6 +250,7 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'mempool/txids', routes.getMempoolTxIds)
         .get(config.MEMPOOL.API_URL_PREFIX + 'mempool/recent', routes.getRecentMempoolTransactions)
         .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId', routes.getTransaction)
+        .post(config.MEMPOOL.API_URL_PREFIX + 'tx', routes.$postTransaction)
         .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/hex', routes.getRawTransaction)
         .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/status', routes.getTransactionStatus)
         .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/outspends', routes.getTransactionOutspends)
@@ -254,6 +269,12 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'address-prefix/:prefix', routes.getAddressPrefix)
       ;
     }
+
+    if (config.MEMPOOL.NETWORK === 'liquid' && config.DATABASE.ENABLED) {
+      this.app
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegs/month', routes.$getElementsPegsByMonth)
+      ;
+    }
   }
 }
 

backend/src/routes.ts

@@ -17,7 +17,8 @@ import transactionUtils from './api/transaction-utils';
 import blocks from './api/blocks';
 import loadingIndicators from './api/loading-indicators';
 import { Common } from './api/common';
-import bitcoinBaseApi from './api/bitcoin/bitcoin-base.api';
+import bitcoinClient from './api/bitcoin/bitcoin-client';
+import elementsParser from './api/liquid/elements-parser';
 
 class Routes {
   constructor() {}
@@ -51,6 +52,14 @@ class Routes {
     res.json(statistics.getCache()['1y']);
   }
 
+  public get2YStatistics(req: Request, res: Response) {
+    res.json(statistics.getCache()['2y']);
+  }
+  
+  public get3YStatistics(req: Request, res: Response) {
+    res.json(statistics.getCache()['3y']);
+  }
+
   public getInitData(req: Request, res: Response) {
     try {
       const result = websocketHandler.getInitData();
@@ -612,7 +621,7 @@ class Routes {
       const addressData = await bitcoinApi.$getAddress(req.params.address);
       res.json(addressData);
     } catch (e) {
-      if (e instanceof Error && e.message && e.message.indexOf('exceeds') > 0) {
+      if (e instanceof Error && e.message && (e.message.indexOf('too long') > 0 || e.message.indexOf('confirmed status') > 0)) {
         return res.status(413).send(e instanceof Error ? e.message : e);
       }
       res.status(500).send(e instanceof Error ? e.message : e);
@@ -629,7 +638,7 @@ class Routes {
       const transactions = await bitcoinApi.$getAddressTransactions(req.params.address, req.params.txId);
       res.json(transactions);
     } catch (e) {
-      if (e instanceof Error && e.message && e.message.indexOf('exceeds') > 0) {
+      if (e instanceof Error && e.message && (e.message.indexOf('too long') > 0 || e.message.indexOf('confirmed status') > 0)) {
         return res.status(413).send(e instanceof Error ? e.message : e);
       }
       res.status(500).send(e instanceof Error ? e.message : e);
@@ -690,7 +699,7 @@ class Routes {
 
   public async validateAddress(req: Request, res: Response) {
     try {
-      const result = await bitcoinBaseApi.$validateAddress(req.params.address);
+      const result = await bitcoinClient.validateAddress(req.params.address);
       res.json(result);
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);
@@ -715,14 +724,16 @@ class Routes {
       const nextRetargetHeight = blockHeight + remainingBlocks;
 
       let difficultyChange = 0;
-      if (blocksInEpoch > 0) {
-        difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
-      }
-      if (difficultyChange > 300) {
-        difficultyChange = 300;
-      }
-      if (difficultyChange < -75) {
-        difficultyChange = -75;
+      if (remainingBlocks < 1870) {
+        if (blocksInEpoch > 0) {
+          difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+        }
+        if (difficultyChange > 300) {
+          difficultyChange = 300;
+        }
+        if (difficultyChange < -75) {
+          difficultyChange = -75;
+        }
       }
 
       const timeAvgDiff = difficultyChange * 0.1;
@@ -754,6 +765,48 @@ class Routes {
       res.status(500).send(e instanceof Error ? e.message : e);
     }
   }
+
+  public async $getElementsPegsByMonth(req: Request, res: Response) {
+    try {
+      const pegs = await elementsParser.$getPegDataByMonth();
+      res.json(pegs);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  public async $postTransaction(req: Request, res: Response) {
+    res.setHeader('content-type', 'text/plain');
+    try {
+      let rawTx;
+      if (typeof req.body === 'object') {
+        rawTx = Object.keys(req.body)[0];
+      } else {
+        rawTx = req.body;
+      }
+      const txIdResult = await bitcoinApi.$sendRawTransaction(rawTx);
+      res.send(txIdResult);
+    } catch (e: any) {
+      res.status(400).send(e.message && e.code ? 'sendrawtransaction RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
+        : (e.message || 'Error'));
+    }
+  }
+
+  public async $postTransactionForm(req: Request, res: Response) {
+    res.setHeader('content-type', 'text/plain');
+    const matches = /tx=([a-z0-9]+)/.exec(req.body);
+    let txHex = '';
+    if (matches && matches[1]) {
+      txHex = matches[1];
+    }
+    try {
+      const txIdResult = await bitcoinClient.sendRawTransaction(txHex);
+      res.send(txIdResult);
+    } catch (e: any) {
+      res.status(400).send(e.message && e.code ? 'sendrawtransaction RPC error: ' + JSON.stringify({ code: e.code, message: e.message })
+        : (e.message || 'Error'));
+    }
+  }
 }
 
 export default new Routes();

docker/backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12-buster-slim AS builder
+FROM node:16.10.0-buster-slim AS builder
 
 WORKDIR /build
 COPY . .
@@ -8,7 +8,7 @@ RUN apt-get install -y build-essential python3 pkg-config
 RUN npm install
 RUN npm run build
 
-FROM node:12-buster-slim
+FROM node:16.10.0-buster-slim
 
 WORKDIR /backend
 

docker/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12-buster-slim AS builder
+FROM node:16.10.0-buster-slim AS builder
 
 ARG commitHash
 ENV DOCKER_COMMIT_HASH=${commitHash}

frontend/README.md

@@ -1,11 +1,50 @@
 # mempool-frontend
 
-## Transifex Project
+## Contributing
+
+This package is used for the https://mempool.space, https://liquid.network and https://bisq.markets websites - there are npm scripts to setup all three, which effectively change how BASE_MODULE is  configured:
+
+```
+$ npm run config:defaults:mempool
+$ npm run config:defaults:liquid
+$ npm run config:defaults:bisq
+```
+
+Changes that affect the frontend codebase only can be done using the production backend so you don't need to spin up the entire Mempool infrastructure. This is very convenient in case you want to quickly improve the UI, fix typos or implement new features that don't require any backend changes.
+
+Make your changes, install the project dependencies and run the frontend server as follows:
+
+```
+$ npm install
+$ npm run serve:local-prod
+```
+
+The frontend will be available at http://localhost:4200/ and all API requests will be proxied to the production server at https://mempool.space
+
+After making your changes, you can run our end-to-end automation suite and check for possible regressions:
+
+Headless:
+
+```
+$ npm run config:defaults:mempool && npm run cypress:run
+```
+
+Interactive:
+
+```
+$ npm run config:defaults:mempool && npm run cypress:open
+```
+
+This will open the Cypress test runner, where you can select any of the test files to run.
+
+If all tests are green, submit your PR and it will be reviewed by someone on the team as soon as possible.
+
+## Translations: Transifex Project
 
 The mempool frontend strings are localized into 20+ locales:
 https://www.transifex.com/mempool/mempool/dashboard/
 
-## Translators
+### Translators
 
 * Arabic @baro0k
 * Czech @pixelmade2
@@ -27,8 +66,11 @@ https://www.transifex.com/mempool/mempool/dashboard/
 * Slovenian @thepkbadger
 * Finnish @bio_bitcoin
 * Swedish @softsimon_
+* Thai @Gusb3ll
 * Turkish @stackmore
 * Ukrainian @volbil
 * Vietnamese @bitcoin_vietnam
 * Chinese @wdljt
 * Russian @TonyCrusoe @Bitconan
+* Romanian @mirceavesa
+* Macedonian @SkechBoy

frontend/angular.json

@@ -94,6 +94,10 @@
             "translation": "src/locale/messages.sv.xlf",
             "baseHref": "/sv/"
           },
+          "th": {
+            "translation": "src/locale/messages.th.xlf",
+            "baseHref": "/th/"
+          },
           "tr": {
             "translation": "src/locale/messages.tr.xlf",
             "baseHref": "/tr/"
@@ -114,10 +118,18 @@
             "translation": "src/locale/messages.hu.xlf",
             "baseHref": "/hu/"
           },
+          "mk": {
+            "translation": "src/locale/messages.mk.xlf",
+            "baseHref": "/mk/"
+          },
           "zh": {
             "translation": "src/locale/messages.zh.xlf",
             "baseHref": "/zh/"
           },
+          "ro": {
+            "translation": "src/locale/messages.ro.xlf",
+            "baseHref": "/ro/"
+          },
           "ru": {
             "translation": "src/locale/messages.ru.xlf",
             "baseHref": "/ru/"
@@ -137,7 +149,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/resources",
@@ -149,7 +160,13 @@
             ],
             "scripts": [
               "generated-config.js"
-            ]
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -159,7 +176,14 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
@@ -178,7 +202,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -190,11 +215,11 @@
               "browserTarget": "mempool:build:production"
             },
             "local": {
-              "proxyConfig": "proxy.conf.json",
+              "proxyConfig": "proxy.conf.local.js",
               "verbose": true
             },
             "staging": {
-              "proxyConfig": "proxy.stg.conf.json",
+              "proxyConfig": "proxy.conf.js",
               "disableHostCheck": true,
               "host": "0.0.0.0",
               "verbose": true
@@ -262,7 +287,9 @@
           "options": {
             "outputPath": "dist/mempool/server",
             "main": "server.ts",
-            "tsConfig": "tsconfig.server.json"
+            "tsConfig": "tsconfig.server.json",
+            "sourceMap": true,
+            "optimization": false
           },
           "configurations": {
             "production": {
@@ -277,7 +304,8 @@
               "localize": true,
               "optimization": true
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve-ssr": {
           "builder": "@nguniversal/builders:ssr-dev-server",

frontend/cypress/integration/bisq/bisq.spec.ts

@@ -1,8 +1,8 @@
 describe('Bisq', () => {
-    let baseModule;
+    const baseModule = Cypress.env("BASE_MODULE");
+    const basePath = (baseModule === 'bisq') ? '' : '/bisq';
+    
     beforeEach(() => {
-        baseModule = (Cypress.env('BASE_MODULE') && Cypress.env('BASE_MODULE') === 'bisq') ? '' : '/bisq';
-
         cy.intercept('/sockjs-node/info*').as('socket');
         cy.intercept('/bisq/api/markets/hloc?market=btc_usd&interval=day').as('hloc');
         cy.intercept('/bisq/api/markets/ticker').as('ticker');
@@ -23,15 +23,15 @@ describe('Bisq', () => {
           });
     });
 
-    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") !== 'liquid') {
+    if (baseModule === 'mempool' || baseModule === 'bisq') {
 
         it('loads the dashboard', () => {
-            cy.visit(`${baseModule}`);
+            cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
         });
 
         it('loads the transactions screen', () => {
-            cy.visit(`${baseModule}`);
+            cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
             cy.get('li:nth-of-type(2) > a').click().then(() => {
                 cy.get('.table > tr').should('have.length', 50);
@@ -39,7 +39,7 @@ describe('Bisq', () => {
         });
 
         it('loads the blocks screen', () => {
-            cy.visit(`${baseModule}`);
+            cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
             cy.get('li:nth-of-type(3) > a').click().then(() => {
                 cy.wait('@blocks');
@@ -48,7 +48,7 @@ describe('Bisq', () => {
         });
 
         it('loads the stats screen', () => {
-            cy.visit(`${baseModule}`);
+            cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
             cy.get('li:nth-of-type(4) > a').click().then(() => {
                 cy.wait('@stats');
@@ -56,7 +56,7 @@ describe('Bisq', () => {
         });
 
         it('loads the api screen', () => {
-            cy.visit(`${baseModule}`);
+            cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
             cy.get('li:nth-of-type(5) > a').click().then(() => {
                 cy.get('.card').should('have.length.at.least', 1);
@@ -67,7 +67,7 @@ describe('Bisq', () => {
 
         it('shows blocks pagination with 5 pages (desktop)', () => {
             cy.viewport(760, 800);
-            cy.visit(`${baseModule}/blocks`);
+            cy.visit(`${basePath}/blocks`);
             cy.waitForSkeletonGone();
             cy.get('tbody tr').should('have.length', 10);
             // 5 pages + 4 buttons = 9 buttons
@@ -76,13 +76,13 @@ describe('Bisq', () => {
 
         it('shows blocks pagination with 3 pages (mobile)', () => {
             cy.viewport(669, 800);
-            cy.visit(`${baseModule}/blocks`);
+            cy.visit(`${basePath}/blocks`);
             cy.waitForSkeletonGone();
             cy.get('tbody tr').should('have.length', 10);
             // 3 pages + 4 buttons = 7 buttons
             cy.get('.pagination-container ul.pagination').first().children().should('have.length', 7);
         });
     } else {
-        it.skip("Tests cannot be run on the selected BASE_MODULE");
+        it.skip(`Tests cannot be run on the selected BASE_MODULE ${baseModule}`);
     }
   });

frontend/cypress/integration/liquid/liquid.spec.ts

@@ -1,8 +1,8 @@
 describe('Liquid', () => {
-    let baseModule;
-    beforeEach(() => {
-        baseModule = (Cypress.env('BASE_MODULE') && Cypress.env('BASE_MODULE') === 'liquid') ? '' : '/liquid';
+    const baseModule = Cypress.env("BASE_MODULE");
+    const basePath = (baseModule === 'liquid') ? '' : '/liquid';
 
+    beforeEach(() => {
         cy.intercept('/liquid/api/block/**').as('block');
         cy.intercept('/liquid/api/blocks/').as('blocks');
         cy.intercept('/liquid/api/tx/**/outspends').as('outspends');
@@ -16,30 +16,36 @@ describe('Liquid', () => {
           });
     });
 
-    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") !== 'bisq') {
+    if (baseModule === 'mempool' || baseModule === 'liquid') {
+
+        it('check first mempool block after skeleton loads', () => {
+            cy.visit(`${basePath}`);
+            cy.waitForSkeletonGone();
+            cy.get('#mempool-block-0 > .blockLink').should('exist');
+        });
 
         it('loads the dashboard', () => {
-            cy.visit(`${baseModule}`);
+            cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
         });
 
         it('loads the blocks page', () => {
-            cy.visit(`${baseModule}/blocks`);
+            cy.visit(`${basePath}/blocks`);
             cy.waitForSkeletonGone();
         });
 
         it('loads a specific block page', () => {
-            cy.visit(`${baseModule}/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54`);
+            cy.visit(`${basePath}/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54`);
             cy.waitForSkeletonGone();
         });
 
         it('loads the graphs page', () => {
-            cy.visit(`${baseModule}/graphs`);
+            cy.visit(`${basePath}/graphs`);
             cy.waitForSkeletonGone();
         });
 
         it('loads the tv page - desktop', () => {
-            cy.visit(`${baseModule}`);
+            cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
             cy.get('li:nth-of-type(3) > a').click().then(() => {
                 cy.wait(1000);
@@ -47,7 +53,7 @@ describe('Liquid', () => {
         });
 
         it('loads the graphs page - mobile', () => {
-            cy.visit(`${baseModule}`)
+            cy.visit(`${basePath}`)
             cy.waitForSkeletonGone();
             cy.get('li:nth-of-type(3) > a').click().then(() => {
                 cy.viewport('iphone-6');
@@ -58,13 +64,13 @@ describe('Liquid', () => {
 
         describe('assets', () => {
             it('shows the assets screen', () => {
-                cy.visit(`${baseModule}/assets`);
+                cy.visit(`${basePath}/assets`);
                 cy.waitForSkeletonGone();
                 cy.get('table tr').should('have.length.at.least', 5);
             });
 
             it('allows searching assets', () => {
-                cy.visit(`${baseModule}/assets`);
+                cy.visit(`${basePath}/assets`);
                 cy.waitForSkeletonGone();
                 cy.get('.container-xl input').click().type('Liquid Bitcoin').then(() => {
                     cy.get('table tr').should('have.length', 1);
@@ -72,7 +78,7 @@ describe('Liquid', () => {
             });
 
             it('shows a specific asset ID', () => {
-                cy.visit(`${baseModule}/assets`);
+                cy.visit(`${basePath}/assets`);
                 cy.waitForSkeletonGone();
                 cy.get('.container-xl input').click().type('Liquid AUD').then(() => {
                     cy.get('table tr td:nth-of-type(1) a').click();
@@ -84,27 +90,27 @@ describe('Liquid', () => {
         describe('unblinded TX', () => {
 
             it('should not show an unblinding error message for regular txs', () => {
-                cy.visit(`${baseModule}/tx/82a479043ec3841e0d3f829afc8df4f0e2bbd675a13f013ea611b2fde0027d45`);
+                cy.visit(`${basePath}/tx/82a479043ec3841e0d3f829afc8df4f0e2bbd675a13f013ea611b2fde0027d45`);
                 cy.waitForSkeletonGone();
                 cy.get('.error-unblinded' ).should('not.exist');
             });
 
             it('show unblinded TX', () => {
-                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc,2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3a`);
+                cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc,2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3a`);
                 cy.waitForSkeletonGone();
                 cy.get('#table-tx-vin tr').should('have.class', 'assetBox');
                 cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
             });
 
             it('show empty unblinded TX', () => {
-                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=`);
+                cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=`);
                 cy.waitForSkeletonGone();
                 cy.get('#table-tx-vin tr').should('have.class', '');
                 cy.get('#table-tx-vout tr').should('have.class', '');
             });
 
             it('show invalid unblinded TX hex', () => {
-                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=123`);
+                cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=123`);
                 cy.waitForSkeletonGone();
                 cy.get('#table-tx-vin tr').should('have.class', '');
                 cy.get('#table-tx-vout tr').should('have.class', '');
@@ -112,36 +118,36 @@ describe('Liquid', () => {
             });
 
             it('show first unblinded vout', () => {
-                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc`);
+                cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc`);
                 cy.waitForSkeletonGone();
                 cy.get('#table-tx-vout tr:first-child()').should('have.class', 'assetBox');
             });
 
             it('show second unblinded vout', () => {
-                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3a`);
+                cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3a`);
                 cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
             });
 
             it('show invalid error unblinded TX', () => {
-                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc,2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3c`);
+                cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc,2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3c`);
                 cy.waitForSkeletonGone();
                 cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
                 cy.get('.error-unblinded' ).contains('Error: Invalid blinding data.');
             });
 
             it('shows asset peg in/out and burn transactions', () => {
-                cy.visit(`${baseModule}/asset/6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`);
+                cy.visit(`${basePath}/asset/6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`);
                 cy.waitForSkeletonGone();
                 cy.get('#table-tx-vout tr').not('.assetBox');
                 cy.get('#table-tx-vin tr').not('.assetBox');
             });
 
             it('prevents regressing issue #644', () => {
-                cy.visit(`${baseModule}/tx/393b890966f305e7c440fcfb12a13f51a7a9011cc59ff5f14f6f93214261bd82`);
+                cy.visit(`${basePath}/tx/393b890966f305e7c440fcfb12a13f51a7a9011cc59ff5f14f6f93214261bd82`);
                 cy.waitForSkeletonGone();
             });
         });
     } else {
-        it.skip("Tests cannot be run on the selected BASE_MODULE");
+        it.skip(`Tests cannot be run on the selected BASE_MODULE ${baseModule}`);
     }
 });

frontend/cypress/integration/mainnet/mainnet.spec.ts

@@ -1,5 +1,7 @@
 import { emitMempoolInfo, dropWebSocket } from "../../support/websocket";
 
+const baseModule = Cypress.env("BASE_MODULE");
+
 describe('Mainnet', () => {
     beforeEach(() => {
         //cy.intercept('/sockjs-node/info*').as('socket');
@@ -20,7 +22,13 @@ describe('Mainnet', () => {
         });
     });
 
-    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+    if (baseModule === 'mempool') {
+
+        it('check first mempool block after skeleton loads', () => {
+          cy.visit('/');
+          cy.waitForSkeletonGone();
+          cy.get('#mempool-block-0 > .blockLink').should('exist');
+        });
 
         it('loads the status screen', () => {
             cy.visit('/status');
@@ -61,6 +69,22 @@ describe('Mainnet', () => {
             cy.waitForSkeletonGone();
         });
 
+        it('check op_return tx tooltip', () => {
+            cy.visit('/block/00000000000000000003c5f542bed265319c6cf64238cf1f1bb9bca3ebf686d2');
+            cy.waitForSkeletonGone();
+            cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('onmouseover');
+            cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('mouseenter');
+            cy.get('.tooltip-inner').should('be.visible');
+        });
+
+        it('check op_return coinbase tooltip', () => {
+            cy.visit('/block/00000000000000000003c5f542bed265319c6cf64238cf1f1bb9bca3ebf686d2');
+            cy.waitForSkeletonGone();
+            cy.get('div > a > .badge').first().trigger('onmouseover');
+            cy.get('div > a > .badge').first().trigger('mouseenter');
+            cy.get('.tooltip-inner').should('be.visible');
+        });
+
         describe('search', () => {
             it('allows searching for partial Bitcoin addresses', () => {
                 cy.visit('/');
@@ -87,18 +111,33 @@ describe('Mainnet', () => {
             });
 
             ['BC1PQYQSZQ', 'bc1PqYqSzQ'].forEach((searchTerm) => {
-                it(`allows searching for partial case insensitive bc1 addresses: ${searchTerm}`, () => {
+                it(`allows searching for partial case insensitive bech32m addresses: ${searchTerm}`, () => {
                     cy.visit('/');
                     cy.get('.search-box-container > .form-control').type(searchTerm).then(() => {
                         cy.get('ngb-typeahead-window button.dropdown-item').should('have.length', 1);
                         cy.get('ngb-typeahead-window button.dropdown-item.active').click().then(() => {
-                            cy.url().should('include', '/address/bc1pqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqs3wf0qm');
+                            cy.url().should('include', '/address/bc1pqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqsyjer9e');
                             cy.waitForSkeletonGone();
                             cy.get('.text-center').should('not.have.text', 'Invalid Bitcoin address');
                         });
                     });
                 });
             });
+
+            ['BC1Q000375VXCU', 'bC1q000375vXcU'].forEach((searchTerm) => {
+                it(`allows searching for partial case insensitive bech32 addresses: ${searchTerm}`, () => {
+                    cy.visit('/');
+                    cy.get('.search-box-container > .form-control').type(searchTerm).then(() => {
+                        cy.get('ngb-typeahead-window button.dropdown-item').should('have.length', 1);
+                        cy.get('ngb-typeahead-window button.dropdown-item.active').click().then(() => {
+                            cy.url().should('include', '/address/bc1q000375vxcuf5v04lmwy22vy2thvhqkxghgq7dy');
+                            cy.waitForSkeletonGone();
+                            cy.get('.text-center').should('not.have.text', 'Invalid Bitcoin address');
+                        });
+                    });
+                });
+            });
+
         });
 
         describe('blocks navigation', () => {
@@ -232,7 +271,7 @@ describe('Mainnet', () => {
             cy.changeNetwork("bisq");
         });
 
-        it('loads the dashboard with the skeleton blocks', () => {
+        it.skip('loads the dashboard with the skeleton blocks', () => {
             cy.mockMempoolSocket();
             cy.visit("/");
             cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
@@ -269,6 +308,33 @@ describe('Mainnet', () => {
             });
         });
 
+        describe('graphs page', () => {
+          it('check buttons - mobile', () => {
+              cy.viewport('iphone-6');
+              cy.visit('/graphs');
+              cy.waitForSkeletonGone();
+              cy.get('.small-buttons > :nth-child(2)').should('be.visible');
+              cy.get('#dropdownFees').should('be.visible');
+              cy.get('.btn-group').should('be.visible');
+          });
+          it('check buttons - tablet', () => {
+            cy.viewport('ipad-2');
+            cy.visit('/graphs');
+            cy.waitForSkeletonGone();
+            cy.get('.small-buttons > :nth-child(2)').should('be.visible');
+            cy.get('#dropdownFees').should('be.visible');
+            cy.get('.btn-group').should('be.visible');
+          });
+          it('check buttons - desktop', () => {
+            cy.viewport('macbook-16');
+            cy.visit('/graphs');
+            cy.waitForSkeletonGone();
+            cy.get('.small-buttons > :nth-child(2)').should('be.visible');
+            cy.get('#dropdownFees').should('be.visible');
+            cy.get('.btn-group').should('be.visible');
+          });
+        });
+
         it('loads the tv screen - desktop', () => {
             cy.viewport('macbook-16');
             cy.visit('/');
@@ -286,7 +352,7 @@ describe('Mainnet', () => {
             cy.visit('/tv');
             cy.waitForSkeletonGone();
             cy.get('.chart-holder');
-            cy.get('.blockchain-wrapper').should('be.visible');
+            cy.get('.blockchain-wrapper').should('not.visible');
         });
 
         it('loads the api screen', () => {
@@ -363,6 +429,6 @@ describe('Mainnet', () => {
             });
         });
     } else {
-        it.skip("Tests cannot be run on the selected BASE_MODULE");
+        it.skip(`Tests cannot be run on the selected BASE_MODULE ${baseModule}`);
     }
 });

frontend/cypress/integration/signet/signet.spec.ts

@@ -1,5 +1,7 @@
 import { emitMempoolInfo } from "../../support/websocket";
 
+const baseModule = Cypress.env("BASE_MODULE");
+
 describe('Signet', () => {
   beforeEach(() => {
     cy.intercept('/api/block-height/*').as('block-height');
@@ -9,13 +11,19 @@ describe('Signet', () => {
   });
 
 
-  if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+  if (baseModule === 'mempool') {
     it('loads the dashboard', () => {
         cy.visit('/signet');
         cy.waitForSkeletonGone();
     });
 
-    it('loads the dashboard with the skeleton blocks', () => {
+    it('check first mempool block after skeleton loads', () => {
+      cy.visit('/');
+      cy.waitForSkeletonGone();
+      cy.get('#mempool-block-0 > .blockLink').should('exist');
+    });
+
+    it.skip('loads the dashboard with the skeleton blocks', () => {
         cy.mockMempoolSocket();
         cy.visit("/signet");
         cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
@@ -126,6 +134,6 @@ describe('Signet', () => {
         });
     });
     } else {
-        it.skip("Tests cannot be run on the selected BASE_MODULE");
+        it.skip(`Tests cannot be run on the selected BASE_MODULE ${baseModule}`);
     }
   });

frontend/cypress/integration/testnet/testnet.spec.ts

@@ -1,5 +1,7 @@
 import { confirmAddress, emitMempoolInfo, sendWsMock, showNewTx, startTrackingAddress } from "../../support/websocket";
 
+const baseModule = Cypress.env("BASE_MODULE");
+
 describe('Testnet', () => {
   beforeEach(() => {
     cy.intercept('/api/block-height/*').as('block-height');
@@ -8,14 +10,20 @@ describe('Testnet', () => {
     cy.intercept('/api/tx/*/outspends').as('tx-outspends');
   });
 
-  if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+  if (baseModule === 'mempool') {
 
     it('loads the dashboard', () => {
         cy.visit('/testnet');
         cy.waitForSkeletonGone();
     });
 
-    it('loads the dashboard with the skeleton blocks', () => {
+    it('check first mempool block after skeleton loads', () => {
+      cy.visit('/');
+      cy.waitForSkeletonGone();
+      cy.get('#mempool-block-0 > .blockLink').should('exist');
+    });
+
+    it.skip('loads the dashboard with the skeleton blocks', () => {
         cy.mockMempoolSocket();
         cy.visit("/testnet");
         cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
@@ -123,6 +131,6 @@ describe('Testnet', () => {
         });
     });
     } else {
-        it.skip("Tests cannot be run on the selected BASE_MODULE");
+        it.skip(`Tests cannot be run on the selected BASE_MODULE ${baseModule}`);
     }
   });

frontend/cypress/plugins/index.js

@@ -1 +1,13 @@
-module.exports = (on, config) => {}
+const fs = require('fs');
+
+const CONFIG_FILE = 'mempool-frontend-config.json';
+
+module.exports = (on, config) => {
+  if (fs.existsSync(CONFIG_FILE)) {
+    let contents = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
+    config.env.BASE_MODULE = contents.BASE_MODULE ? contents.BASE_MODULE : 'mempool';
+  } else {
+    config.env.BASE_MODULE = 'mempool';
+  }
+  return config;
+}

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-frontend",
-  "version": "2.2.2",
+  "version": "2.3.0-dev",
   "description": "Bitcoin mempool visualizer and blockchain explorer backend",
   "license": "GNU Affero General Public License v3.0",
   "homepage": "https://mempool.space",
@@ -22,7 +22,7 @@
   "scripts": {
     "ng": "./node_modules/@angular/cli/bin/ng",
     "tsc": "./node_modules/typescript/bin/tsc",
-    "i18n-extract-from-source": "./node_modules/@angular/cli/bin/ng extract-i18n --ivy --out-file ./src/locale/messages.xlf",
+    "i18n-extract-from-source": "./node_modules/@angular/cli/bin/ng extract-i18n --out-file ./src/locale/messages.xlf",
     "i18n-pull-from-transifex": "tx pull -a --parallel --minimum-perc 1 --force",
     "serve": "npm run generate-config && ng serve -c local",
     "serve:stg": "npm run generate-config && ng serve -c staging",
@@ -30,7 +30,7 @@
     "start": "npm run generate-config && npm run sync-assets-dev && ng serve -c local",
     "start:stg": "npm run generate-config && npm run sync-assets-dev && ng serve -c staging",
     "start:local-prod": "npm run generate-config && npm run sync-assets-dev && ng serve -c local-prod",
-    "build": "npm run generate-config && ng build --prod --localize && npm run sync-assets && npm run build-mempool.js",
+    "build": "npm run generate-config && ng build --configuration production --localize && npm run sync-assets && npm run build-mempool.js",
     "sync-assets": "node sync-assets.js && rsync -av ./dist/mempool/browser/en-US/resources ./dist/mempool/browser/resources",
     "sync-assets-dev": "node sync-assets.js dev",
     "generate-config": "node generate-config.js",
@@ -53,32 +53,34 @@
     "cypress:run:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:run:record"
   },
   "dependencies": {
-    "@angular/animations": "~11.2.8",
-    "@angular/common": "~11.2.8",
-    "@angular/compiler": "~11.2.8",
-    "@angular/core": "~11.2.8",
-    "@angular/forms": "~11.2.8",
-    "@angular/localize": "^11.2.8",
-    "@angular/platform-browser": "~11.2.8",
-    "@angular/platform-browser-dynamic": "~11.2.8",
-    "@angular/platform-server": "~11.2.8",
-    "@angular/router": "~11.2.8",
+    "@angular/animations": "~12.2.6",
+    "@angular/common": "~12.2.6",
+    "@angular/compiler": "~12.2.6",
+    "@angular/core": "~12.2.6",
+    "@angular/forms": "~12.2.6",
+    "@angular/localize": "^12.2.6",
+    "@angular/platform-browser": "~12.2.6",
+    "@angular/platform-browser-dynamic": "~12.2.6",
+    "@angular/platform-server": "~12.2.6",
+    "@angular/router": "~12.2.6",
     "@fortawesome/angular-fontawesome": "^0.8.2",
     "@fortawesome/fontawesome-common-types": "^0.2.35",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@mempool/chartist": "^0.11.4",
+    "@juggle/resize-observer": "^3.3.1",
     "@mempool/mempool.js": "^2.2.4",
-    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "@nguniversal/express-engine": "11.2.1",
     "@types/qrcode": "^1.3.4",
     "bootstrap": "4.5.0",
     "browserify": "^17.0.0",
     "clipboard": "^2.0.4",
     "domino": "^2.1.6",
+    "echarts": "^5.1.2",
     "express": "^4.17.1",
     "lightweight-charts": "^3.3.0",
     "ngx-bootrap-multiselect": "^2.0.0",
+    "ngx-echarts": "^7.0.1",
     "ngx-infinite-scroll": "^10.0.1",
     "qrcode": "^1.4.4",
     "rxjs": "^6.6.7",
@@ -88,10 +90,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.7",
-    "@angular/cli": "~11.2.7",
-    "@angular/compiler-cli": "~11.2.8",
-    "@angular/language-service": "~11.2.8",
+    "@angular-devkit/build-angular": "^12.2.6",
+    "@angular/cli": "~12.2.6",
+    "@angular/compiler-cli": "~12.2.6",
+    "@angular/language-service": "~12.2.6",
     "@nguniversal/builders": "^11.2.1",
     "@types/express": "^4.17.0",
     "@types/jasmine": "~3.6.0",
@@ -101,14 +103,14 @@
     "http-proxy-middleware": "^1.0.5",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
+    "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.1.5"
+    "typescript": "~4.3.5"
   },
   "optionalDependencies": {
     "@cypress/schematic": "^1.3.0",

frontend/proxy.conf.js

@@ -15,7 +15,6 @@ try {
       throw new Error(e);
   } else {
       console.log(`${CONFIG_FILE_NAME} file not found, using default config`);
-      
   }
 }
 
@@ -61,4 +60,20 @@ PROXY_CONFIG = [
     }
 ];
 
+if (configContent && configContent.BASE_MODULE == "liquid") {
+    PROXY_CONFIG.push({
+        context: ['/resources/pools.json', '/resources/assets.json', '/resources/assets.minimal.json'],
+        target: "https://liquid.network",
+        secure: false,
+        changeOrigin: true,
+    });
+} else {
+    PROXY_CONFIG.push({
+        context: ['/resources/pools.json', '/resources/assets.json', '/resources/assets.minimal.json'],
+        target: "https://mempool.space",
+        secure: false,
+        changeOrigin: true,
+    });
+}
+
 module.exports = PROXY_CONFIG;

frontend/proxy.conf.json

@@ -1,114 +0,0 @@
-{
-  "/api/v1": {
-    "target": "http://localhost:8999/",
-    "secure": false
-  },
-  "/api/v1/ws": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "ws": true
-  },
-  "/api/": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "pathRewrite": {
-      "^/api/": "/api/v1/"
-    }
-  },
-  "/testnet/api/v1": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "pathRewrite": {
-      "^/testnet/api/v1": "/api/v1"
-    }
-  },
-  "/testnet/api/v1/ws": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/testnet/api": "/api/v1/ws"
-    }
-  },
-  "/testnet/api/": {
-    "target": "http://localhost:50001/",
-    "secure": false,
-    "pathRewrite": {
-      "^/testnet/api": ""
-    }
-  },
-  "/signet/api/v1": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "pathRewrite": {
-      "^/signet/api/v1": "/api/v1"
-    }
-  },
-  "/signet/api/v1/ws": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/signet/api": "/api/v1/ws"
-    }
-  },
-  "/signet/api/": {
-    "target": "http://localhost:50001/",
-    "secure": false,
-    "pathRewrite": {
-      "^/signet/api": ""
-    }
-  },
-  "/liquid/api/v1/ws": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/liquid/api": "/api/v1/ws"
-    }
-  },
-  "/liquid/api/v1/": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "pathRewrite": {
-      "^/liquid/api/": "/api/"
-    }
-  },
-  "/liquid/api/": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "pathRewrite": {
-      "^/liquid/api/": "/api/v1/"
-    }
-  },
-  "/bisq/api/": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "pathRewrite": {
-      "^/bisq/api/": "/api/v1/bisq/"
-    }
-  },
-  "/bisq/api/v1/ws": {
-    "target": "http://localhost:8999/",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/bisq/api": "/api/v1/ws"
-    }
-  },
-  "/resources/assets.minimal.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/resources/assets.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/resources/pools.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  }
-}

frontend/proxy.conf.local.js

@@ -0,0 +1,73 @@
+
+const fs = require('fs');
+
+let PROXY_CONFIG = require('./proxy.conf.js');
+const BACKEND_CONFIG_FILE_NAME = '../backend/mempool-config.json';
+const FRONTEND_CONFIG_FILE_NAME = 'mempool-frontend-config.json';
+
+let backendConfigContent;
+let frontendConfigContent;
+
+// Read frontend config 
+try {
+    const rawConfig = fs.readFileSync(FRONTEND_CONFIG_FILE_NAME);
+    frontendConfigContent = JSON.parse(rawConfig);
+    console.log(`${FRONTEND_CONFIG_FILE_NAME} file found, using provided config`);
+} catch (e) {
+    console.log(e);
+    if (e.code !== 'ENOENT') {
+      throw new Error(e);
+  } else {
+      console.log(`${FRONTEND_CONFIG_FILE_NAME} file not found, using default config`);
+  }
+}
+
+// Read backend config
+try {
+    const rawConfig = fs.readFileSync(BACKEND_CONFIG_FILE_NAME);
+    backendConfigContent = JSON.parse(rawConfig);
+    console.log(`${BACKEND_CONFIG_FILE_NAME} file found, using provided config`);
+} catch (e) {
+    console.log(e);
+    if (e.code !== 'ENOENT') {
+      throw new Error(e);
+  } else {
+      console.log(`${BACKEND_CONFIG_FILE_NAME} file not found, using default config`);
+  }
+}
+
+// Remove the "/api/**" entry from the default proxy config
+let localDevContext = PROXY_CONFIG[0].context
+
+localDevContext.splice(PROXY_CONFIG[0].context.indexOf('/api/**'), 1);
+
+PROXY_CONFIG[0].context = localDevContext;
+
+// Change all targets to localhost
+PROXY_CONFIG.map(conf => conf.target = "http://localhost:8999");
+
+// Add rules for local backend
+if (backendConfigContent) {
+    PROXY_CONFIG.push({
+        context: ['/api/address/**', '/api/tx/**', '/api/block/**', '/api/blocks/**'],
+        target: `http://localhost:8999`,
+        secure: false,
+        changeOrigin: true,
+        proxyTimeout: 30000,
+        pathRewrite: {
+            "^/api/": "/api/v1/"
+        },
+    });    
+    PROXY_CONFIG.push({
+        context: ['/api/v1/**'],
+        target: `http://localhost:8999`,
+        secure: false,
+        changeOrigin: true,
+        proxyTimeout: 30000
+    });
+
+}
+
+console.log(PROXY_CONFIG);
+
+module.exports = PROXY_CONFIG;

frontend/proxy.prod.conf.json

@@ -1,99 +0,0 @@
-{
-  "/api/v1/ws": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "ws": true
-  },
-  "/api": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true,
-    "logLevel": "debug",
-    "timeout": 3600000
-  },
-  "/testnet/api/v1/ws": {
-    "target": "https://mempool.space/testnet",
-    "secure": false,
-    "ws": true,
-    "loglevel": "debug",
-    "pathRewrite": {
-      "^/testnet/api": "/api/v1/ws"
-    }
-  },
-  "/testnet/api": {
-    "target": "https://mempool.space",
-    "secure": true,
-    "changeOrigin": true,
-    "loglevel": "debug",
-    "pathRewrite": {
-      "/testnet/api": "/testnet/api"
-    },
-    "timeout": 3600000
-  },
-  "/signet/api/v1/ws": {
-    "target": "https://mempool.space/signet",
-    "secure": false,
-    "ws": true,
-    "loglevel": "debug",
-    "pathRewrite": {
-      "^/signet/api": "/api/v1/ws"
-    }
-  },
-  "/signet/api": {
-    "target": "https://mempool.space",
-    "secure": true,
-    "changeOrigin": true,
-    "loglevel": "debug",
-    "pathRewrite": {
-      "/signet/api": "/signet/api"
-    },
-    "timeout": 3600000
-  },
-
-  "/bisq/api/v1/ws": {
-    "target": "https://mempool.space/bisq",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/bisq/api": "/api/v1/ws"
-    }
-  },
-  "/bisq/api": {
-    "target": "https://mempool.space/bisq",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/bisq/api/": "/api/v1/bisq/"
-    },
-    "timeout": 3600000
-  },
-  "/liquid/api/v1/ws": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "ws": true
-  },
-  "/liquid/api": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/liquid/api/": "/liquid/api/"
-    },
-    "timeout": 3600000
-  },
-  "/resources/assets.minimal.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/resources/assets.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/resources/pools.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  }
-}

frontend/proxy.stg.conf.json

@@ -1,100 +0,0 @@
-{
-  "/api/v1/ws": {
-    "target": "https://mempool.ninja",
-    "secure": false,
-    "ws": true
-  },
-  "/api/*": {
-    "target": "https://mempool.ninja",
-    "secure": false,
-    "changeOrigin": true,
-    "logLevel": "debug",
-    "pathRewrite": {
-      "^/api": "https://mempool.ninja/api"
-    },
-    "timeout": 3600000
-  },
-  "/testnet/api/v1/ws": {
-    "target": "https://mempool.ninja/testnet",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/testnet/api": "/api/v1/ws"
-    }
-  },
-  "/testnet/api/v1/*": {
-    "target": "https://mempool.ninja/testnet",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/testnet/api/v1": "/api/v1"
-    },
-    "timeout": 3600000
-  },
-  "/signet/api/v1/ws": {
-    "target": "https://mempool.ninja/signet",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/signet/api": "/api/v1/ws"
-    }
-  },
-  "/signet/api/v1/*": {
-    "target": "https://mempool.ninja/signet",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/signet/api/v1": "/api/v1"
-    },
-    "timeout": 3600000
-  },
-  "/bisq/api/v1/ws": {
-    "target": "https://mempool.ninja/bisq",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/bisq/api": "/api/v1/ws"
-    }
-  },
-  "/bisq/api/*": {
-    "target": "https://mempool.ninja/bisq",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/bisq/api/": "/api/v1/bisq/"
-    },
-    "timeout": 3600000
-  },
-  "/liquid/api/v1/ws": {
-    "target": "https://mempool.ninja/liquid",
-    "secure": false,
-    "ws": true,
-    "pathRewrite": {
-      "^/liquid/api": "/api/v1/ws"
-    }
-  },
-  "/liquid/api/*": {
-    "target": "https://mempool.ninja/liquid",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/liquid/api/": "/api/liquid/"
-    },
-    "timeout": 3600000
-  },
-  "/resources/assets.minimal.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/resources/assets.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/resources/pools.json": {
-    "target": "https://mempool.space",
-    "secure": false,
-    "changeOrigin": true
-  }
-}

frontend/server.run.ts

@@ -1,4 +1,4 @@
-import 'zone.js/dist/zone-node';
+import 'zone.js/node';
 import './generated-config';
 
 import * as domino from 'domino';

frontend/server.ts

@@ -1,4 +1,4 @@
-import 'zone.js/dist/zone-node';
+import 'zone.js/node';
 import './generated-config';
 
 import { ngExpressEngine } from '@nguniversal/express-engine';

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

@@ -21,12 +21,17 @@ import { TrademarkPolicyComponent } from './components/trademark-policy/trademar
 import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
 import { SponsorComponent } from './components/sponsor/sponsor.component';
 import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
+import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
 
 let routes: Routes = [
   {
     path: '',
     component: MasterPageComponent,
     children: [
+      {
+        path: 'tx/push',
+        component: PushTransactionComponent,
+      },
       {
         path: '',
         component: StartComponent,
@@ -95,6 +100,10 @@ let routes: Routes = [
         path: '',
         component: MasterPageComponent,
         children: [
+          {
+            path: 'tx/push',
+            component: PushTransactionComponent,
+          },
           {
             path: '',
             component: StartComponent,
@@ -164,6 +173,10 @@ let routes: Routes = [
         path: '',
         component: MasterPageComponent,
         children: [
+          {
+            path: 'tx/push',
+            component: PushTransactionComponent,
+          },
           {
             path: '',
             component: StartComponent,
@@ -226,6 +239,10 @@ let routes: Routes = [
         path: '',
         component: MasterPageComponent,
         children: [
+          {
+            path: 'tx/push',
+            component: PushTransactionComponent,
+          },
           {
             path: '',
             component: StartComponent,
@@ -325,6 +342,10 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
             path: '',
             component: DashboardComponent
           },
+          {
+            path: 'tx/push',
+            component: PushTransactionComponent,
+          },
           {
             path: 'tx/:id',
             component: TransactionComponent

frontend/src/app/app.constants.ts

@@ -31,6 +31,46 @@ export const mempoolFeeColors = [
   'b9254b',
 ];
 
+export const chartColors = [
+  "#D81B60",
+  "#8E24AA",
+  "#5E35B1",
+  "#3949AB",
+  "#1E88E5",
+  "#039BE5",
+  "#00ACC1",
+  "#00897B",
+  "#43A047",
+  "#7CB342",
+  "#C0CA33",
+  "#FDD835",
+  "#FFB300",
+  "#FB8C00",
+  "#F4511E",
+  "#6D4C41",
+  "#757575",
+  "#546E7A",
+  "#b71c1c",
+  "#880E4F",
+  "#4A148C",
+  "#311B92",
+  "#1A237E",
+  "#0D47A1",
+  "#01579B",
+  "#006064",
+  "#004D40",
+  "#1B5E20",
+  "#33691E",
+  "#827717",
+  "#F57F17",
+  "#FF6F00",
+  "#E65100",
+  "#BF360C",
+  "#3E2723",
+  "#212121",
+  "#263238",
+];
+
 export const feeLevels = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
   250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
 
@@ -66,7 +106,7 @@ export const languages: Language[] = [
 // { code: 'lv', name: 'Latviešu' },        // Latvian
 // { code: 'lt', name: 'Lietuvių' },        // Lithuanian
    { code: 'hu', name: 'Magyar' },          // Hungarian
-// { code: 'mk', name: 'Македонски' },      // Macedonian
+   { code: 'mk', name: 'Македонски' },      // Macedonian
 // { code: 'ms', name: 'Bahasa Melayu' },   // Malay
    { code: 'nl', name: 'Nederlands' },      // Dutch
    { code: 'ja', name: '日本語' },          // Japanese
@@ -75,7 +115,7 @@ export const languages: Language[] = [
    { code: 'pl', name: 'Polski' },          // Polish
    { code: 'pt', name: 'Português' },       // Portuguese
 // { code: 'pt-BR', name: 'Português (Brazil)' }, // Portuguese (Brazil)
-// { code: 'ro', name: 'Română' },          // Romanian
+   { code: 'ro', name: 'Română' },          // Romanian
    { code: 'ru', name: 'Русский' },         // Russian
 // { code: 'sk', name: 'Slovenčina' },      // Slovak
    { code: 'sl', name: 'Slovenščina' },     // Slovenian
@@ -83,9 +123,20 @@ export const languages: Language[] = [
 // { code: 'sh', name: 'Srpskohrvatski / српскохрватски' },// Serbo-Croatian
    { code: 'fi', name: 'Suomi' },           // Finnish
    { code: 'sv', name: 'Svenska' },         // Swedish
-// { code: 'th', name: 'ไทย' },             // Thai
+   { code: 'th', name: 'ไทย' },             // Thai
    { code: 'tr', name: 'Türkçe' },          // Turkish
    { code: 'uk', name: 'Українська' },      // Ukrainian
    { code: 'vi', name: 'Tiếng Việt' },      // Vietnamese
    { code: 'zh', name: '中文' },            // Chinese
 ];
+
+export const specialBlocks = {
+  '709632': {
+    labelEvent: 'Taproot 🌱 activation',
+    labelEventCompleted: 'Taproot 🌱 has been activated!',
+  },
+  '840000': {
+    labelEvent: 'Halving 🥳',
+    labelEventCompleted: 'Block Subsidy has halved to 3.125 BTC per block',
+  }
+};

frontend/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { NgxEchartsModule } from 'ngx-echarts';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
@@ -26,16 +27,17 @@ import { LiquidMasterPageComponent } from './components/liquid-master-page/liqui
 import { AboutComponent } from './components/about/about.component';
 import { TelevisionComponent } from './components/television/television.component';
 import { StatisticsComponent } from './components/statistics/statistics.component';
-import { ChartistComponent } from './components/statistics/chartist.component';
 import { BlockchainBlocksComponent } from './components/blockchain-blocks/blockchain-blocks.component';
 import { BlockchainComponent } from './components/blockchain/blockchain.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { AudioService } from './services/audio.service';
 import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
 import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component';
+import { IncomingTransactionsGraphComponent } from './components/incoming-transactions-graph/incoming-transactions-graph.component';
 import { TimeSpanComponent } from './components/time-span/time-span.component';
 import { SeoService } from './services/seo.service';
 import { MempoolGraphComponent } from './components/mempool-graph/mempool-graph.component';
+import { LbtcPegsGraphComponent } from './components/lbtc-pegs-graph/lbtc-pegs-graph.component';
 import { AssetComponent } from './components/asset/asset.component';
 import { AssetsComponent } from './assets/assets.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
@@ -45,7 +47,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
+import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { CodeTemplateComponent } from './components/api-docs/code-template.component';
@@ -55,6 +57,7 @@ import { TrademarkPolicyComponent } from './components/trademark-policy/trademar
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { SponsorComponent } from './components/sponsor/sponsor.component';
+import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
 
 @NgModule({
   declarations: [
@@ -78,11 +81,12 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     TimeSpanComponent,
     AddressLabelsComponent,
     MempoolBlocksComponent,
-    ChartistComponent,
     FooterComponent,
     MempoolBlockComponent,
     FeeDistributionGraphComponent,
+    IncomingTransactionsGraphComponent,
     MempoolGraphComponent,
+    LbtcPegsGraphComponent,
     AssetComponent,
     AssetsComponent,
     MinerComponent,
@@ -95,6 +99,7 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     PrivacyPolicyComponent,
     TrademarkPolicyComponent,
     SponsorComponent,
+    PushTransactionComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
@@ -106,6 +111,9 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     NgbTypeaheadModule,
     FontAwesomeModule,
     SharedModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    })
   ],
   providers: [
     ElectrsApiService,
@@ -134,6 +142,7 @@ export class AppModule {
     library.addIcons(faLink);
     library.addIcons(faBolt);
     library.addIcons(faTint);
+    library.addIcons(faFilter);
     library.addIcons(faAngleDown);
     library.addIcons(faAngleUp);
     library.addIcons(faExchangeAlt);

frontend/src/app/assets/assets.component.html

@@ -1,11 +1,11 @@
 <div class="container-xl">
-  <h1 style="float: left;" i18n="Registered assets page header">Registered assets</h1>
-  <br>
-
+  <div class="title-asset">
+    <h1 i18n="Registered assets page header">Registered assets</h1>
+  </div>
   <div class="clearfix"></div>
 
   <form [formGroup]="searchForm" class="form-inline">
-    <div class="input-group m-2">
+    <div class="input-group mb-2">
       <input style="width: 250px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
       <div class="input-group-append">
         <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
@@ -27,7 +27,7 @@
           <td>{{ asset.ticker }}</td>
           <td class="d-none d-md-block">{{ asset.entity && asset.entity.domain }}</td>
           <td><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
-        </tr> 
+        </tr>
       </tbody>
     </table>
 
@@ -52,7 +52,7 @@
           <td><span class="skeleton-loader"></span></td>
           <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
           <td><span class="skeleton-loader"></span></td>
-        </tr> 
+        </tr>
       </tbody>
     </table>
 
@@ -68,4 +68,4 @@
 
 </div>
 
-<br>
+<br>

frontend/src/app/assets/assets.component.scss

@@ -3,4 +3,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}
+.title-asset {
+  h1 {
+    line-height: 1;
+    margin: 0px;
+    padding-bottom: 10px;
+  }
+}

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

@@ -59,7 +59,7 @@
           <span style="float: left;" class="d-none d-md-block">{{ tx.id }}</span>
         </a>
         <div class="float-right">
-          {{ tx.time | date:'yyyy-MM-dd HH:mm' }}
+          &lrm;{{ tx.time | date:'yyyy-MM-dd HH:mm' }}
         </div>
         <div class="clearfix"></div>
       </div>

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

@@ -1,9 +1,11 @@
 <div class="container-xl">
 
   <div class="title-block">
-    <h1><ng-template [ngIf]="blockHeight" i18n="block.block">Block <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
+    <h1><ng-template [ngIf]="blockHeight" i18n="shared.block-title">Block <ng-container *ngTemplateOutlet="blockTemplateContent"></ng-container></ng-template></h1>
   </div>
 
+  <ng-template #blockTemplateContent><a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template>
+
   <div class="clearfix"></div>
 
   <ng-template [ngIf]="!isLoading && !error">
@@ -20,7 +22,7 @@
               <tr>
                 <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
                 <td>
-                  {{ block.time | date:'yyyy-MM-dd HH:mm' }}
+                  &lrm;{{ block.time | date:'yyyy-MM-dd HH:mm' }}
                   <div class="lg-inline">
                     <i class="symbol">(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since>)</i>
                   </div>
@@ -58,7 +60,7 @@
           <span style="float: left;" class="d-none d-md-block">{{ tx.id }}</span>
         </a>
         <div class="float-right">
-          {{ tx.time | date:'yyyy-MM-dd HH:mm' }}
+          &lrm;{{ tx.time | date:'yyyy-MM-dd HH:mm' }}
         </div>
         <div class="clearfix"></div>
       </div>

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

@@ -12,7 +12,7 @@
     <tbody *ngIf="(trades$ | async) as trades; else loadingTmpl">
       <tr *ngFor="let trade of trades;">
         <td>
-          {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
+          &lrm;{{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
         </td>
         <td *ngIf="view === 'all'">
           <ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: (trade._market || market).rsymbol }}</span></ng-container>

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

@@ -1,20 +1,19 @@
 <div class="container-xl">
 
-  <div class="title-block">
   <ng-template [ngIf]="!isLoading && !error">
-
-    <div>
+    <div class="title-block">
       <div class="title">
         <h1 i18n="shared.transaction">Transaction</h1>
       </div>
 
-      <div class="tx-link">
+      <span class="tx-link float-left">
         <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]">
           <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
           <span class="d-none d-lg-inline">{{ bisqTx.id }}</span>
         </a>
         <app-clipboard [text]="bisqTx.id"></app-clipboard>
-      </div>
+      </span>
+      <span class="grow"></span>
       <div class="container-buttons">
         <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right">
           <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
@@ -22,6 +21,8 @@
           <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
         </button>
       </div>
+    </div>
+    
       <div class="clearfix"></div>
 
       <div class="box transaction-container">
@@ -32,7 +33,7 @@
                 <tr>
                   <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
                   <td>
-                    {{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
+                    &lrm;{{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
                     <div class="lg-inline">
                       <i class="symbol">(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since>)</i>
                     </div>
@@ -84,25 +85,33 @@
 
       <br>
 
-      <h2 i18n="transaction.details">Details</h2>
-
+      <div class="title">
+        <h2 i18n="transaction.details">Details</h2>
+      </div>
 
       <app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
 
       <br>
 
-      <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+      <div class="title">
+        <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+      </div>
 
       <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
 
       <br>
-    </div>
-  </ng-template>
+    </ng-template>
 
-  <ng-template [ngIf="isLoading && !error">
+    <ng-template [ngIf]="isLoading && !error">
 
     <div class="clearfix"></div>
 
+    <div class="title-block">
+      <div class="title">
+        <h1 i18n="shared.transaction">Transaction</h1>
+      </div>
+    </div>
+
     <div class="box">
       <div class="row">
         <div class="col-sm">
@@ -112,6 +121,14 @@
                 <td class="td-width"><span class="skeleton-loader"></span></td>
                 <td><span class="skeleton-loader"></span></td>
               </tr>
+              <tr>
+                <td class="td-width"><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td class="td-width"><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -122,6 +139,10 @@
                 <td class="td-width"><span class="skeleton-loader"></span></td>
                 <td><span class="skeleton-loader"></span></td>
               </tr>
+              <tr>
+                <td class="td-width"><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -130,7 +151,10 @@
 
     <br>
 
-    <h2 i18n="transaction.details">Details</h2>
+    <div class="title">
+      <h2 i18n="transaction.details">Details</h2>
+    </div>
+
     <div class="box">
       <table class="table table-borderless table-striped">
         <tbody>
@@ -151,18 +175,30 @@
 
     <br>
 
-    <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
-
+    <div class="title">
+      <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+    </div>
+    
     <div class="box">
       <div class="row">
-        <table class="table table-borderless table-striped">
-          <tbody>
-            <tr>
-              <td><span class="skeleton-loader"></span></td>
-              <td><span class="skeleton-loader"></span></td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
 
@@ -178,4 +214,4 @@
     </div>
   </ng-template>
 
-</div>
+</div>

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
 
-import { merge, Observable } from 'rxjs';
-import { switchMap, map, tap, filter } from 'rxjs/operators';
+import { Observable, Subscription } from 'rxjs';
+import { switchMap, map, tap } from 'rxjs/operators';
 import { BisqApiService } from '../bisq-api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { FormGroup, FormBuilder } from '@angular/forms';
@@ -16,7 +16,7 @@ import { WebsocketService } from 'src/app/services/websocket.service';
   styleUrls: ['./bisq-transactions.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class BisqTransactionsComponent implements OnInit {
+export class BisqTransactionsComponent implements OnInit, OnDestroy {
   transactions$: Observable<[BisqTransaction[], number]>;
   page = 1;
   itemsPerPage = 50;
@@ -25,6 +25,7 @@ export class BisqTransactionsComponent implements OnInit {
   loadingItems: number[];
   radioGroupForm: FormGroup;
   types: string[] = [];
+  radioGroupSubscription: Subscription;
 
   txTypeOptions: IMultiSelectOption[] = [
       { id: 1, name: $localize`Asset listing fee` },
@@ -90,52 +91,39 @@ export class BisqTransactionsComponent implements OnInit {
       this.paginationMaxSize = 3;
     }
 
-    this.transactions$ = merge(
-      this.route.queryParams
-        .pipe(
-          filter((queryParams) => {
-            const newPage = parseInt(queryParams.page, 10);
-            const types = queryParams.types;
-            if (newPage !== this.page || types !== this.types.map((type) => this.txTypes.indexOf(type) + 1).join(',')) {
-              return true;
-            }
-            return false;
-          }),
-          tap((queryParams) => {
-            if (queryParams.page) {
-              const newPage = parseInt(queryParams.page, 10);
-              this.page = newPage;
-            } else {
-              this.page = 1;
-            }
-            if (queryParams.types) {
-              const types = queryParams.types.split(',').map((str: string) => parseInt(str, 10));
-              this.types = types.map((id: number) => this.txTypes[id - 1]);
-              this.radioGroupForm.get('txTypes').setValue(types, { emitEvent: false });
-            } else {
-              this.types = [];
-              this.radioGroupForm.get('txTypes').setValue(this.txTypesDefaultChecked, { emitEvent: false });
-            }
-            this.cd.markForCheck();
-          })
-        ),
-      this.radioGroupForm.valueChanges
-        .pipe(
-          tap((data) => {
-            this.types = data.txTypes.map((id: number) => this.txTypes[id - 1]);
-            if (this.types.length === this.txTypes.length) {
-              this.types = [];
-            }
-            this.page = 1;
-            this.typesChanged(data.txTypes);
-            this.cd.markForCheck();
-          })
-        ),
-      )
+    this.transactions$ = this.route.queryParams
       .pipe(
+        tap((queryParams) => {
+          if (queryParams.page) {
+            const newPage = parseInt(queryParams.page, 10);
+            this.page = newPage;
+          } else {
+            this.page = 1;
+          }
+          if (queryParams.types) {
+            const types = queryParams.types.split(',').map((str: string) => parseInt(str, 10));
+            this.types = types.map((id: number) => this.txTypes[id - 1]);
+            this.radioGroupForm.get('txTypes').setValue(types, { emitEvent: false });
+          } else {
+            this.types = [];
+            this.radioGroupForm.get('txTypes').setValue([], { emitEvent: false });
+          }
+          this.cd.markForCheck();
+        }),
         switchMap(() => this.bisqApiService.listTransactions$((this.page - 1) * this.itemsPerPage, this.itemsPerPage, this.types)),
         map((response) =>  [response.body, parseInt(response.headers.get('x-total-count'), 10)])
       );
+
+    this.radioGroupSubscription = this.radioGroupForm.valueChanges
+      .subscribe((data) => {
+        this.types = data.txTypes.map((id: number) => this.txTypes[id - 1]);
+        if (this.types.length === this.txTypes.length) {
+          this.types = [];
+        }
+        this.page = 1;
+        this.typesChanged(data.txTypes);
+        this.cd.markForCheck();
+      });
   }
 
   pageChange(page: number) {
@@ -144,8 +132,6 @@ export class BisqTransactionsComponent implements OnInit {
       queryParams: { page: page },
       queryParamsHandling: 'merge',
     });
-    // trigger queryParams change
-    this.page = -1;
   }
 
   typesChanged(types: number[]) {
@@ -172,4 +158,8 @@ export class BisqTransactionsComponent implements OnInit {
   onResize(event: any) {
     this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
   }
+
+  ngOnDestroy(): void {
+    this.radioGroupSubscription.unsubscribe();
+  }
 }

frontend/src/app/bisq/bisq.interfaces.ts

@@ -71,7 +71,7 @@ interface BisqScriptPubKey {
   addresses: string[];
   asm: string;
   hex: string;
-  reqSigs: number;
+  reqSigs?: number;
   type: string;
 }
 

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

@@ -12,6 +12,7 @@ import { BisqDashboardComponent } from './bisq-dashboard/bisq-dashboard.componen
 import { BisqMarketComponent } from './bisq-market/bisq-market.component';
 import { BisqMainDashboardComponent } from './bisq-main-dashboard/bisq-main-dashboard.component';
 import { TermsOfServiceComponent } from '../components/terms-of-service/terms-of-service.component';
+import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
 
 const routes: Routes = [
     {
@@ -30,6 +31,10 @@ const routes: Routes = [
       path: 'market/:pair',
       component: BisqMarketComponent,
     },
+    {
+      path: 'tx/push',
+      component: PushTransactionComponent,
+    },
     {
       path: 'tx/:id',
       component: BisqTransactionComponent

frontend/src/app/bitcoin.utils.ts

@@ -16,6 +16,7 @@ export function calcSegwitFeeGains(tx: Transaction) {
     const isP2sh  = vin.prevout.scriptpubkey_type === 'p2sh';
     const isP2wsh = vin.prevout.scriptpubkey_type === 'v0_p2wsh';
     const isP2wpkh = vin.prevout.scriptpubkey_type === 'v0_p2wpkh';
+    const isP2tr  = vin.prevout.scriptpubkey_type === 'v1_p2tr';
 
     const op = vin.scriptsig ? vin.scriptsig_asm.split(' ')[0] : null;
     const isP2sh2Wpkh = isP2sh && !!vin.witness && op === 'OP_PUSHBYTES_22';
@@ -25,6 +26,7 @@ export function calcSegwitFeeGains(tx: Transaction) {
       // Native Segwit - P2WPKH/P2WSH (Bech32)
       case isP2wpkh:
       case isP2wsh:
+      case isP2tr:
         // maximal gains: the scriptSig is moved entirely to the witness part
         realizedGains += witnessSize(vin) * 3;
         // XXX P2WSH output creation is more expensive, should we take this into consideration?

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

@@ -34,9 +34,9 @@
   <div class="enterprise-sponsor">
     <h3 i18n="about.sponsors.enterprise.withRocket">Enterprise Sponsors 🚀</h3>
     <div class="wrapper">
-      <a href="https://squarecrypto.org/" target="_blank" title="Square Crypto">
-        <img class="image" src="/resources/profile/sqcrypto.svg" />
-        <span>Square</span>
+      <a href="https://spiral.xyz/" target="_blank" title="Spiral">
+        <img class="image" src="/resources/profile/spiral.svg" />
+        <span>Spiral</span>
       </a>
       <a href="https://gemini.com/" target="_blank" title="Gemini">
         <img class="image" src="/resources/profile/gemini.svg" />
@@ -50,7 +50,7 @@
         <img class="image" src="/resources/profile/foundry.svg" />
         <span>Foundry</span>
       </a>
-      <a href="https://unchained-capital.com/" target="_blank" title="Unchained">
+      <a href="https://unchained.com/" target="_blank" title="Unchained">
         <img class="image" src="/resources/profile/unchained.svg" />
         <span>Unchained</span>
       </a>
@@ -126,6 +126,10 @@
         <img class="image" src="/resources/profile/blixt.png" />
         <span>Blixt</span>
       </a>
+      <a href="https://github.com/ZeusLN/zeus" target="_blank" title="Zeus">
+        <img class="image" src="/resources/profile/zeus.png" />
+        <span>Zeus</span>
+      </a>
       <a href="https://github.com/vulpemventures/marina" target="_blank" title="Marina Wallet">
         <img class="image" src="/resources/profile/marina.svg" />
         <span>Marina</span>
@@ -138,10 +142,6 @@
         <img class="image" src="/resources/profile/blw.png" />
         <span>BLW</span>
       </a>
-      <a href="https://github.com/pxsocs/warden" target="_blank" title="WARden Portfolio">
-        <img class="image" src="/resources/profile/warden.jpg" />
-        <span>WARden</span>
-      </a>
     </div>
   </div>
 

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

@@ -1,13 +1,14 @@
 <div class="container-xl">
-  <h1 i18n="shared.address">Address</h1>
-  <div class="tx-link">
-    <a [routerLink]="['/address/' | relativeUrl, addressString]" >
-      <span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
-      <span class="d-none d-lg-inline">{{ addressString }}</span>
-    </a>
-    <app-clipboard [text]="addressString"></app-clipboard>
+  <div class="title-address">
+    <h1 i18n="shared.address">Address</h1>
+    <div class="tx-link">
+      <a [routerLink]="['/address/' | relativeUrl, addressString]" >
+        <span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
+        <span class="d-none d-lg-inline">{{ addressString }}</span>
+      </a>
+      <app-clipboard [text]="addressString"></app-clipboard>
+    </div>
   </div>
-  <br>
 
   <div class="clearfix"></div>
 
@@ -25,7 +26,7 @@
               <ng-template [ngIf]="!address.electrum">
                 <tr>
                   <td i18n="address.total-received">Total received</td>
-                  <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="receieved" [noFiat]="true"></app-amount></td>
+                  <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="received" [noFiat]="true"></app-amount></td>
                 </tr>
                 <tr>
                   <td i18n="address.total-sent">Total sent</td>
@@ -34,7 +35,7 @@
               </ng-template>
               <tr>
                 <td i18n="address.balance">Balance</td>
-                <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="receieved - sent" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="receieved - sent"></app-fiat></span></td>
+                <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="received - sent" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="received - sent"></app-fiat></span></td>
               </tr>
             </tbody>
           </table>
@@ -50,12 +51,13 @@
     </div>
 
     <br>
-
-    <h2>
-      <ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
-      <ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
-      <ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
-    </h2>
+    <div class="title-tx">
+      <h2>
+        <ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
+        <ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
+        <ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
+      </h2>
+    </div>
 
     <app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
 
@@ -85,7 +87,7 @@
 
       </ng-template>
 
-      <ng-template [ngIf]="retryLoadmore">
+      <ng-template [ngIf]="retryLoadMore">
         <br>
         <button type="button" class="btn btn-outline-info btn-sm" (click)="loadMore()"><fa-icon [icon]="['fas', 'redo-alt']" [fixedWidth]="true"></fa-icon></button>
       </ng-template>
@@ -114,7 +116,7 @@
         </div>
         <div class="w-100 d-block d-md-none"></div>
         <div class="col">
-          
+
         </div>
       </div>
     </div>
@@ -122,10 +124,11 @@
   </ng-template>
 
   <ng-template [ngIf]="error">
+    <br>
     <div class="text-center">
       <span i18n="address.error.loading-address-data">Error loading address data.</span>
       <br>
-      <ng-template #displayServerError><i>{{ error.error }}</i></ng-template>
+      <ng-template #displayServerError><i class="small">({{ error.error }})</i></ng-template>
       <ng-template [ngIf]="error.status === 413 || error.status === 405" [ngIfElse]="displayServerError">
         <ng-container i18n="Electrum server limit exceeded error">
           <i>The number of transactions on this address exceeds the Electrum server limit</i>
@@ -136,6 +139,8 @@
         <a href="https://mempool.space/address/{{ addressString }}" target="_blank">https://mempool.space/address/{{ addressString }}</a>
         <br>
         <a href="http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/address/{{ addressString }}" target="_blank">http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/address/{{ addressString }}</a>
+        <br><br>
+        <i class="small">({{ error.error }})</i>
       </ng-template>
     </div>
   </ng-template>

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

@@ -35,17 +35,22 @@
 h1 {
   margin: 0px;
   padding: 0px;
+  margin-right: 10px;
+  font-size: 1.9rem;
   @media (min-width: 576px) {
+    font-size: 2rem;
     float: left;
-    margin-right: 10px;
+  }
+  @media (min-width: 768px) {
+    font-size: 2.5rem;
   }
 }
 
 .address-link {
-  line-height: 56px; 
+  line-height: 56px;
   margin-left: 0px;
   top: -2px;
-  position: relative;  
+  position: relative;
   @media (min-width: 768px) {
     line-height: 69px;
   }
@@ -69,10 +74,20 @@ h1 {
 
 .tx-link {
   display: block;
-  width: 100%;
-  top: 14px;
+  height: 100%;
+  top: 9px;
   position: relative;
+	@media (min-width: 576px) {
+    top: 11px;
+	}
   @media (min-width: 768px) {
-    top: 20px;
+    top: 17px;
   }
-}
+}
+
+.title-tx {
+  h2 {
+    line-height: 1;
+    margin-bottom: 10px;
+  }
+}

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

@@ -24,7 +24,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   isLoadingAddress = true;
   transactions: Transaction[];
   isLoadingTransactions = true;
-  retryLoadmore = false;
+  retryLoadMore = false;
   error: any;
   mainSubscription: Subscription;
   addressLoadingStatus$: Observable<number>;
@@ -33,7 +33,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   totalConfirmedTxCount = 0;
   loadedConfirmedTxCount = 0;
   txCount = 0;
-  receieved = 0;
+  received = 0;
   sent = 0;
 
   private tempTransactions: Transaction[];
@@ -142,7 +142,13 @@ export class AddressComponent implements OnInit, OnDestroy {
           this.tempTransactions[this.timeTxIndexes[index]].firstSeen = time;
         });
         this.tempTransactions.sort((a, b) => {
-          return b.status.block_time - a.status.block_time || b.firstSeen - a.firstSeen;
+          if (b.status.confirmed) {
+            if (b.status.block_height === a.status.block_height) {
+              return b.status.block_time - a.status.block_time;
+            }
+            return b.status.block_height - a.status.block_height;
+          }
+          return b.firstSeen - a.firstSeen;
         });
 
         this.transactions = this.tempTransactions;
@@ -177,7 +183,7 @@ export class AddressComponent implements OnInit, OnDestroy {
         });
         transaction.vout.forEach((vout) => {
           if (vout.scriptpubkey_address === this.address.address) {
-            this.receieved += vout.value;
+            this.received += vout.value;
           }
         });
       });
@@ -200,7 +206,7 @@ export class AddressComponent implements OnInit, OnDestroy {
       return;
     }
     this.isLoadingTransactions = true;
-    this.retryLoadmore = false;
+    this.retryLoadMore = false;
     this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.lastTransactionTxId)
       .subscribe((transactions: Transaction[]) => {
         this.lastTransactionTxId = transactions[transactions.length - 1].txid;
@@ -210,12 +216,12 @@ export class AddressComponent implements OnInit, OnDestroy {
       },
       (error) => {
         this.isLoadingTransactions = false;
-        this.retryLoadmore = true;
+        this.retryLoadMore = true;
       });
   }
 
   updateChainStats() {
-    this.receieved = this.address.chain_stats.funded_txo_sum + this.address.mempool_stats.funded_txo_sum;
+    this.received = this.address.chain_stats.funded_txo_sum + this.address.mempool_stats.funded_txo_sum;
     this.sent = this.address.chain_stats.spent_txo_sum + this.address.mempool_stats.spent_txo_sum;
     this.txCount = this.address.chain_stats.tx_count + this.address.mempool_stats.tx_count;
     this.totalConfirmedTxCount = this.address.chain_stats.tx_count;

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

@@ -1,5 +1,5 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
-  <div class="container-xl">
+  <div class="container-xl text-left">
     <div class="text-center">
       <h2>{{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API Service</ng-container></h2>
     </div>
@@ -33,7 +33,7 @@
       </li>
 
       <li *ngIf="network.val === 'bisq'" [ngbNavItem]="0">
-        <a ngbNavLink i18n="api-docs.tab.bsq|API Docs tab for BSQ">Markets</a>
+        <a ngbNavLink i18n="Bisq All Markets">Markets</a>
         <ng-template ngbNavContent>
           <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
 
@@ -698,7 +698,7 @@
               </ng-template>
               <ng-template ngbPanelContent>
                 <div class="endpoint">
-                  <a [href]="wrapUrl(network.val, code.mempoolRecent)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid</a>
+                  <a [href]="wrapUrl(network.val, code.transaction)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid</a>
                 </div>
                 <div class="description">
                   <div class="subtitle" i18n>Description</div>

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

@@ -40,18 +40,6 @@ export class ApiDocsComponent implements OnInit {
 
     this.hostname = `${document.location.protocol}//${this.hostname}`;
 
-    if (document.location.hostname === 'localhost') {
-      if (this.env.BASE_MODULE === 'bisq') {
-        this.hostname = `https://bisq.markets`;
-      }
-      if (this.env.BASE_MODULE === 'liquid') {
-        this.hostname = `https://liquid.network`;
-      }
-      if (this.env.BASE_MODULE === 'mempool') {
-        this.hostname = `https://mempool.space`;
-      }
-    }
-
     this.code = {
       address: {
         codeTemplate: {
@@ -73,17 +61,17 @@ export class ApiDocsComponent implements OnInit {
           `,
         },
         codeSampleMainnet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `{
-  address: "1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC",
+  address: "1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv",
   chain_stats: {
-    funded_txo_count: 765,
-    funded_txo_sum: 87749875807,
-    spent_txo_count: 765,
-    spent_txo_sum: 87749875807,
-    tx_count: 875
+    funded_txo_count: 5,
+    funded_txo_sum: 15007599040,
+    spent_txo_count: 5,
+    spent_txo_sum: 15007599040,
+    tx_count: 7
   },
   mempool_stats: {
     funded_txo_count: 0,
@@ -117,17 +105,17 @@ export class ApiDocsComponent implements OnInit {
 }`
         },
         codeSampleSignet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `{
-  address: "1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC",
+  address: "1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv",
   chain_stats: {
-    funded_txo_count: 765,
-    funded_txo_sum: 87749875807,
-    spent_txo_count: 765,
-    spent_txo_sum: 87749875807,
-    tx_count: 875
+    funded_txo_count: 5,
+    funded_txo_sum: 15007599040,
+    spent_txo_count: 5,
+    spent_txo_sum: 15007599040,
+    tx_count: 7
   },
   mempool_stats: {
     funded_txo_count: 0,
@@ -199,24 +187,24 @@ export class ApiDocsComponent implements OnInit {
           `,
         },
         codeSampleMainnet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `[
   {
-    txid: "f39fbfd2482ac8a7174fe27caddd66aec05eec0d0e988ddf0de2136a416394c4",
-    version: 2,
+    txid: "dba43fd04b7ae3df8e5b596f2e7fab247c58629d622e3a5213f03a5a09684430",
+    version: 1,
     locktime: 0,
     vin: [ [Object] ],
     vout: [ [Object], [Object] ],
-    size: 251,
-    weight: 1004,
-    fee: 8212,
+    size: 255,
+    weight: 1020,
+    fee: 10000,
     status: {
       confirmed: true,
-      block_height: 684536,
-      block_hash: "00000000000000000008df08f428ca4e8251ba9171d9060b056f1f94d4fefbc7",
-      block_time: 1621687336
+      block_height: 326148,
+      block_hash: "00000000000000001e4118adcfbb02364bc13c41c210d8811e4f39aeb3687e36",
+      block_time: 1413798020
     }
   },
   ...
@@ -247,17 +235,17 @@ export class ApiDocsComponent implements OnInit {
 ]`
         },
         codeSampleSignet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `{
-  address: "1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC",
+  address: "1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv",
   chain_stats: {
-    funded_txo_count: 765,
-    funded_txo_sum: 87749875807,
-    spent_txo_count: 765,
-    spent_txo_sum: 87749875807,
-    tx_count: 875
+    funded_txo_count: 5,
+    funded_txo_sum: 15007599040,
+    spent_txo_count: 5,
+    spent_txo_sum: 15007599040,
+    tx_count: 7
   },
   mempool_stats: {
     funded_txo_count: 0,
@@ -319,9 +307,9 @@ export class ApiDocsComponent implements OnInit {
           `,
         },
         codeSampleMainnet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `[
   {
     txid: "c4e53c2e37f4fac759fdb0d8380e4d49e6c7211233ae276a44ce7074a1d6d168",
@@ -367,11 +355,11 @@ export class ApiDocsComponent implements OnInit {
 ],`
         },
         codeSampleSignet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `{
-  address: "1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC",
+  address: "1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv",
   chain_stats: {
     funded_txo_count: 765,
     funded_txo_sum: 87749875807,
@@ -439,9 +427,9 @@ export class ApiDocsComponent implements OnInit {
           `,
         },
         codeSampleMainnet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `[
   {
     txid: "16cd9bbc6b62313a22d16671fa559aec6bf581df8b5853d37775c84b0fddfa90",
@@ -475,9 +463,9 @@ export class ApiDocsComponent implements OnInit {
 ]`
         },
         codeSampleSignet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `[
   {
     txid: "16cd9bbc6b62313a22d16671fa559aec6bf581df8b5853d37775c84b0fddfa90",
@@ -575,9 +563,9 @@ export class ApiDocsComponent implements OnInit {
 ]`
         },
         codeSampleSignet: {
-          esModule: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          commonJS: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
-          curl: [`1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC`],
+          esModule: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          commonJS: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
+          curl: [`1wiz18xYmhRX6xStj2b9t1rwWX4GKUgpv`],
           response: `[
   {
     txid: "e58b47f657b496a083ad9a4fb10c744d5e993028efd9cfba149885334d98bdf5",
@@ -2063,7 +2051,7 @@ export class ApiDocsComponent implements OnInit {
       },
       transactionCpfp: {
         codeTemplate: {
-          curl: `/api/fees/cpfp/%{1}`,
+          curl: `/api/v1/cpfp/%{1}`,
           commonJS: `
         const { %{0}: { fees } } = mempoolJS();
 
@@ -3428,8 +3416,8 @@ export class ApiDocsComponent implements OnInit {
 
         ws.addEventListener('message', function incoming({data}) {
           const res = JSON.parse(data.toString());
-          if (res.blocks) {
-            document.getElementById("result-blocks").textContent = JSON.stringify(res.blocks, undefined, 2);
+          if (res.block) {
+            document.getElementById("result-blocks").textContent = JSON.stringify(res.block, undefined, 2);
           }
           if (res.mempoolInfo) {
             document.getElementById("result-mempool-info").textContent = JSON.stringify(res.mempoolInfo, undefined, 2);
@@ -3437,8 +3425,8 @@ export class ApiDocsComponent implements OnInit {
           if (res.transactions) {
             document.getElementById("result-transactions").textContent = JSON.stringify(res.transactions, undefined, 2);
           }
-          if (res.mempoolBlocks) {
-            document.getElementById("result-mempool-blocks").textContent = JSON.stringify(res.mempoolBlocks, undefined, 2);
+          if (res["mempool-blocks"]) {
+            document.getElementById("result-mempool-blocks").textContent = JSON.stringify(res["mempool-blocks"], undefined, 2);
           }
         });
         `,
@@ -3451,8 +3439,8 @@ export class ApiDocsComponent implements OnInit {
 
   ws.on("message", function incoming(data) {
     const res = JSON.parse(data.toString());
-    if (res.blocks) {
-      console.log(res.blocks);
+    if (res.block) {
+      console.log(res.block);
     }
     if (res.mempoolInfo) {
       console.log(res.mempoolInfo);
@@ -3460,8 +3448,8 @@ export class ApiDocsComponent implements OnInit {
     if (res.transactions) {
       console.log(res.transactions);
     }
-    if (res.mempoolBlocks) {
-      console.log(res.mempoolBlocks);
+    if (res["mempool-blocks"]) {
+      console.log(res["mempool-blocks"]);
     }
   });
           `,

frontend/src/app/components/api-docs/code-template.component.ts

@@ -174,10 +174,10 @@ init();`;
 
       let resultHtml = '<pre id="result"></pre>';
       if (this.method === 'websocket') {
-        resultHtml = `<pre id="result-blocks"></pre>
-    <pre id="result-mempool-info"></pre>
-    <pre id="result-transactions"></pre>
-    <pre id="result-mempool-blocks"></pre>`;
+        resultHtml = `<h2>Blocks</h2><pre id="result-blocks">Waiting for data</pre><br>
+    <h2>Mempool Info</h2><pre id="result-mempool-info">Waiting for data</pre><br>
+    <h2>Transactions</h2><pre id="result-transactions">Waiting for data</pre><br>
+    <h2>Mempool Blocks</h2><pre id="result-mempool-blocks">Waiting for data</pre><br>`;
       }
 
       return `<!DOCTYPE html>
@@ -284,13 +284,13 @@ yarn add @mempool/liquid.js`;
     if (this.env.BASE_MODULE === 'mempool') {
       if (this.network === 'main' || this.network === '') {
         if (this.method === 'post') {
-          return `curl POST -sSLd "${text}"`;
+          return `curl -X POST -sSLd "${text}"`;
         }
         return `curl -sSL "${this.hostname}${text}"`;
       }
       if (this.method === 'post') {
         text = text.replace('/api', `/${this.network}/api`);
-        return `curl POST -sSLd "${text}"`;
+        return `curl -X POST -sSLd "${text}"`;
       }
       return `curl -sSL "${this.hostname}/${this.network}${text}"`;
     }

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

@@ -39,7 +39,13 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.router.events.subscribe((val) => {
       if (val instanceof NavigationEnd) {
-        this.link.setAttribute('href', 'https://mempool.space' + (this.location.path() === '/' ? '' : this.location.path()));
+        let domain = 'mempool.space';
+        if (this.stateService.env.BASE_MODULE === 'liquid') {
+          domain = 'liquid.network';
+        } else if (this.stateService.env.BASE_MODULE === 'bisq') {
+          domain = 'bisq.markets';
+        }
+        this.link.setAttribute('href', 'https://' + domain + this.location.path());
       }
     });
   }

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

@@ -1,11 +1,14 @@
 <div class="container-xl">
-  <h1 style="float: left;" i18n="asset|Liquid Asset page title">Asset</h1>
-  <a [routerLink]="['/asset/' | relativeUrl, assetString]" style="line-height: 56px; margin-left: 10px;">
-    <span class="d-inline d-lg-none">{{ assetString | shortenString : 24 }}</span>
-    <span class="d-none d-lg-inline">{{ assetString }}</span>
-  </a>
-  <app-clipboard [text]="assetString"></app-clipboard>
-  <br>
+  <div class="title-asset">
+    <h1 i18n="asset|Liquid Asset page title">Asset</h1>
+    <div class="tx-link">
+      <a [routerLink]="['/asset/' | relativeUrl, assetString]">
+        <span class="d-inline d-lg-none">{{ assetString | shortenString : 24 }}</span>
+        <span class="d-none d-lg-inline">{{ assetString }}</span>
+      </a>
+      <app-clipboard [text]="assetString"></app-clipboard>
+    </div>
+  </div>
 
   <div class="clearfix"></div>
 
@@ -72,12 +75,14 @@
 
     <br>
 
-    <h2>
-      <ng-template [ngIf]="transactions?.length" i18n="asset.M_of_N">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }}&nbsp;</ng-template>
-      <ng-template [ngIf]="isNativeAsset" [ngIfElse]="defaultAsset" i18n="Liquid native asset transactions title">Peg In/Out and Burn Transactions</ng-template>
-      <ng-template #defaultAsset i18n="Default asset transactions title">Issuance and Burn Transactions</ng-template>
-    </h2>
-    
+    <div class="title-tx">
+      <h2>
+        <ng-template [ngIf]="transactions?.length" i18n="asset.M_of_N">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }}&nbsp;</ng-template>
+        <ng-template [ngIf]="isNativeAsset" [ngIfElse]="defaultAsset" i18n="Liquid native asset transactions title">Peg In/Out and Burn Transactions</ng-template>
+        <ng-template #defaultAsset i18n="Default asset transactions title">Issuance and Burn Transactions</ng-template>
+      </h2>
+    </div>
+
     <app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
 
     <div class="text-center">

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

@@ -20,4 +20,33 @@
     margin-top: 20px;
     margin-right: 0px;
   }
-}
+}
+
+h1 {
+  margin: 0px;
+  padding: 0px;
+  margin-right: 15px;
+  @media (min-width: 576px) {
+    float: left;
+  }
+}
+
+.tx-link {
+  display: block;
+  height: 100%;
+  top: 9px;
+  position: relative;
+	@media (min-width: 576px) {
+    top: 11px;
+	}
+  @media (min-width: 768px) {
+    top: 17px;
+  }
+}
+.title-tx {
+  h2 {
+    line-height: 1;
+    margin-bottom: 10px;
+  }
+}
+

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

@@ -136,7 +136,13 @@ export class AssetComponent implements OnInit, OnDestroy {
           this.tempTransactions[this.timeTxIndexes[index]].firstSeen = time;
         });
         this.tempTransactions.sort((a, b) => {
-          return b.status.block_time - a.status.block_time || b.firstSeen - a.firstSeen;
+          if (b.status.confirmed) {
+            if (b.status.block_height === a.status.block_height) {
+              return b.status.block_time - a.status.block_time;
+            }
+            return b.status.block_height - a.status.block_height;
+          }
+          return b.firstSeen - a.firstSeen;
         });
 
         this.transactions = this.tempTransactions;

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

@@ -2,8 +2,8 @@
 
   <div class="title-block" id="block">
     <h1>
-      <ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis 
-        <div class="next-previous-blocks">
+      <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container>
+        <span class="next-previous-blocks">
           <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
             <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
           </a>
@@ -11,10 +11,11 @@
           <span placement="bottom" class="disable">
             <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
           </span>
-        </div>
+        </span>
       </ng-template>
-      <ng-template [ngIf]="blockHeight" i18n="block.block"> Block 
-        <div class="next-previous-blocks">
+      <ng-template [ngIf]="blockHeight" i18n="shared.block-title">Block <ng-container *ngTemplateOutlet="blockTemplateContent"></ng-container></ng-template>
+      <ng-template #blockTemplateContent>
+        <span class="next-previous-blocks">
           <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
             <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
           </a>
@@ -28,7 +29,7 @@
           <span *ngIf="!showPreviousBlocklink" placement="bottom" class="disable">
             <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
           </span>
-        </div>
+        </span>
       </ng-template>
     </h1>
 
@@ -53,7 +54,7 @@
               <tr>
                 <td i18n="block.timestamp">Timestamp</td>
                 <td>
-                  {{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
+                  &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
                   <div class="lg-inline">
                     <i class="symbol">(<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>)</i>
                   </div>
@@ -61,11 +62,11 @@
               </tr>
               <tr>
                 <td i18n="block.size">Size</td>
-                <td [innerHTML]="block.size | bytes: 2"></td>
+                <td [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></td>
               </tr>
               <tr>
                 <td i18n="block.weight">Weight</td>
-                <td [innerHTML]="block.weight | wuBytes: 2"></td>
+                <td [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></td>
               </tr>
             </tbody>
           </table>
@@ -168,21 +169,21 @@
         <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
       </h2>
 
-      <ngb-pagination class="pagination-container" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
+      <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
     </div>
     <div class="clearfix"></div>
 
     <app-transactions-list [transactions]="transactions"></app-transactions-list>
 
     <ng-template [ngIf]="isLoadingTransactions">
-      <div class="text-center mb-4 mt-3">
+      <div class="text-center mb-4" class="tx-skeleton">
 
-        <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+        <div class="header-bg box">
           <span class="skeleton-loader"></span>
         </div>
 
         <div class="header-bg box">
-          <div class="row" style="height: 107px;">
+          <div class="row">
             <div class="col-sm">
               <span class="skeleton-loader"></span>
             </div>
@@ -199,7 +200,7 @@
             <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
           </div>
         </ng-container>
-        
+
       </div>
     </ng-template>
     <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
@@ -207,7 +208,7 @@
   </ng-template>
 
   <ng-template [ngIf]="isLoadingBlock && !error">
-    
+
     <div class="box">
       <div class="row">
         <div class="col-sm">

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

@@ -18,7 +18,7 @@
 }
 
 .fiat {
-  display: block;    
+  display: block;
   font-size: 13px;
   @media (min-width: 768px) {
     font-size: 14px;
@@ -40,10 +40,7 @@
 h1 {
   margin: 0px;
   padding: 0px;
-  @media (min-width: 576px) {
-    float: left;
-    margin-right: 10px;
-  }
+  line-height: 1;
   a {
     &:hover, &:focus{
       text-decoration: none;;
@@ -87,32 +84,23 @@ h1 {
 }
 
 .block-tx-title {
-  padding-top: 10px;
-  display: block;
-  text-align: right;
-  margin-top: -30px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin-top: -15px;
+  position: relative;
   @media (min-width: 550px) {
-    margin-top: 0px;
-    padding-top: 10px;
+    margin-top: 1rem;
+    flex-direction: row;
   }
   h2 {
-    display: inline-block;
-    float: left;
-    line-height: 1.6;
+    line-height: 1;
     margin: 0;
-    margin-bottom: -15px;
-    padding-right: 10px;
-    padding-top: 15px;
     position: relative;
-    top: -22px;
-    width: auto;
+    padding-bottom: 10px;
     @media (min-width: 550px) {
-      padding-top: 0px;
-      top: 0px;
-    }
-    @media (min-width: 768px) {
-      padding-top: 5px;
-      line-height: 1;
+      padding-bottom: 0px;
+      align-self: end;
     }
   }
 }
@@ -122,22 +110,41 @@ h1 {
 }
 
 .next-previous-blocks {
-  font-size: 36px;
+  font-size: 28px;
   display: inline-block;
-  vertical-align: bottom;
+  @media (min-width: 768px) {
+    font-size: 36px;
+  }
 
   a {
     color: #1ad8f4;
     &:hover, &:focus {
       color: #09a3ba;
       display: inline-block;
-      // transform: scale(1.2);
-      // transition: 150ms all ease-in-out;
     }
   }
 }
 
 .disable {
-  font-size: 36px;
+  font-size: 28px;
   color: #393e5c73;
-}
+  @media (min-width: 768px) {
+    font-size: 36px;
+  }
+}
+
+.tx-skeleton {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  .header-bg {
+    &:first-child {
+      padding: 10px;
+      margin-bottom: 10px;
+    }
+    &:nth-child(2) {
+      .row {
+        height: 107px;
+      }
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 <div class="blocks-container blockchain-blocks-container" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
-    <div class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
+    <div class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
       <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
       <div class="block-height">
         <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
@@ -12,7 +12,7 @@
         <div class="fee-span">
           {{ block.feeRange[1] | number:feeRounding }} - {{ block.feeRange[block.feeRange.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
-        <div class="block-size" [innerHTML]="block.size | bytes: 2">&lrm;</div>
+        <div class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
         <div class="transaction-count">
           <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
           <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
@@ -25,7 +25,7 @@
   <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>
 
-<ng-template #loadingBlocksTemplate >
+<ng-template #loadingBlocksTemplate>
   <div class="blocks-container">
     <div class="flashing">
       <div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn" >

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

@@ -111,7 +111,7 @@
 
 .flashing {
   animation: opacityPulse 2s ease-out;
-  animation-iteration-count: infinite; 
+  animation-iteration-count: infinite;
   opacity: 1;
 }
 
@@ -119,4 +119,4 @@
   0% {opacity: 0.7;}
   50% {opacity: 1.0;}
   100% {opacity: 0.7;}
-}
+}

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

@@ -1,8 +1,9 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { Block } from 'src/app/interfaces/electrs.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
+import { specialBlocks } from 'src/app/app.constants';
 
 @Component({
   selector: 'app-blockchain-blocks',
@@ -11,7 +12,7 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainBlocksComponent implements OnInit, OnDestroy {
-  
+  specialBlocks = specialBlocks;
   network = '';
   blocks: Block[] = [];
   emptyBlocks: Block[] = this.mountEmptyBlocks();

frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html

@@ -1,9 +1,5 @@
-<div style="height: 225px;" *ngIf="mempoolVsizeFeesData; else loadingFees">
-  <app-chartist
-    [data]="mempoolVsizeFeesData"
-    [type]="'Line'"
-    [options]="mempoolVsizeFeesOptions">
-  </app-chartist>
+<div class="fee-distribution-chart" *ngIf="mempoolVsizeFeesOptions; else loadingFees">
+  <div echarts [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
 </div>
 
 <ng-template #loadingFees>

frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts

@@ -1,70 +1,83 @@
-import { Component, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
-import * as Chartist from '@mempool/chartist';
+import { OnChanges } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-fee-distribution-graph',
   templateUrl: './fee-distribution-graph.component.html',
-  styleUrls: ['./fee-distribution-graph.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeeDistributionGraphComponent implements OnChanges {
-  @Input() feeRange;
+export class FeeDistributionGraphComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  @Input() height: number | string = 210;
+  @Input() top: number | string = 20;
+  @Input() right: number | string = 22;
+  @Input() left: number | string = 30;
 
-  mempoolVsizeFeesData: any;
   mempoolVsizeFeesOptions: any;
+  mempoolVsizeFeesInitOptions = {
+    renderer: 'svg'
+  };
 
-  feeLevels = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
-  250, 300, 350, 400, 500];
+  constructor() { }
 
-  constructor(
-  ) { }
-
-  ngOnChanges() {
-    this.mempoolVsizeFeesOptions = {
-      showArea: true,
-      showLine: true,
-      fullWidth: true,
-      showPoint: true,
-      low: 0,
-      axisY: {
-        showLabel: false,
-        offset: 0
-      },
-      axisX: {
-        showGrid: true,
-        showLabel: false,
-        offset: 0
-      },
-      plugins: [
-        Chartist.plugins.ctPointLabels({
-          textAnchor: 'middle',
-          labelInterpolationFnc: (value) => Math.round(value)
-        })
-      ]
-    };
-
-    const fees = this.feeRange;
-    const series = [];
-
-    for (let i = 0; i < this.feeLevels.length; i++) {
-      let total = 0;
-      // for (let j = 0; j < fees.length; j++) {
-      for (const fee of fees) {
-        if (i === this.feeLevels.length - 1) {
-          if (fee >= this.feeLevels[i]) {
-            total += 1;
-          }
-        } else  if (fee >= this.feeLevels[i] && fee < this.feeLevels[i + 1]) {
-          total += 1;
-        }
-      }
-      series.push(total);
-    }
-
-    this.mempoolVsizeFeesData = {
-      series: [fees],
-      labels: fees.map((d, i) => i)
-    };
+  ngOnInit() {
+    this.mountChart();
   }
 
+  ngOnChanges() {
+    this.mountChart();
+  }
+
+  mountChart() {
+    this.mempoolVsizeFeesOptions = {
+      grid: {
+        height: '210',
+        right: '20',
+        top: '22',
+        left: '30',
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        }
+      },
+      series: [{
+        data: this.data,
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top',
+          color: '#ffffff',
+          textShadowBlur: 0,
+          formatter: (label: any) => {
+            return Math.floor(label.data);
+          },
+        },
+        smooth: true,
+        lineStyle: {
+          color: '#D81B60',
+          width: 4,
+        },
+        itemStyle: {
+          color: '#b71c1c',
+          borderWidth: 10,
+          borderMiterLimit: 10,
+          opacity: 1,
+        },
+        areaStyle: {
+          color: '#D81B60',
+          opacity: 1,
+        }
+      }]
+    };
+  }
 }

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html

@@ -0,0 +1,4 @@
+<div class="echarts" echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"></div>
+<div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="spinner-border text-light"></div>
+</div>

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -0,0 +1,207 @@
+import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { formatDate } from '@angular/common';
+import { EChartsOption } from 'echarts';
+import { OnChanges } from '@angular/core';
+import { StorageService } from 'src/app/services/storage.service';
+
+@Component({
+  selector: 'app-incoming-transactions-graph',
+  templateUrl: './incoming-transactions-graph.component.html',
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 16px);
+      z-index: 100;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  @Input() theme: string;
+  @Input() height: number | string = '200';
+  @Input() right: number | string = '10';
+  @Input() top: number | string = '20';
+  @Input() left: number | string = '0';
+  @Input() template: ('widget' | 'advanced') = 'widget';
+
+  isLoading = true;
+  mempoolStatsChartOption: EChartsOption = {};
+  mempoolStatsChartInitOption = {
+    renderer: 'svg'
+  };
+  windowPreference: string;
+
+  constructor(
+    @Inject(LOCALE_ID) private locale: string,
+    private storageService: StorageService,
+  ) { }
+
+  ngOnInit() {
+    this.isLoading = true;
+  }
+
+  ngOnChanges(): void {
+    if (!this.data) {
+      return;
+    }
+    this.windowPreference = this.storageService.getValue('graphWindowPreference');
+    this.mountChart();
+  }
+
+  rendered() {
+    if (!this.data) {
+      return;
+    }
+    this.isLoading = false;
+  }
+
+  mountChart(): void {
+    this.mempoolStatsChartOption = {
+      grid: {
+        height: this.height,
+        right: this.right,
+        top: this.top,
+        left: this.left,
+      },
+      animation: false,
+      dataZoom: [{
+        type: 'inside',
+        realtime: true,
+        zoomOnMouseWheel: (this.template === 'advanced') ? true : false,
+        maxSpan: 100,
+        minSpan: 10,
+      }, {
+        show: (this.template === 'advanced') ? true : false,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          }
+        }
+      }],
+      tooltip: {
+        trigger: 'axis',
+        position: (pos, params, el, elRect, size) => {
+          const obj = { top: -20 };
+          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 80;
+          return obj;
+        },
+        extraCssText: `width: ${(['2h', '24h'].includes(this.windowPreference) || this.template === 'widget') ? '125px' : '135px'};
+                      background: transparent;
+                      border: none;
+                      box-shadow: none;`,
+        axisPointer: {
+          type: 'line',
+        },
+        formatter: (params: any) => {
+          const colorSpan = (color: string) => `<span class="indicator" style="background-color: ` + color + `"></span>`;
+          let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
+          params.map((item: any, index: number) => {
+            if (index < 26) {
+              itemFormatted += `<div class="item">
+                <div class="indicator-container">${colorSpan(item.color)}</div>
+                <div class="grow"></div>
+                <div class="value">${item.value} <span class="symbol">vB/s</span></div>
+              </div>`;
+            }
+          });
+          return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
+        }
+      },
+      xAxis: {
+        type: 'category',
+        axisLabel: {
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12
+        },
+        data: this.data.labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          fontSize: 11,
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        }
+      },
+      series: [
+        {
+          data: this.data.series[0],
+          type: 'line',
+          smooth: false,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+          },
+          markLine: {
+            silent: true,
+            symbol: 'none',
+            lineStyle: {
+              color: '#fff',
+              opacity: 1,
+              width: 2,
+            },
+            data: [{
+              yAxis: 1667,
+              label: {
+                show: false,
+                color: '#ffffff',
+              }
+            }],
+          }
+        },
+      ],
+      visualMap: {
+        show: false,
+        top: 50,
+        right: 10,
+        pieces: [{
+          gt: 0,
+          lte: 1667,
+          color: '#7CB342'
+        },
+        {
+          gt: 1667,
+          lte: 2000,
+          color: '#FDD835'
+        },
+        {
+          gt: 2000,
+          lte: 2500,
+          color: '#FFB300'
+        },
+        {
+          gt: 2500,
+          lte: 3000,
+          color: '#FB8C00'
+        },
+        {
+          gt: 3000,
+          lte: 3500,
+          color: '#F4511E'
+        },
+        {
+          gt: 3500,
+          color: '#D81B60'
+        }],
+        outOfRange: {
+          color: '#999'
+        }
+      },
+    };
+  }
+}

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

@@ -15,7 +15,7 @@
     <tbody>
       <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
         <td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-        <td class="d-none d-md-block">{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
+        <td class="d-none d-md-block">&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
         <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
         <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
         <td>

frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html

@@ -0,0 +1,4 @@
+<div class="echarts" echarts [initOpts]="pegsChartInitOption" [options]="pegsChartOptions" (chartRendered)="rendered()"></div>
+<div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="spinner-border text-light"></div>
+</div>

frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts

@@ -0,0 +1,159 @@
+import { Component, Inject, LOCALE_ID, ChangeDetectionStrategy, Input, OnChanges, OnInit } from '@angular/core';
+import { formatDate, formatNumber } from '@angular/common';
+import { EChartsOption } from 'echarts';
+
+@Component({
+  selector: 'app-lbtc-pegs-graph',
+  styles: [`
+  ::ng-deep .tx-wrapper-tooltip-chart { width: 135px; }
+  .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 16px);
+      z-index: 100;
+    }
+  `],
+  templateUrl: './lbtc-pegs-graph.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LbtcPegsGraphComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  pegsChartOptions: EChartsOption;
+
+  height: number | string = '200';
+  right: number | string = '10';
+  top: number | string = '20';
+  left: number | string = '50';
+  template: ('widget' | 'advanced') = 'widget';
+  isLoading = true;
+
+  pegsChartOption: EChartsOption = {};
+  pegsChartInitOption = {
+    renderer: 'svg'
+  };
+
+  constructor(
+    @Inject(LOCALE_ID) private locale: string,
+  ) { }
+
+  ngOnInit() {
+    this.isLoading = true;
+  }
+
+  ngOnChanges() {
+    if (!this.data) {
+      return;
+    }
+    this.pegsChartOptions = this.createChartOptions(this.data.series, this.data.labels);
+  }
+
+  rendered() {
+    if (!this.data) {
+      return;
+    }
+    this.isLoading = false;
+  }
+
+  createChartOptions(series: number[], labels: string[]): EChartsOption {
+    return {
+      grid: {
+        height: this.height,
+        right: this.right,
+        top: this.top,
+        left: this.left,
+      },
+      animation: false,
+      dataZoom: [{
+        type: 'inside',
+        realtime: true,
+        zoomOnMouseWheel: (this.template === 'advanced') ? true : false,
+        maxSpan: 100,
+        minSpan: 10,
+      }, {
+        show: (this.template === 'advanced') ? true : false,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          }
+        }
+      }],
+      tooltip: {
+        trigger: 'axis',
+        position: (pos, params, el, elRect, size) => {
+          const obj = { top: -20 };
+          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 80;
+          return obj;
+        },
+        extraCssText: `width: ${(this.template === 'widget') ? '125px' : '135px'};
+                      background: transparent;
+                      border: none;
+                      box-shadow: none;`,
+        axisPointer: {
+          type: 'line',
+        },
+        formatter: (params: any) => {
+          const colorSpan = (color: string) => `<span class="indicator" style="background-color: #116761;"></span>`;
+          let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
+          params.map((item: any, index: number) => {
+            if (index < 26) {
+              itemFormatted += `<div class="item">
+                <div class="indicator-container">${colorSpan(item.color)}</div>
+                <div class="grow"></div>
+                <div class="value">${formatNumber(item.value, this.locale, '1.2-2')} <span class="symbol">L-BTC</span></div>
+              </div>`;
+            }
+          });
+          return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
+        }
+      },
+      xAxis: {
+        type: 'category',
+        axisLabel: {
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12
+        },
+        boundaryGap: false,
+        data: labels.map((value: any) => `${formatDate(value, 'MMM\ny', this.locale)}`),
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          fontSize: 11,
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        }
+      },
+      series: [
+        {
+          data: series,
+          type: 'line',
+          stack: 'total',
+          smooth: false,
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.2,
+            color: '#116761',
+          },
+          lineStyle: {
+            width: 3,
+            color: '#116761',
+          },
+        },
+      ],
+    };
+  }
+}
+

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

@@ -72,6 +72,14 @@ li.nav-item {
   width: 60%;
 }
 
+.navbar {
+  .dropdown {
+    .dropdown-toggle {
+      width: 62px;
+    }
+  }
+}
+
 @media (min-width: 576px) {
   .navbar-brand {
     width: 140px;
@@ -132,4 +140,4 @@ nav {
 }
 .navbar-dark .navbar-nav .nav-link {
   color: #f1f1f1;
-}
+}

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

@@ -1,7 +1,7 @@
 <div class="container-xl" *ngIf="mempoolBlock$ | async as mempoolBlock">
 
   <div class="title-block">
-    <h1 class="float-left">{{ ordinal$ | async }}</h1>
+    <h1>{{ ordinal$ | async }}</h1>
     <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right">&#10005;</button>
   </div>
 
@@ -9,7 +9,7 @@
 
   <div class="box">
     <div class="row">
-      <div class="col-sm">
+      <div class="col-md">
         <table class="table table-borderless table-striped">
           <tbody>
             <tr>
@@ -40,8 +40,8 @@
           </tbody>
         </table>
       </div>
-      <div class="col-sm">
-        <app-fee-distribution-graph [feeRange]="mempoolBlock.feeRange"></app-fee-distribution-graph>
+      <div class="col-md chart-container">
+        <app-fee-distribution-graph [data]="mempoolBlock.feeRange" ></app-fee-distribution-graph>
       </div>
     </div>
   </div>

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

@@ -4,20 +4,10 @@
   top: 5px;
 }
 
-.title-block {
-  color: #FFF;
-  padding-top: 20px;
-  padding-bottom: 3px;
-  border-top: 3px solid #FFF;
-}
-
 .fiat {
   font-size: 13px;
-  display: block;
-  @media (min-width: 992px) {
-    display: inline-block;
-    margin-left: 10px;
-  }
+  display: inline-block;
+  margin-left: 10px;
 }
 
 .table {
@@ -34,8 +24,15 @@
 h1 {
   margin: 0px;
   padding: 0px;
+  line-height: 1;
   @media (min-width: 576px) {
     float: left;
-    margin-right: 10px;
   }
-}
+}
+
+.chart-container{
+  margin: 20px auto;
+  @media (min-width: 768px) {
+    margin: auto;
+  }
+}

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

@@ -1,8 +1,8 @@
 <ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
   <div class="mempool-blocks-container" *ngIf="(timeAvg$ | async) as timeAvg;">
-    <div class="flashing">      
+    <div class="flashing">
       <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
-        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
+        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
           <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
           <div class="block-body">
             <div class="fees">
@@ -11,7 +11,7 @@
             <div class="fee-span">
               {{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
             </div>
-            <div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">&lrm;</div>
+            <div class="block-size" [innerHTML]="'&lrm;' + (projectedBlock.blockSize | bytes: 2)"></div>
             <div class="transaction-count">
               <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
               <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>

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

@@ -18,7 +18,7 @@
 
 .flashing {
   animation: opacityPulse 2s ease-out;
-  animation-iteration-count: infinite; 
+  animation-iteration-count: infinite;
   opacity: 1;
 }
 
@@ -60,7 +60,7 @@
 }
 
 .bitcoin-block::after {
-  content: '';   
+  content: '';
   width: 125px;
   height: 24px;
   position:absolute;
@@ -68,7 +68,7 @@
   left: -20px;
   background-color: #232838;
   transform:skew(40deg);
-  transform-origin:top;    
+  transform-origin:top;
 }
 
 .bitcoin-block::before {
@@ -78,18 +78,18 @@
   position: absolute;
   top: -12px;
   left: -20px;
-  background-color: #191c27; 
-  
+  background-color: #191c27;
+
   transform: skewY(50deg);
-  transform-origin: top;     
+  transform-origin: top;
 }
 
 .mempool-block.bitcoin-block::after {
-  background-color: #403834; 
+  background-color: #403834;
 }
 
 .mempool-block.bitcoin-block::before {
-  background-color: #2d2825; 
+  background-color: #2d2825;
 }
 
 .black-background {
@@ -102,8 +102,8 @@
   position: relative;
   right: 75px;
   top: 140px;
-  width: 0; 
-  height: 0; 
+  width: 0;
+  height: 0;
   border-left: 35px solid transparent;
   border-right: 35px solid transparent;
   border-bottom: 35px solid #FFF;

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

@@ -3,8 +3,9 @@ import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer }
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
-import { take, map, switchMap, share } from 'rxjs/operators';
+import { take, map, switchMap } from 'rxjs/operators';
 import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
+import { specialBlocks } from 'src/app/app.constants';
 
 @Component({
   selector: 'app-mempool-blocks',
@@ -13,12 +14,13 @@ import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MempoolBlocksComponent implements OnInit, OnDestroy {
-
+  specialBlocks = specialBlocks;
   mempoolBlocks: MempoolBlock[] = [];
   mempoolEmptyBlocks: MempoolBlock[] = this.mountEmptyBlocks();
   mempoolBlocks$: Observable<MempoolBlock[]>;
   timeAvg$: Observable<number>;
   loadingBlocks$: Observable<boolean>;
+  blocksSubscription: Subscription;
 
   mempoolBlocksFull: MempoolBlock[] = [];
   mempoolBlockStyles = [];
@@ -74,26 +76,36 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
       fromEvent(window, 'resize')
     )
     .pipe(
-      switchMap(() => this.stateService.mempoolBlocks$),
-      map((blocks) => {
-        if (!blocks.length) {
-          return [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }];
-        }
-        return blocks;
-      }),
-      map((blocks) => {
-        blocks.forEach((block, i) => {
-          block.index = this.blockIndex + i;
-        });
-        const stringifiedBlocks = JSON.stringify(blocks);
-        this.mempoolBlocksFull = JSON.parse(stringifiedBlocks);
-        this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks));
-        this.updateMempoolBlockStyles();
-        this.calculateTransactionPosition();
-        return this.mempoolBlocks;
-      })
-    );
+      switchMap(() => combineLatest([
+        this.stateService.blocks$.pipe(map(([block]) => block)),
+        this.stateService.mempoolBlocks$
+          .pipe(
+            map((mempoolBlocks) => {
+              if (!mempoolBlocks.length) {
+                return [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }];
+              }
+              return mempoolBlocks;
+            }),
+          )
+      ])),
+        map(([lastBlock, mempoolBlocks]) => {
+          mempoolBlocks.forEach((block, i) => {
+            block.index = this.blockIndex + i;
+            block.height = lastBlock.height + i + 1;
+            if (this.stateService.network === '') {
+              block.blink = specialBlocks[block.height] ? true : false;
+            }
+          });
 
+          const stringifiedBlocks = JSON.stringify(mempoolBlocks);
+          this.mempoolBlocksFull = JSON.parse(stringifiedBlocks);
+          this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks));
+
+          this.updateMempoolBlockStyles();
+          this.calculateTransactionPosition();
+          return this.mempoolBlocks;
+        })
+      );
 
     this.timeAvg$ = timer(0, 1000)
       .pipe(
@@ -118,7 +130,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
           } else {
             timeAvgMins += Math.abs(timeAvgDiff);
           }
-          
+
           return timeAvgMins * 60 * 1000;
         })
       );
@@ -184,7 +196,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   }
 
   reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
-    const blocksAmount = Math.max(2, Math.floor(window.innerWidth / 2 / (this.blockWidth + this.blockPadding)));
+    const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
+    const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
     while (blocks.length > blocksAmount) {
       const block = blocks.pop();
       const lastBlock = blocks[blocks.length - 1];

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

@@ -1,6 +1,4 @@
-<app-chartist
-  *ngIf="mempoolVsizeFeesData"
-  [data]="mempoolVsizeFeesData"
-  [type]="'Line'"
-  [options]="mempoolVsizeFeesOptions">
-</app-chartist>
+<div echarts class="echarts" (chartInit)="onChartReady($event)" (chartRendered)="rendered()" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
+<div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="spinner-border text-light"></div>
+</div>

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

@@ -1,145 +1,375 @@
 import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
 import { formatDate } from '@angular/common';
 import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
-import * as Chartist from '@mempool/chartist';
+import { formatNumber } from "@angular/common";
+
 import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
 import { StorageService } from 'src/app/services/storage.service';
+import { EChartsOption } from 'echarts';
+import { feeLevels, chartColors } from 'src/app/app.constants';
 
 @Component({
   selector: 'app-mempool-graph',
   templateUrl: './mempool-graph.component.html',
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 16px);
+      z-index: 100;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MempoolGraphComponent implements OnInit, OnChanges {
-  @Input() data;
-  @Input() dateSpan = '2h';
-  @Input() showLegend = true;
-  @Input() offsetX = 40;
-  @Input() small = false;
+  @Input() data: any[];
+  @Input() limitFee = 350;
+  @Input() limitFilterFee = 1;
+  @Input() height: number | string = 200;
+  @Input() top: number | string = 20;
+  @Input() right: number | string = 10;
+  @Input() left: number | string = 75;
+  @Input() template: ('widget' | 'advanced') = 'widget';
+  @Input() showZoom = true;
 
-  mempoolVsizeFeesOptions: any;
+  isLoading = true;
   mempoolVsizeFeesData: any;
-
-  isMobile = window.innerWidth <= 767.98;
+  mempoolVsizeFeesOptions: EChartsOption;
+  mempoolVsizeFeesInitOptions = {
+    renderer: 'svg',
+  };
+  windowPreference: string;
+  hoverIndexSerie = 0;
+  feeLimitIndex: number;
+  feeLevelsOrdered = [];
+  chartColorsOrdered = chartColors;
   inverted: boolean;
 
   constructor(
     private vbytesPipe: VbytesPipe,
     private stateService: StateService,
-    @Inject(LOCALE_ID) private locale: string,
     private storageService: StorageService,
+    @Inject(LOCALE_ID) private locale: string,
   ) { }
 
   ngOnInit(): void {
-    let labelHops = !this.showLegend ? 48 : 24;
-    if (this.small) {
-      labelHops = labelHops / 2;
-    }
-
-    if (this.isMobile) {
-      labelHops = 96;
-    }
-
-    const labelInterpolationFnc = (value: any, index: any) => {
-      switch (this.dateSpan) {
-        case '2h':
-        case '24h':
-          value = formatDate(value, 'HH:mm', this.locale);
-          break;
-        case '1w':
-          value = formatDate(value, 'dd/MM HH:mm', this.locale);
-          break;
-        case '1m':
-        case '3m':
-        case '6m':
-        case '1y':
-          value = formatDate(value, 'dd/MM', this.locale);
-      }
-      return index % labelHops === 0 ? value : null;
-    };
-
-    this.mempoolVsizeFeesOptions = {
-      showArea: true,
-      showLine: false,
-      fullWidth: true,
-      showPoint: false,
-      stackedLine: !this.inverted,
-      low: 0,
-      axisX: {
-        labelInterpolationFnc: labelInterpolationFnc,
-        offset: this.offsetX,
-      },
-      axisY: {
-        labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true),
-        offset: this.showLegend ? 160 : 60,
-      },
-      plugins: this.inverted ? [Chartist.plugins.ctTargetLine({ value: this.stateService.blockVSize })] : []
-    };
-
-    if (this.showLegend) {
-      const legendNames: string[] = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
-            250, 300, 350, 400].map((sat, i, arr) => {
-              if (sat === 400) {
-                return '350+';
-              }
-              if (i === 0) {
-                return '0 - 1';
-              }
-              return arr[i - 1] + ' - ' + sat;
-            });
-      // Only Liquid has lower than 1 sat/vb transactions
-      if (this.stateService.network !== 'liquid') {
-        legendNames.shift();
-      }
-      this.mempoolVsizeFeesOptions.plugins.push(
-        Chartist.plugins.legend({ legendNames: legendNames })
-      );
-    }
+    this.isLoading = true;
+    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
   }
 
   ngOnChanges() {
-    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
+    if (!this.data) {
+      return;
+    }
+    this.windowPreference = this.storageService.getValue('graphWindowPreference');
     this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
+    this.mountFeeChart();
+  }
+
+  rendered() {
+    if (!this.data) {
+      return;
+    }
+    this.isLoading = false;
+  }
+
+  onChartReady(myChart: any) {
+    myChart.getZr().on('mousemove', (e: any) => {
+      if (e.target !== undefined &&
+        e.target.parent !== undefined &&
+        e.target.parent.parent !== null &&
+        e.target.parent.parent.__ecComponentInfo !== undefined) {
+          this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index;
+      }
+    });
   }
 
   handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
     mempoolStats.reverse();
     const labels = mempoolStats.map(stats => stats.added);
-
-    const finalArrayVbyte = this.generateArray(mempoolStats);
-
-    // Only Liquid has lower than 1 sat/vb transactions
-    if (this.stateService.network !== 'liquid') {
-      finalArrayVbyte.shift();
-    }
+    const finalArrayVByte = this.generateArray(mempoolStats);
 
     return {
       labels: labels,
-      series: finalArrayVbyte
+      series: finalArrayVByte
     };
   }
 
   generateArray(mempoolStats: OptimizedMempoolStats[]) {
     const finalArray: number[][] = [];
     let feesArray: number[] = [];
-
-    for (let index = 37; index > -1; index--) {
+    let limitFeesTemplate = this.template === 'advanced' ? 26 : 20;
+    for (let index = limitFeesTemplate; index > -1; index--) {
       feesArray = [];
       mempoolStats.forEach((stats) => {
-        const theFee = stats.vsizes[index].toString();
-        if (theFee) {
-          feesArray.push(parseInt(theFee, 10));
-        } else {
-          feesArray.push(0);
-        }
+        feesArray.push(stats.vsizes[index] ? stats.vsizes[index] : 0);
       });
-      if (this.inverted && finalArray.length) {
-        feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
-      }
       finalArray.push(feesArray);
     }
     finalArray.reverse();
     return finalArray;
   }
+
+  mountFeeChart() {
+    this.orderLevels();
+    const { labels, series } = this.mempoolVsizeFeesData;
+
+    const seriesGraph = [];
+    const newColors = [];
+    for (let index = 0; index < series.length; index++) {
+      const value = series[index];
+      if (index >= this.feeLimitIndex) {
+        newColors.push(this.chartColorsOrdered[index]);
+        seriesGraph.push({
+          name: this.feeLevelsOrdered[index],
+          type: 'line',
+          stack: 'fees',
+          smooth: false,
+          markPoint: {
+            symbol: 'rect',
+          },
+          lineStyle: {
+            width: 0,
+            opacity: 0,
+          },
+          symbol: 'none',
+          emphasis: {
+            focus: 'none',
+            areaStyle: {
+              opacity: 0.85,
+            },
+          },
+          markLine: {
+            silent: true,
+            symbol: 'none',
+            lineStyle: {
+              color: '#fff',
+              opacity: 1,
+              width: this.inverted ? 2 : 0,
+            },
+            data: [{
+              yAxis: '1000000',
+              label: {
+                show: false,
+                color: '#ffffff',
+              }
+            }],
+          },
+          areaStyle: {
+            color: this.chartColorsOrdered[index],
+            opacity: 1,
+          },
+          data: value
+        });
+      }
+    }
+
+    this.mempoolVsizeFeesOptions = {
+      series: this.inverted ? [...seriesGraph].reverse() : seriesGraph,
+      hover: true,
+      color: this.inverted ? [...newColors].reverse() : newColors,
+      tooltip: {
+        show: (window.innerWidth >= 768) ? true : false,
+        trigger: 'axis',
+        alwaysShowContent: false,
+        position: (pos, params, el, elRect, size) => {
+          const positions = { top: (this.template === 'advanced') ? 0 : -30 };
+          positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60;
+          return positions;
+        },
+        extraCssText: `width: ${(this.template === 'advanced') ? '275px' : '200px'};
+                      background: transparent;
+                      border: none;
+                      box-shadow: none;`,
+        axisPointer: {
+          type: 'line',
+        },
+        formatter: (params: any) => {
+          const { totalValue, totalValueArray } = this.getTotalValues(params);
+          const itemFormatted = [];
+          let totalParcial = 0;
+          let progressPercentageText = '';
+          const items = this.inverted ? [...params].reverse() : params;
+          items.map((item: any, index: number) => {
+            totalParcial += item.value;
+            const progressPercentage = (item.value / totalValue) * 100;
+            const progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
+            let activeItemClass = '';
+            let hoverActive = 0;
+            if (this.inverted) {
+              hoverActive = Math.abs(this.feeLevelsOrdered.length - item.seriesIndex - this.feeLevelsOrdered.length);
+            } else {
+              hoverActive = item.seriesIndex;
+            }
+            if (this.hoverIndexSerie === hoverActive) {
+              progressPercentageText = `<div class="total-parcial-active">
+                <span class="progress-percentage">
+                  ${formatNumber(progressPercentage, this.locale, '1.2-2')}
+                  <span class="symbol">%</span>
+                </span>
+                <span class="total-parcial-vbytes">
+                  ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}
+                </span>
+                <div class="total-percentage-bar">
+                  <span class="total-percentage-bar-background">
+                    <span style="
+                      width: ${progressPercentage}%;
+                      background: ${item.color}
+                    "></span>
+                  </span>
+                </div>
+              </div>`;
+              activeItemClass = 'active';
+            }
+            itemFormatted.push(`<tr class="item ${activeItemClass}">
+              <td class="indicator-container">
+                <span class="indicator" style="
+                  background-color: ${item.color}
+                "></span>
+                <span>
+                  ${item.seriesName}
+                </span>
+              </td>
+              <td class="total-progress-sum">
+                <span>
+                  ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
+                </span>
+              </td>
+              <td class="total-progress-sum">
+                <span>
+                  ${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)}
+                </span>
+              </td>
+              <td class="total-progress-sum-bar">
+                <span class="total-percentage-bar-background">
+                  <span style="
+                    width: ${progressPercentageSum.toFixed(2)}%;
+                    background-color: ${this.chartColorsOrdered[3]}
+                  "></span>
+                </span>
+              </td>
+            </tr>`);
+          });
+          const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
+          const titleRange = $localize`Range`;
+          const titleSize = $localize`:@@7faaaa08f56427999f3be41df1093ce4089bbd75:Size`;
+          const titleSum = $localize`Sum`;
+          return `<div class="fees-wrapper-tooltip-chart ${classActive}">
+            <div class="title">
+              ${params[0].axisValue}
+              <span class="total-value">
+                ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
+              </span>
+            </div>
+            <table>
+              <thead>
+                <tr>
+                  <th>${titleRange}</th>
+                  <th>${titleSize}</th>
+                  <th>${titleSum}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                ${this.inverted ? itemFormatted.join('') : itemFormatted.reverse().join('')}
+              </tbody>
+            </table>
+            <span class="total-value">
+              ${progressPercentageText}
+            </span>
+          </div>`;
+        }
+      },
+      dataZoom: [{
+        type: 'inside',
+        realtime: true,
+        zoomOnMouseWheel: (this.template === 'advanced') ? true : false,
+        maxSpan: 100,
+        minSpan: 10,
+      }, {
+        show: (this.template === 'advanced' && this.showZoom) ? true : false,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        bottom: 0,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          }
+        }
+      }],
+      animation: false,
+      grid: {
+        height: this.height,
+        right: this.right,
+        top: this.top,
+        left: this.left,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: { onZero: true },
+          axisLabel: {
+            align: 'center',
+            fontSize: 11,
+            lineHeight: 12,
+          },
+          data: labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
+        }
+      ],
+      yAxis: {
+        type: 'value',
+        axisLine: { onZero: false },
+        axisLabel: {
+          fontSize: 11,
+          formatter: (value: number) => (`${this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true)}`),
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        }
+      },
+    };
+  }
+
+  getTotalValues = (values: any) => {
+    let totalValueTemp = 0;
+    const totalValueArray = [];
+    const valuesInverted = this.inverted ? values : [...values].reverse();
+    for (const item of valuesInverted) {
+      totalValueTemp += item.value;
+      totalValueArray.push(totalValueTemp);
+    }
+    return {
+      totalValue: totalValueTemp,
+      totalValueArray: totalValueArray.reverse(),
+    };
+  }
+
+  orderLevels() {
+    this.feeLevelsOrdered = [];
+    for (let i = 0; i < feeLevels.length; i++) {
+      if (feeLevels[i] === this.limitFilterFee) {
+        this.feeLimitIndex = i;
+      }
+      if (feeLevels[i] <= this.limitFee) {
+        if (this.stateService.network === 'liquid') {
+          this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)} - ${(feeLevels[i + 1]  / 10).toFixed(1)}`);
+        } else {
+          this.feeLevelsOrdered.push(`${feeLevels[i]} - ${feeLevels[i + 1]}`);
+        }
+      }
+    }
+    this.chartColorsOrdered =  chartColors.slice(0, this.feeLevelsOrdered.length);
+  }
 }
+

frontend/src/app/components/privacy-policy/privacy-policy.component.html

@@ -5,40 +5,53 @@
     <br><br>
 
     <h2>Privacy Policy</h2>
-    <h6>Updated: August 2, 2021</h6>
+    <h6>Updated: November 18, 2021</h6>
 
     <br><br>
 
     <div class="text-left">
 
+      <p *ngIf="officialMempoolSpace">The <a href="https://mempool.space/">mempool.space</a> website, the <a href="https://liquid.network/">liquid.network</a> website, the <a href="https://bisq.markets/">bisq.markets</a> website, their associated API services, and related network and server infrastructure (collectively, the "Website") are operated by Mempool Space K.K. in Japan ("Mempool", "We", or "Us") and self-hosted from <a href="https://wq.apnic.net/static/search.html?query=AS142052">AS142052</a>.</p>
+
+      <p *ngIf="!officialMempoolSpace">This website and its API service (collectively, the "Website") are operated by a member of the Bitcoin community ("We" or "Us"). Mempool Space K.K. in Japan ("Mempool") has no affiliation with the operator of this Website, and does not sponsor or endorse the information provided herein.</p>
+
+      <h5>By accessing this Website, you agree to the following Privacy Policy:</h5>
+
+      <br>
+
       <h4>TRUSTED THIRD PARTIES ARE SECURITY HOLES</h4>
 
-      <ul>
-        <li>We do not use any third-party analytics, trackers, or cookies.</li>
-        <li>We do not share any private user data with third-parties.</li>
-      </ul>
+      <p>Out of respect for the Bitcoin community, this website does not use any third-party analytics, third-party trackers, or third-party cookies, and we do not share any private user data with third-parties. Additionally, to mitigate the risk of surveillance by malicious third-parties, we self-host this website on our own hardware and network infrastructure, so there are no "hosting companies" or "cloud providers" involved with the operation of this website.</p>
+
+      <br>
 
       <h4>TRUSTED FIRST PARTIES ARE ALSO SECURITY HOLES</h4>
 
-      <ul>
-        <li>Your IP address may be collected in our webserver logs used for sysadmin purposes.</li>
-        <li>Your IP address may be collected in our self-hosted statistics matomo app.</li>
-      </ul>
-
-      <h4>DON'T TRUST US, PROTECT YOUR PRIVACY</h4>
+      <p>Out of respect for the Bitcoin community, this website does not use any first-party cookies, except to store your preferred language setting (if any). However, we do use minimal first-party analytics and logging as needed for the operation of this website, as follows:</p>
 
       <ul>
-        <li>Use a Tor Browser or a privacy VPN service to hide your IP address from us.</li>
-        <li>Use a self-hosted instance of The Mempool Open Source Project&trade; on your own hardware.</li>
+
+        <li>We use basic webserver logging (nginx) for sysadmin purposes, which collects your IP address along with the requests you make. These logs are deleted after 10 days, and we do not share this data with any third-party. To conceal your IP address from our webserver logs, we recommend that you use Tor Browser with our Tor v3 hidden service onion hostname.</li>
+
+        <br>
+
+        <li>We use a self-hosted statistics application (matomo) for analytics purposes, which collects your IP address along with the requests you make. Our matomo instance is configured to respect your privacy by redacting your IP address and other methods, and we do not share this data with any third-party. To conceal your activity from our analytics, we recommend that you use a privacy protecting browser extension that blocks matomo from being loaded.</li>
+
       </ul>
 
-      <h4>IF YOU DONATE TO MEMPOOL.SPACE</h4>
+      <br>
 
-      <ul>
-        <li>Your payment information, together with your Twitter identity (if provided) will be collected.</li>
-        <li>We display sponsor profiles publicly on <a href="https://mempool.space/about">mempool.space/about</a>.</li>
-        <li>Thank you :)</li>
-      </ul>
+      <h4>TRUST YOUR OWN SELF-HOSTED MEMPOOL EXPLORER</h4>
+
+      <p>For maximum privacy, we recommend that you use your own self-hosted instance of The Mempool Open Source Project&trade; on your own hardware. You can easily install your own self-hosted instance of this website on a Raspberry Pi using a one-click installation method maintained by various Bitcoin fullnode distributions such as Umbrel, RaspiBlitz, MyNode, and RoninDojo. See our project's GitHub page for more details about self-hosting this website.</p>
+
+      <br>
+
+      <h4>DONATING TO MEMPOOL.SPACE</h4>
+
+      <p>If you donate to mempool.space, your payment information and your Twitter identity (if provided) will be collected in a database, which may be used to publicly display the sponsor profiles on <a href="https://mempool.space/about">mempool.space/about</a>. Thank you for supporting The Mempool Open Source Project.</p>
+
+      <br>
 
       <p>EOF</p>
 

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

@@ -0,0 +1,12 @@
+<div class="container-xl">
+  <h1 i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</h1>
+
+  <form [formGroup]="pushTxForm" (submit)="pushTxForm.valid && postTx()" novalidate>
+    <div class="mb-3">
+      <textarea formControlName="txHash" class="form-control" rows="5" i18n-placeholder="transaction.hex" placeholder="Transaction Hex"></textarea>
+    </div>
+    <button [disabled]="isLoading" type="submit" class="btn btn-primary mr-2" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</button>
+    <p class="red-color d-inline">{{ error }}</p> <a *ngIf="txId" [routerLink]="['/tx/' | relativeUrl, txId]">{{ txId }}</a>
+  </form>
+
+</div>

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

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ApiService } from 'src/app/services/api.service';
+
+@Component({
+  selector: 'app-push-transaction',
+  templateUrl: './push-transaction.component.html',
+  styleUrls: ['./push-transaction.component.scss']
+})
+export class PushTransactionComponent implements OnInit {
+  pushTxForm: FormGroup;
+  error: string = '';
+  txId: string = '';
+  isLoading = false;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private apiService: ApiService,
+  ) { }
+
+  ngOnInit(): void {
+    this.pushTxForm = this.formBuilder.group({
+      txHash: ['', Validators.required],
+    });
+  }
+
+  postTx() {
+    this.isLoading = true;
+    this.error = '';
+    this.txId = '';
+    this.apiService.postTransaction$(this.pushTxForm.get('txHash').value)
+      .subscribe((result) => {
+        this.isLoading = false;
+        this.txId = result;
+        this.pushTxForm.reset();
+      },
+      (error) => {
+        if (typeof error.error === 'string') {
+          const matchText = error.error.match('"message":"(.*?)"');
+          this.error = matchText && matchText[1] || error.error;
+        } else if (error.message) {
+          this.error = error.message;
+        }
+        this.isLoading = false;
+      });
+  }
+
+}

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

@@ -10,14 +10,14 @@ form {
   @media (min-width: 576px) {
     margin-top: 0px;
     margin-left: 8px;
-  }  
+  }
   @media (min-width: 992px) {
     width: 100%;
   }
 }
 
 .btn-block {
-  width: 58.55px;
+  width: 62px;
 }
 
 .search-box-container {
@@ -37,4 +37,4 @@ form {
   .btn {
     width: 100px;
   }
-}
+}

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

@@ -25,7 +25,7 @@ export class SearchFormComponent implements OnInit {
 
   regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100})$/;
   regexBlockhash = /^[0]{8}[a-fA-F0-9]{56}$/;
-  regexTransaction = /^[a-fA-F0-9]{64}$/;
+  regexTransaction = /^([a-fA-F0-9]{64}):?(\d+)?$/;
   regexBlockheight = /^[0-9]+$/;
 
   @ViewChild('instance', {static: true}) instance: NgbTypeahead;
@@ -100,17 +100,23 @@ export class SearchFormComponent implements OnInit {
       } else if (this.regexBlockhash.test(searchText) || this.regexBlockheight.test(searchText)) {
         this.navigate('/block/', searchText);
       } else if (this.regexTransaction.test(searchText)) {
+        const matches = this.regexTransaction.exec(searchText);
         if (this.network === 'liquid') {
-          if (this.assets[searchText]) {
-            this.navigate('/asset/', searchText);
+          if (this.assets[matches[1]]) {
+            this.navigate('/asset/', matches[1]);
           }
-          this.electrsApiService.getAsset$(searchText)
+          this.electrsApiService.getAsset$(matches[1])
             .subscribe(
-              () => { this.navigate('/asset/', searchText); },
-              () => { this.navigate('/tx/', searchText); }
+              () => { this.navigate('/asset/', matches[1]); },
+              () => {
+                this.electrsApiService.getBlock$(matches[1])
+                  .subscribe(
+                    (block) => { this.navigate('/block/', matches[1], { state: { data: { block } } }); },
+                    () => { this.navigate('/tx/', matches[0]); });
+              }
             );
         } else {
-          this.navigate('/tx/', searchText);
+          this.navigate('/tx/', matches[0]);
         }
       } else {
         this.isSearching = false;
@@ -118,8 +124,8 @@ export class SearchFormComponent implements OnInit {
     }
   }
 
-  navigate(url: string, searchText: string) {
-    this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + url, searchText]);
+  navigate(url: string, searchText: string, extras?: any) {
+    this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + url, searchText], extras);
     this.searchTriggered.emit();
     this.searchForm.setValue({
       searchText: '',

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

@@ -1,3 +1,13 @@
+<ng-container *ngIf="specialEvent">
+  <div class="pyro">
+    <div class="before"></div>
+    <div class="after"></div>
+  </div>
+  <div class="warning-label">{{ eventName }}</div>
+</ng-container>
+
+<div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
+
 <div id="blockchain-container" dir="ltr">
   <app-blockchain></app-blockchain>
 </div>

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

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 #blockchain-container {
   position: relative;
   overflow-x: scroll;
@@ -7,5 +9,141 @@
 }
 
 #blockchain-container::-webkit-scrollbar {
-    display: none;
+  display: none;
+}
+
+.warning-label {
+  position: relative;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+  padding: 6px 4px;
+  margin-top: -10px;
+}
+// Fireworks
+
+$particles: 50;
+$width: 500;
+$height: 500;
+
+// Create the explosion...
+$box-shadow: ();
+$box-shadow2: ();
+@for $i from 0 through $particles {
+  $box-shadow: $box-shadow,
+               random($width) - math.div($width, 1.2) + px
+               random($height) - math.div($height, 1.2) + px
+               hsl(random(360), 100%, 50%);
+  $box-shadow2: $box-shadow2, 0 0 #fff
+}
+@mixin keyframes ($animationName) {
+    @-webkit-keyframes #{$animationName} {
+        @content;
+    }
+
+    @-moz-keyframes #{$animationName} {
+        @content;
+    }
+
+    @-o-keyframes #{$animationName} {
+        @content;
+    }
+
+    @-ms-keyframes #{$animationName} {
+        @content;
+    }
+
+    @keyframes #{$animationName} {
+        @content;
+    }
+}
+
+@mixin animation-delay ($settings) {
+    -moz-animation-delay: $settings;
+    -webkit-animation-delay: $settings;
+    -o-animation-delay: $settings;
+    -ms-animation-delay: $settings;
+    animation-delay: $settings;
+}
+
+@mixin animation-duration ($settings) {
+    -moz-animation-duration: $settings;
+    -webkit-animation-duration: $settings;
+    -o-animation-duration: $settings;
+    -ms-animation-duration: $settings;
+    animation-duration: $settings;
+}
+
+@mixin animation ($settings) {
+    -moz-animation: $settings;
+    -webkit-animation: $settings;
+    -o-animation: $settings;
+    -ms-animation: $settings;
+    animation: $settings;
+}
+
+@mixin transform ($settings) {
+    transform: $settings;
+    -moz-transform: $settings;
+    -webkit-transform: $settings;
+    -o-transform: $settings;
+    -ms-transform: $settings;
+}
+
+body {
+  margin:0;
+  padding:0;
+  background: #000;
+  overflow: hidden;
+}
+
+.pyro > .before, .pyro > .after {
+  z-index: 100;
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  box-shadow: $box-shadow2;
+  @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
+}
+
+.pyro > .after {
+  @include animation-delay((1.25s, 1.25s, 1.25s));
+  @include animation-duration((1.25s, 1.25s, 6.25s));
+}
+
+@include keyframes(bang) {
+  to {
+    box-shadow:$box-shadow;
+  }
+}
+
+@include keyframes(gravity)  {
+  to {
+    @include transform(translateY(200px));
+    opacity: 0;
+  }
+}
+
+@include keyframes(position) {
+  0%, 19.9% {
+    margin-top: 10%;
+    margin-left: 40%;
+  }
+  20%, 39.9% {
+    margin-top: 40%;
+    margin-left: 30%;
+  }
+  40%, 59.9% {
+    margin-top: 20%;
+    margin-left: 70%
+  }
+  60%, 79.9% {
+    margin-top: 30%;
+    margin-left: 20%;
+  }
+  80%, 99.9% {
+    margin-top: 30%;
+    margin-left: 80%;
+  }
 }

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

@@ -1,10 +1,53 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { StateService } from 'src/app/services/state.service';
+import { specialBlocks } from 'src/app/app.constants';
+import { takeLast } from 'rxjs/operators';
 
 @Component({
   selector: 'app-start',
   templateUrl: './start.component.html',
   styleUrls: ['./start.component.scss'],
 })
-export class StartComponent {
-  constructor() { }
+export class StartComponent implements OnInit {
+  interval = 60;
+  colors = ['#5E35B1', '#ffffff'];
+
+  countdown = 0;
+  specialEvent = false;
+  eventName = '';
+
+  constructor(
+    private websocketService: WebsocketService,
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
+    this.stateService.blocks$
+      .subscribe((blocks: any) => {
+        if (this.stateService.network !== '') {
+          return;
+        }
+        this.countdown = 0;
+        const block = blocks[0];
+
+        for (const sb in specialBlocks) {
+          const height = parseInt(sb, 10);
+          const diff = height - block.height;
+          if (diff > 0 && diff <= 1008) {
+            this.countdown = diff;
+            this.eventName = specialBlocks[sb].labelEvent;
+          }
+        }
+        if (specialBlocks[block.height]) {
+          this.specialEvent = true;
+          this.eventName = specialBlocks[block.height].labelEventCompleted;
+          setTimeout(() => {
+            this.specialEvent = false;
+          }, 60 * 60 * 1000);
+        }
+      });
+  }
+
 }

frontend/src/app/components/statistics/chartist.component.scss

@@ -1,11 +0,0 @@
-.ct-legend {
-    top: 130px;
-    display: flex;
-    flex-direction: column-reverse;
-    @media (min-width: 653px) {
-        top: 90px;
-    }
-  }
-  .ct-legend.inverted {
-    flex-direction: column !important;
-  }

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

@@ -1,740 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  Inject,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  PLATFORM_ID,
-  SimpleChanges,
-  ViewEncapsulation
-} from '@angular/core';
-
-import { isPlatformBrowser } from '@angular/common';
-
-import * as Chartist from '@mempool/chartist';
-
-/**
- * Possible chart types
- * @type {String}
- */
-export type ChartType = 'Pie' | 'Bar' | 'Line';
-
-export type ChartInterfaces =
-  | Chartist.IChartistPieChart
-  | Chartist.IChartistBarChart
-  | Chartist.IChartistLineChart;
-export type ChartOptions =
-  | Chartist.IBarChartOptions
-  | Chartist.ILineChartOptions
-  | Chartist.IPieChartOptions;
-export type ResponsiveOptionTuple = Chartist.IResponsiveOptionTuple<
-  ChartOptions
->;
-export type ResponsiveOptions = ResponsiveOptionTuple[];
-
-/**
- * Represent a chart event.
- * For possible values, check the Chartist docs.
- */
-export interface ChartEvent {
-  [eventName: string]: (data: any) => void;
-}
-
-@Component({
-  selector: 'app-chartist',
-  template: '<ng-content></ng-content>',
-  styleUrls: ['./chartist.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
-  @Input()
-  // @ts-ignore
-  public data: Promise<Chartist.IChartistData> | Chartist.IChartistData;
-
-  // @ts-ignore
-  @Input() public type: Promise<ChartType> | ChartType;
-
-  @Input()
-  // @ts-ignore
-  public options: Promise<Chartist.IChartOptions> | Chartist.IChartOptions;
-
-  @Input()
-  // @ts-ignore
-  public responsiveOptions: Promise<ResponsiveOptions> | ResponsiveOptions;
-
-  // @ts-ignore
-  @Input() public events: ChartEvent;
-
-  isBrowser: boolean = isPlatformBrowser(this.platformId);
-
-  // @ts-ignore
-  public chart: ChartInterfaces;
-
-  private element: HTMLElement;  
-
-  constructor(
-    element: ElementRef,
-    @Inject(PLATFORM_ID) private platformId: any,
-  ) {
-    this.element = element.nativeElement;
-  }
-
-  public ngOnInit(): Promise<ChartInterfaces> {
-    if (!this.isBrowser) {
-      return;
-    }
-
-    if (!this.type || !this.data) {
-      Promise.reject('Expected at least type and data.');
-    }
-
-    return this.renderChart().then((chart) => {
-      if (this.events !== undefined) {
-        this.bindEvents(chart);
-      }
-
-      return chart;
-    });
-  }
-
-  public ngOnChanges(changes: SimpleChanges): void {
-    if (!this.isBrowser) {
-      return;
-    }
-
-    this.update(changes);
-  }
-
-  public ngOnDestroy(): void {
-    if (this.chart) {
-      this.chart.detach();
-    }
-  }
-
-  public renderChart(): Promise<ChartInterfaces> {
-    const promises: any[] = [
-      this.type,
-      this.element,
-      this.data,
-      this.options,
-      this.responsiveOptions
-    ];
-
-    return Promise.all(promises).then((values) => {
-      const [type, ...args]: any = values;
-
-      if (!(type in Chartist)) {
-        throw new Error(`${type} is not a valid chart type`);
-      }
-
-      this.chart = (Chartist as any)[type](...args);
-
-      return this.chart;
-    });
-  }
-
-  public update(changes: SimpleChanges): void {
-    if (!this.chart || 'type' in changes) {
-      this.renderChart();
-    } else {
-      if (changes.data) {
-        this.data = changes.data.currentValue;
-      }
-
-      if (changes.options) {
-        this.options = changes.options.currentValue;
-      }
-
-      (this.chart as any).update(this.data, this.options);
-    }
-  }
-
-  public bindEvents(chart: any): void {
-    for (const event of Object.keys(this.events)) {
-      chart.on(event, this.events[event]);
-    }
-  }
-}
-
-/**
- * Chartist.js plugin to display a "target" or "goal" line across the chart.
- * Only tested with bar charts. Works for horizontal and vertical bars.
- */
-(function(window, document, Chartist) {
-  'use strict';
-
-  const defaultOptions = {
-    // The class name so you can style the text
-    className: 'ct-target-line',
-    // The axis to draw the line. y == vertical bars, x == horizontal
-    axis: 'y',
-    // What value the target line should be drawn at
-    value: null
-  };
-
-  Chartist.plugins = Chartist.plugins || {};
-
-  Chartist.plugins.ctTargetLine = function (options: any) {
-    options = Chartist.extend({}, defaultOptions, options);
-    return function ctTargetLine (chart: any) {
-
-      chart.on('created', function(context: any) {
-        const projectTarget = {
-          y: function (chartRect: any, bounds: any, value: any) {
-            const targetLineY = chartRect.y1 - (chartRect.height() / bounds.max * value);
-
-            return {
-              x1: chartRect.x1,
-              x2: chartRect.x2,
-              y1: targetLineY,
-              y2: targetLineY
-            };
-          },
-          x: function (chartRect: any, bounds: any, value: any) {
-            const targetLineX = chartRect.x1 + (chartRect.width() / bounds.max * value);
-
-            return {
-              x1: targetLineX,
-              x2: targetLineX,
-              y1: chartRect.y1,
-              y2: chartRect.y2
-            };
-          }
-        };
-        // @ts-ignore
-        const targetLine = projectTarget[options.axis](context.chartRect, context.bounds, options.value);
-
-        context.svg.elem('line', targetLine, options.className);
-      });
-    };
-  };
-
-}(null, null, Chartist));
-
-
-/**
- * Chartist.js plugin to display a data label on top of the points in a line chart.
- *
- */
-/* global Chartist */
-(function(window, document, Chartist) {
-  'use strict';
-
-  const defaultOptions = {
-    labelClass: 'ct-label',
-    labelOffset: {
-      x: 0,
-      y: -10
-    },
-    textAnchor: 'middle',
-    align: 'center',
-    labelInterpolationFnc: Chartist.noop
-  };
-
-  const labelPositionCalculation = {
-    point: function(data: any) {
-      return {
-        x: data.x,
-        y: data.y
-      };
-    },
-    bar: {
-      left: function(data: any) {
-        return {
-          x: data.x1,
-          y: data.y1
-        };
-      },
-      center: function(data: any) {
-        return {
-          x: data.x1 + (data.x2 - data.x1) / 2,
-          y: data.y1
-        };
-      },
-      right: function(data: any) {
-        return {
-          x: data.x2,
-          y: data.y1
-        };
-      }
-    }
-  };
-
-  Chartist.plugins = Chartist.plugins || {};
-  Chartist.plugins.ctPointLabels = function(options: any) {
-
-    options = Chartist.extend({}, defaultOptions, options);
-
-    function addLabel(position: any, data: any) {
-      // if x and y exist concat them otherwise output only the existing value
-      const value = data.value.x !== undefined && data.value.y ?
-        (data.value.x + ', ' + data.value.y) :
-        data.value.y || data.value.x;
-
-      data.group.elem('text', {
-        x: position.x + options.labelOffset.x,
-        y: position.y + options.labelOffset.y,
-        style: 'text-anchor: ' + options.textAnchor
-      }, options.labelClass).text(options.labelInterpolationFnc(value));
-    }
-
-    return function ctPointLabels(chart: any) {
-      if (chart instanceof Chartist.Line || chart instanceof Chartist.Bar) {
-        chart.on('draw', function(data: any) {
-          // @ts-ignore
-          const positonCalculator = labelPositionCalculation[data.type]
-        // @ts-ignore
-          && labelPositionCalculation[data.type][options.align] || labelPositionCalculation[data.type];
-          if (positonCalculator) {
-            addLabel(positonCalculator(data), data);
-          }
-        });
-      }
-    };
-  };
-
-}(null, null, Chartist));
-
-const defaultOptions = {
-    className: '',
-    classNames: false,
-    removeAll: false,
-    legendNames: false,
-    clickable: true,
-    onClick: null,
-    position: 'top'
-};
-
-Chartist.plugins.legend = function (options: any) {
-    let cachedDOMPosition;
-    let cacheInactiveLegends: { [key:number]: boolean } = {};
-    // Catch invalid options
-    if (options && options.position) {
-        if (!(options.position === 'top' || options.position === 'bottom' || options.position instanceof HTMLElement)) {
-            throw Error('The position you entered is not a valid position');
-        }
-        if (options.position instanceof HTMLElement) {
-            // Detatch DOM element from options object, because Chartist.extend
-            // currently chokes on circular references present in HTMLElements
-            cachedDOMPosition = options.position;
-            delete options.position;
-        }
-    }
-
-    options = Chartist.extend({}, defaultOptions, options);
-
-    if (cachedDOMPosition) {
-        // Reattatch the DOM Element position if it was removed before
-        options.position = cachedDOMPosition;
-    }
-
-    return function legend(chart: any) {
-
-      var isSelfUpdate = false;
-
-      chart.on('created', function (data: any) {
-
-        const useLabels = chart instanceof Chartist.Pie && chart.data.labels && chart.data.labels.length;
-        const legendNames = getLegendNames(useLabels);
-        var dirtyChartData = (chart.data.series.length < legendNames.length);
-
-        if (isSelfUpdate || dirtyChartData)
-            return;
-
-        function removeLegendElement() {
-          const legendElement = chart.container.querySelector('.ct-legend');
-            if (legendElement) {
-                legendElement.parentNode.removeChild(legendElement);
-            }
-        }
-
-        // Set a unique className for each series so that when a series is removed,
-        // the other series still have the same color.
-        function setSeriesClassNames() {
-            chart.data.series = chart.data.series.map(function (series: any, seriesIndex: any) {
-                if (typeof series !== 'object') {
-                    series = {
-                        value: series
-                    };
-                }
-                series.className = series.className || chart.options.classNames.series + '-' + Chartist.alphaNumerate(seriesIndex);
-                return series;
-            });
-        }
-
-        function createLegendElement() {
-            const legendElement = document.createElement('ul');
-            legendElement.className = 'ct-legend';
-            const inverted = localStorage.getItem('inverted-graph') === 'true';
-            if (inverted){
-                legendElement.classList.add('inverted');
-            }
-            if (chart instanceof Chartist.Pie) {
-                legendElement.classList.add('ct-legend-inside');
-            }
-            if (typeof options.className === 'string' && options.className.length > 0) {
-                legendElement.classList.add(options.className);
-            }
-            if (chart.options.width) {
-                legendElement.style.cssText = 'width: ' + chart.options.width + 'px;margin: 0 auto;';
-            }
-            return legendElement;
-        }
-
-        // Get the right array to use for generating the legend.
-        function getLegendNames(useLabels: any) {
-            return options.legendNames || (useLabels ? chart.data.labels : chart.data.series);
-        }
-
-        // Initialize the array that associates series with legends.
-        // -1 indicates that there is no legend associated with it.
-        function initSeriesMetadata(useLabels: any) {
-            const seriesMetadata = new Array(chart.data.series.length);
-            for (let i = 0; i < chart.data.series.length; i++) {
-                seriesMetadata[i] = {
-                    data: chart.data.series[i],
-                    label: useLabels ? chart.data.labels[i] : null,
-                    legend: -1
-                };
-            }
-            return seriesMetadata;
-        }
-
-        function createNameElement(i: any, legendText: any, classNamesViable: any) {
-            const li = document.createElement('li');
-            li.classList.add('ct-series-' + i);
-            // Append specific class to a legend element, if viable classes are given
-            if (classNamesViable) {
-                li.classList.add(options.classNames[i]);
-            }
-            li.setAttribute('data-legend', i);
-            li.textContent = legendText;
-            return li;
-        }
-
-        // Append the legend element to the DOM
-        function appendLegendToDOM(legendElement: any) {
-            if (!(options.position instanceof HTMLElement)) {
-                switch (options.position) {
-                    case 'top':
-                        chart.container.insertBefore(legendElement, chart.container.childNodes[0]);
-                        break;
-
-                    case 'bottom':
-                        chart.container.insertBefore(legendElement, null);
-                        break;
-                }
-            } else {
-                // Appends the legend element as the last child of a given HTMLElement
-                options.position.insertBefore(legendElement, null);
-            }
-        }
-
-        function updateChart(newSeries: any, newLabels:any, useLabels: any) {
-            chart.data.series = newSeries;
-            if (useLabels) {
-                chart.data.labels = newLabels;
-            }
-
-            isSelfUpdate = true;
-            chart.update();
-            isSelfUpdate = false;
-        }
-
-        function addClickHandler(legendElement: any, legends: any, seriesMetadata: any, useLabels: any) {
-            legendElement.addEventListener('click', function(e: any) {
-                const li = e.target;
-                if (li.parentNode !== legendElement || !li.hasAttribute('data-legend'))
-                    return;
-                e.preventDefault();
-
-                const legendIndex = parseInt(li.getAttribute('data-legend'));
-                const legend = legends[legendIndex];
-
-                const activateLegend = (_legendIndex: number): void => {
-                    legends[_legendIndex].active = true;
-                    legendElement.childNodes[_legendIndex].classList.remove('inactive');
-
-                    cacheInactiveLegends[_legendIndex] = false;
-                }
-
-                const deactivateLegend = (_legendIndex: number): void => {
-                    legends[_legendIndex].active = false;
-                    legendElement.childNodes[_legendIndex].classList.add('inactive');
-                    cacheInactiveLegends[_legendIndex] = true;
-                }
-
-                for (let i = legends.length - 1; i >= 0; i--) {
-                    if (i >= legendIndex) {
-                        if (!legend.active) activateLegend(i);
-                    } else {
-                        if (legend.active) deactivateLegend(i);
-                    }
-                }
-                // Make sure all values are undefined (falsy) when clicking the first legend
-                // After clicking the first legend all indices should be falsy
-                if (legendIndex === 0) cacheInactiveLegends = {};
-
-                const newSeries = [];
-                const newLabels = [];
-
-                for (let i = 0; i < seriesMetadata.length; i++) {
-                    if (seriesMetadata[i].legend !== -1 && legends[seriesMetadata[i].legend].active) {
-                        newSeries.push(seriesMetadata[i].data);
-                        newLabels.push(seriesMetadata[i].label);
-                    }
-                }
-
-                updateChart(newSeries, newLabels, useLabels);
-
-                if (options.onClick) {
-                    options.onClick(chart, e);
-                }
-            });
-        }
-
-        removeLegendElement();
-
-        const legendElement = createLegendElement();
-        const seriesMetadata = initSeriesMetadata(useLabels);
-        const legends: any = [];
-
-        // Check if given class names are viable to append to legends
-        const classNamesViable = Array.isArray(options.classNames) && options.classNames.length === legendNames.length;
-
-        var activeSeries = [];
-        var activeLabels = [];
-
-        // Loop through all legends to set each name in a list item.
-        legendNames.forEach(function (legend: any, i: any) {
-            const legendText = legend.name || legend;
-            const legendSeries = legend.series || [i];
-
-            const li = createNameElement(i, legendText, classNamesViable);
-            // If the value is undefined or false, isActive is true
-            const isActive: boolean = !cacheInactiveLegends[i];
-            if (isActive) {
-              activeSeries.push(seriesMetadata[i].data);
-              activeLabels.push(seriesMetadata[i].label);
-            } else {
-              li.classList.add('inactive');
-            }
-            legendElement.appendChild(li);
-
-            legendSeries.forEach(function(seriesIndex: any) {
-                seriesMetadata[seriesIndex].legend = i;
-            });
-
-            legends.push({
-                text: legendText,
-                series: legendSeries,
-                active: isActive
-            });
-
-        });
-
-        appendLegendToDOM(legendElement);
-
-        if (options.clickable) {
-            setSeriesClassNames();
-            addClickHandler(legendElement, legends, seriesMetadata, useLabels);
-        }
-
-        updateChart(activeSeries, activeLabels, useLabels);
-
-      });
-    };
-};
-
-Chartist.plugins.tooltip = function (options: any) {
-  options = Chartist.extend({}, defaultOptions, options);
-
-  return function tooltip(chart: any) {
-    let tooltipSelector = options.pointClass;
-    if (chart instanceof Chartist.Bar) {
-      tooltipSelector = 'ct-bar';
-    } else if (chart instanceof Chartist.Pie) {
-      // Added support for donut graph
-      if (chart.options.donut) {
-        tooltipSelector = 'ct-slice-donut';
-      } else {
-        tooltipSelector = 'ct-slice-pie';
-      }
-    }
-
-    const $chart = chart.container;
-    let $toolTip = $chart.querySelector('.chartist-tooltip');
-    if (!$toolTip) {
-      $toolTip = document.createElement('div');
-      $toolTip.className = (!options.class) ? 'chartist-tooltip' : 'chartist-tooltip ' + options.class;
-      if (!options.appendToBody) {
-        $chart.appendChild($toolTip);
-      } else {
-        document.body.appendChild($toolTip);
-      }
-    }
-    let height = $toolTip.offsetHeight;
-    let width = $toolTip.offsetWidth;
-
-    hide($toolTip);
-
-    function on(event: any, selector: any, callback: any) {
-      $chart.addEventListener(event, function (e: any) {
-        if (!selector || hasClass(e.target, selector)) {
-          callback(e);
-        }
-      });
-    }
-
-    on('mouseover', tooltipSelector, function (event: any) {
-      const $point = event.target;
-      let tooltipText = '';
-
-      const isPieChart = (chart instanceof Chartist.Pie) ? $point : $point.parentNode;
-      const seriesName = (isPieChart) ? $point.parentNode.getAttribute('ct:meta') || $point.parentNode.getAttribute('ct:series-name') : '';
-      let meta = $point.getAttribute('ct:meta') || seriesName || '';
-      const hasMeta = !!meta;
-      let value = $point.getAttribute('ct:value');
-
-      if (options.transformTooltipTextFnc && typeof options.transformTooltipTextFnc === 'function') {
-        value = options.transformTooltipTextFnc(value, $point.parentNode.getAttribute('class'));
-      }
-
-      if (options.tooltipFnc && typeof options.tooltipFnc === 'function') {
-        tooltipText = options.tooltipFnc(meta, value);
-      } else {
-        if (options.metaIsHTML) {
-          const txt = document.createElement('textarea');
-          txt.innerHTML = meta;
-          meta = txt.value;
-        }
-
-        meta = '<span class="chartist-tooltip-meta">' + meta + '</span>';
-
-        if (hasMeta) {
-          tooltipText += meta + '<br>';
-        } else {
-          // For Pie Charts also take the labels into account
-          // Could add support for more charts here as well!
-          if (chart instanceof Chartist.Pie) {
-            const label = next($point, 'ct-label');
-            if (label) {
-              tooltipText += text(label) + '<br>';
-            }
-          }
-        }
-
-        if (value) {
-          if (options.currency) {
-            if (options.currencyFormatCallback != undefined) {
-              value = options.currencyFormatCallback(value, options);
-            } else {
-              value = options.currency + value.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,');
-            }
-          }
-          value = '<span class="chartist-tooltip-value">' + value + '</span>';
-          tooltipText += value;
-        }
-      }
-
-      if (tooltipText) {
-        $toolTip.innerHTML = tooltipText;
-        setPosition(event);
-        show($toolTip);
-
-        // Remember height and width to avoid wrong position in IE
-        height = $toolTip.offsetHeight;
-        width = $toolTip.offsetWidth;
-      }
-    });
-
-    on('mouseout', tooltipSelector, function () {
-      hide($toolTip);
-    });
-
-    on('mousemove', null, function (event: any) {
-      if (false === options.anchorToPoint) {
-        setPosition(event);
-      }
-    });
-
-    function setPosition(event: any) {
-      height = height || $toolTip.offsetHeight;
-      width = width || $toolTip.offsetWidth;
-      const offsetX = - width / 2 + options.tooltipOffset.x
-      const offsetY = - height + options.tooltipOffset.y;
-      let anchorX, anchorY;
-
-      if (!options.appendToBody) {
-        const box = $chart.getBoundingClientRect();
-        const left = event.pageX - box.left - window.pageXOffset ;
-        const top = event.pageY - box.top - window.pageYOffset ;
-
-        if (true === options.anchorToPoint && event.target.x2 && event.target.y2) {
-          anchorX = parseInt(event.target.x2.baseVal.value);
-          anchorY = parseInt(event.target.y2.baseVal.value);
-        }
-
-        $toolTip.style.top = (anchorY || top) + offsetY + 'px';
-        $toolTip.style.left = (anchorX || left) + offsetX + 'px';
-      } else {
-        $toolTip.style.top = event.pageY + offsetY + 'px';
-        $toolTip.style.left = event.pageX + offsetX + 'px';
-      }
-    }
-  }
-};
-
-Chartist.plugins.ctPointLabels = (options) => {
-  return function ctPointLabels(chart) {
-      const defaultOptions2 = {
-          labelClass: 'ct-point-label',
-          labelOffset: {
-              x: 0,
-              y: -7
-          },
-          textAnchor: 'middle'
-      };
-      options = Chartist.extend({}, defaultOptions2, options);
-
-      if (chart instanceof Chartist.Line) {
-          chart.on('draw', (data) => {
-              if (data.type === 'point') {
-                  data.group.elem('text', {
-                      x: data.x + options.labelOffset.x,
-                      y: data.y + options.labelOffset.y,
-                      style: 'text-anchor: ' + options.textAnchor
-                  }, options.labelClass).text(options.labelInterpolationFnc(data.value.y));  // 07.11.17 added ".y"
-              }
-          });
-      }
-  };
-};
-
-function show(element: any) {
-  if (!hasClass(element, 'tooltip-show')) {
-    element.className = element.className + ' tooltip-show';
-  }
-}
-
-function hide(element: any) {
-  const regex = new RegExp('tooltip-show' + '\\s*', 'gi');
-  element.className = element.className.replace(regex, '').trim();
-}
-
-function hasClass(element: any, className: any) {
-  return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + className + ' ') > -1;
-}
-
-function next(element: any, className: any) {
-  do {
-    element = element.nextSibling;
-  } while (element && !hasClass(element, className));
-  return element;
-}
-
-function text(element: any) {
-  return element.innerText || element.textContent;
-}

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

@@ -1,18 +1,10 @@
 <div class="container-graph">
   <div>
-    <div *ngIf="loading" class="loading">
-      <div class="text-center">
-        <h3 i18n="statistics.loading-graphs">Loading graphs...</h3>
-        <br>
-        <div class="spinner-border text-light"></div>
-      </div>
-    </div>
     <div>
-      <div class="card mb-3" *ngIf="mempoolStats.length">
+      <div class="card mb-3">
         <div class="card-header">
           <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
           <form [formGroup]="radioGroupForm" class="formRadioGroup" (click)="saveGraphPreference()">
-            <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
             <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
               <label ngbButtonLabel class="btn-primary btn-sm">
                 <input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H (LIVE)
@@ -35,30 +27,73 @@
               <label ngbButtonLabel class="btn-primary btn-sm">
                 <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
               </label>
+              <label ngbButtonLabel class="btn-primary btn-sm">
+                <input ngbButton type="radio" [value]="'2y'" [routerLink]="['/graphs' | relativeUrl]" fragment="2y"> 2Y
+              </label>
+              <label ngbButtonLabel class="btn-primary btn-sm">
+                <input ngbButton type="radio" [value]="'3y'" [routerLink]="['/graphs' | relativeUrl]" fragment="3y"> 3Y
+              </label>
+            </div>
+            <div class="small-buttons">
+              <div ngbDropdown #myDrop="ngbDropdown">
+                <button class="btn btn-primary btn-sm" id="dropdownFees" ngbDropdownAnchor (click)="myDrop.toggle()">
+                  <fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title" title="Filter"></fa-icon>
+                </button>
+                <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
+                  <ul>
+                    <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
+                      <ng-template [ngIf]="fee <= 400">
+                        <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
+                        <ng-template [ngIf]="inverted">
+                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
+                          <span class="fee-text" >{{feeLevels[i]}} - {{ feeLevels[i + 1] }}</span>
+                        </ng-template>
+                        <ng-template [ngIf]="!inverted">
+                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
+                          <span class="fee-text" >{{feeLevels[i]}} - {{ feeLevels[i - 1] }}</span>
+                        </ng-template>
+                      </li>
+                      </ng-template>
+                    </ng-template>
+                  </ul>
+                </div>
+              </div>
+
+              <button (click)="invertGraph()" class="btn btn-primary btn-sm"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
             </div>
-            <button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
           </form>
+          <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading && mempoolStats.length"></div>
         </div>
         <div class="card-body">
-          <div style="height: 600px;">
-            <app-mempool-graph dir="ltr" [data]="mempoolStats" [dateSpan]="radioGroupForm.controls.dateSpan.value"></app-mempool-graph>
+          <div class="incoming-transactions-graph">
+            <app-mempool-graph
+              dir="ltr"
+              [template]="'advanced'"
+              [limitFee]="500"
+              [limitFilterFee]="filterFeeIndex"
+              [height]="500"
+              [left]="65"
+              [right]="10"
+              [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"
+            ></app-mempool-graph>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="col-lg-12">
-      <div class="card mb-3" *ngIf="mempoolTransactionsWeightPerSecondData">
+    <div>
+      <div class="card mb-3">
         <div class="card-header">
             <i class="fa fa-area-chart"></i> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
         </div>
         <div class="card-body">
-          <div style="height: 600px;">
-            <app-chartist
+          <div class="incoming-transactions-graph">
+            <app-incoming-transactions-graph
+              [height]="500"
+              [left]="65"
+              [template]="'advanced'"
               [data]="mempoolTransactionsWeightPerSecondData"
-              [type]="'Line'"
-              [options]="transactionsWeightPerSecondOptions">
-            </app-chartist>
+            ></app-incoming-transactions-graph>
           </div>
         </div>
       </div>