Pull from transifex

Bugfix: difficulty adjustment calculation.

.github/FUNDING.yml

@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ['https://mempool.space/about'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: ['https://mempool.space/sponsor'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/cypress.yml

@@ -0,0 +1,77 @@
+name: Cypress Tests
+
+on: [push, pull_request]
+
+jobs:
+  cypress:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2, 3, 4, 5]
+        os: ["ubuntu-latest"]
+        browser: [chrome]
+    name: E2E tests on ${{ matrix.browser }} - ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: ${{ matrix.browser }} browser tests (Mempool)
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: frontend
+          build: npm run config:defaults:mempool
+          start: npm run start:local-prod
+          wait-on: 'http://localhost:4200'
+          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 }}'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+
+      - name: ${{ matrix.browser }} browser tests (Liquid)
+        uses: cypress-io/github-action@v2
+        if: always()
+        with:
+          working-directory: frontend
+          build: npm run config:defaults:liquid
+          start: npm run start:local-prod
+          wait-on: 'http://localhost:4200'
+          wait-on-timeout: 120
+          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 }}'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+
+      - name: ${{ matrix.browser }} browser tests (Bisq)
+        uses: cypress-io/github-action@v2
+        if: always()
+        with:
+          working-directory: frontend
+          build: npm run config:defaults:bisq
+          start: npm run start:local-prod
+          wait-on: 'http://localhost:4200'
+          wait-on-timeout: 120
+          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 }}'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}

LICENSE

@@ -12,8 +12,13 @@ the terms of (at your option) either:
  Foundation, either version 3 of the License or any later version approved by a
  proxy statement published on <https://mempool.space/about>.
 
-However, these licenses do not grant you any rights to use the "mempool.space"
-trademarks or logos, or any other trademarks of Mempool Space K.K.
+However, this copyright license does not include an implied right or license to
+use our trademarks: The Mempool Open Source Project™, mempool.space™, the
+mempool Logo™, the mempool.space Vertical Logo™, the mempool.space Horizontal
+Logo™, the mempool Square Logo™, and the mempool Blocks logo™ are registered
+trademarks or trademarks of Mempool Space K.K in Japan, the United States,
+and/or other countries. See our full Trademark Policy and Guidelines for more
+details, published on <https://mempool.space/trademark-policy>.
 
 This program is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A

README.md

@@ -167,7 +167,7 @@ Install mempool dependencies from npm and build the frontend static HTML/CSS/JS:
 Install the output into nginx webroot folder:
 
 ```bash
-  sudo rsync -av --delete dist/mempool/ /var/www/html/
+  sudo rsync -av --delete dist/mempool /var/www/
 ```
 
 ## nginx + certbot
@@ -179,7 +179,7 @@ Install the supplied nginx.conf and nginx-mempool.conf in /etc/nginx
   apt-get install -y nginx python-certbot-nginx
 
   # install the mempool configuration for nginx
-  cp nginx.conf nginx-mempool.conf /etc/nginx/nginx.conf
+  cp nginx.conf nginx-mempool.conf /etc/nginx/
 
   # replace example.com with your domain name
   certbot --nginx -d example.com

backend/mempool-config.sample.json

@@ -8,7 +8,10 @@
     "POLL_RATE_MS": 2000,
     "CACHE_DIR": "./cache",
     "CLEAR_PROTECTION_MINUTES": 20,
-    "RECOMMENDED_FEE_PERCENTILE": 50
+    "RECOMMENDED_FEE_PERCENTILE": 50,
+    "BLOCK_WEIGHT_UNITS": 4000000,
+    "INITIAL_BLOCKS_AMOUNT": 8,
+    "MEMPOOL_BLOCKS_AMOUNT": 8
   },
   "CORE_RPC": {
     "HOST": "127.0.0.1",

backend/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "mempool-backend",
-  "version": "2.2.0",
+  "version": "2.2.2-dev",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mempool-backend",
-      "version": "2.2.0",
+      "version": "2.2.2-dev",
       "license": "GNU Affero General Public License v3.0",
       "dependencies": {
-        "@mempool/bitcoin": "^3.0.2",
+        "@mempool/bitcoin": "^3.0.3",
         "@mempool/electrum-client": "^1.1.7",
         "axios": "^0.21.1",
         "bitcoinjs-lib": "^5.2.0",
@@ -56,9 +56,9 @@
       }
     },
     "node_modules/@mempool/bitcoin": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@mempool/bitcoin/-/bitcoin-3.0.2.tgz",
-      "integrity": "sha512-WNHFTDJEEBmakSPAbrJ933mGgm1uYxmOElyQYZVW7D7CRUd8mKek+QlViin63e71vyfMVOGXtWwSb87dxghggQ==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@mempool/bitcoin/-/bitcoin-3.0.3.tgz",
+      "integrity": "sha512-10UdbwchnevlebDTN+Xhv75AEhDmTMy9UgWHlqx5MG2mheFG6+eqmtHsdxeYnv3IAtTtlRfA6fY0RbV/x4TNFQ==",
       "engines": {
         "node": ">= 0.10.0"
       }
@@ -1590,9 +1590,9 @@
       }
     },
     "@mempool/bitcoin": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@mempool/bitcoin/-/bitcoin-3.0.2.tgz",
-      "integrity": "sha512-WNHFTDJEEBmakSPAbrJ933mGgm1uYxmOElyQYZVW7D7CRUd8mKek+QlViin63e71vyfMVOGXtWwSb87dxghggQ=="
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@mempool/bitcoin/-/bitcoin-3.0.3.tgz",
+      "integrity": "sha512-10UdbwchnevlebDTN+Xhv75AEhDmTMy9UgWHlqx5MG2mheFG6+eqmtHsdxeYnv3IAtTtlRfA6fY0RbV/x4TNFQ=="
     },
     "@mempool/electrum-client": {
       "version": "1.1.8",
@@ -2820,8 +2820,7 @@
     "ws": {
       "version": "7.4.6",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-      "requires": {}
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
     },
     "yallist": {
       "version": "4.0.0",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-backend",
-  "version": "2.2.0",
+  "version": "2.2.2-dev",
   "description": "Bitcoin mempool visualizer and blockchain explorer backend",
   "license": "GNU Affero General Public License v3.0",
   "homepage": "https://mempool.space",
@@ -28,7 +28,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@mempool/bitcoin": "^3.0.2",
+    "@mempool/bitcoin": "^3.0.3",
     "@mempool/electrum-client": "^1.1.7",
     "axios": "^0.21.1",
     "bitcoinjs-lib": "^5.2.0",

backend/src/api/bisq/bisq.ts

@@ -162,7 +162,7 @@ class Bisq {
       this.buildIndex();
       this.calculateStats();
     } catch (e) {
-      logger.err('loadBisqDumpFile() error.' + e.message || e);
+      logger.info('loadBisqDumpFile() error.' + e.message || e);
     }
   }
 

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

@@ -6,6 +6,7 @@ export interface AbstractBitcoinApi {
   $getBlockHeightTip(): Promise<number>;
   $getTxIdsForBlock(hash: string): Promise<string[]>;
   $getBlockHash(height: number): Promise<string>;
+  $getBlockHeader(hash: string): Promise<string>;
   $getBlock(hash: string): Promise<IEsploraApi.Block>;
   $getAddress(address: string): Promise<IEsploraApi.Address>;
   $getAddressTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]>;

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

@@ -113,4 +113,46 @@ export namespace IBitcoinApi {
     status: 'invalid' | 'headers-only' | 'valid-headers' | 'valid-fork' | 'active';
   }
 
+  export interface BlockchainInfo {
+    chain: number;                   // (string) current network name as defined in BIP70 (main, test, regtest)
+    blocks: number;                  // (numeric) the current number of blocks processed in the server
+    headers: number;                 // (numeric) the current number of headers we have validated
+    bestblockhash: string,           // (string) the hash of the currently best block
+    difficulty: number;              // (numeric) the current difficulty
+    mediantime: number;              // (numeric) median time for the current best block
+    verificationprogress: number;    // (numeric) estimate of verification progress [0..1]
+    initialblockdownload: boolean;   // (bool) (debug information) estimate of whether this node is in Initial Block Download mode.
+    chainwork: string                // (string) total amount of work in active chain, in hexadecimal
+    size_on_disk: number;            // (numeric) the estimated size of the block and undo files on disk
+    pruned: number;                  // (boolean) if the blocks are subject to pruning
+    pruneheight: number;             // (numeric) lowest-height complete block stored (only present if pruning is enabled)
+    automatic_pruning: number;       // (boolean) whether automatic pruning is enabled (only present if pruning is enabled)
+    prune_target_size: number;       // (numeric) the target size used by pruning (only present if automatic pruning is enabled)
+    softforks: SoftFork[];           // (array) status of softforks in progress
+    bip9_softforks: { [name: string]: Bip9SoftForks[] } // (object) status of BIP9 softforks in progress
+    warnings: string;                // (string) any network and blockchain warnings.
+  }
+
+  interface SoftFork {
+    id: string;                      // (string) name of softfork
+    version: number;                 // (numeric) block version
+    reject: {                        // (object) progress toward rejecting pre-softfork blocks
+      status: boolean;               // (boolean) true if threshold reached
+    },
+  }
+  interface Bip9SoftForks {
+    status: number;                  // (string) one of defined, started, locked_in, active, failed
+    bit: number;                     // (numeric) the bit (0-28) in the block version field used to signal this softfork (only for started status)
+    startTime: number;               // (numeric) the minimum median time past of a block at which the bit gains its meaning
+    timeout: number;                 // (numeric) the median time past of a block at which the deployment is considered failed if not yet locked in
+    since: number;                   // (numeric) height of the first block to which the status applies
+    statistics: {                    // (object) numeric statistics about BIP9 signalling for a softfork (only for started status)
+      period: number;                // (numeric) the length in blocks of the BIP9 signalling period 
+      threshold: number;             // (numeric) the number of blocks with the version bit set required to activate the feature 
+      elapsed: number;               // (numeric) the number of blocks elapsed since the beginning of the current period 
+      count: number;                 // (numeric) the number of blocks with the version bit set in the current period 
+      possible: boolean;             // (boolean) returns false if there are not enough blocks left in this period to pass activation threshold 
+    }
+  }
+
 }

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

@@ -56,10 +56,19 @@ class BitcoinApi implements AbstractBitcoinApi {
       .then((rpcBlock: IBitcoinApi.Block) => rpcBlock.tx);
   }
 
+  $getRawBlock(hash: string): Promise<string> {
+    return this.bitcoindClient.getBlock(hash, 0);
+  }
+
+
   $getBlockHash(height: number): Promise<string> {
     return this.bitcoindClient.getBlockHash(height);
   }
 
+  $getBlockHeader(hash: string): Promise<string> {
+    return this.bitcoindClient.getBlockHeader(hash,false);
+  }
+
   async $getBlock(hash: string): Promise<IEsploraApi.Block> {
     const foundBlock = blocks.getBlocks().find((block) => block.id === hash);
     if (foundBlock) {

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

@@ -40,6 +40,10 @@ class BitcoinBaseApi {
     }
     return this.bitcoindClient.getMempoolInfo();
   }
+
+  $getBlockchainInfo(): Promise<IBitcoinApi.BlockchainInfo> {
+    return this.bitcoindClient.getBlockchainInfo();
+  }
 }
 
 export default new BitcoinBaseApi();

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

@@ -9,6 +9,7 @@ export namespace IEsploraApi {
     vin: Vin[];
     vout: Vout[];
     status: Status;
+    hex?: string;
   }
 
   export interface Recent {

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

@@ -35,6 +35,11 @@ class ElectrsApi implements AbstractBitcoinApi {
       .then((response) => response.data);
   }
 
+  $getBlockHeader(hash: string): Promise<string> {
+    return axios.get<string>(config.ESPLORA.REST_API_URL + '/block/' + hash + '/header', this.axiosConfig)
+      .then((response) => response.data);
+  }
+
   $getBlock(hash: string): Promise<IEsploraApi.Block> {
     return axios.get<IEsploraApi.Block>(config.ESPLORA.REST_API_URL + '/block/' + hash, this.axiosConfig)
       .then((response) => response.data);

backend/src/api/blocks.ts

@@ -6,12 +6,14 @@ 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';
 
 class Blocks {
-  private static INITIAL_BLOCK_AMOUNT = 8;
   private blocks: BlockExtended[] = [];
   private currentBlockHeight = 0;
+  private currentDifficulty = 0;
   private lastDifficultyAdjustmentTime = 0;
+  private previousDifficultyRetarget = 0;
   private newBlockCallbacks: ((block: BlockExtended, txIds: string[], transactions: TransactionExtended[]) => void)[] = [];
 
   constructor() { }
@@ -32,21 +34,32 @@ class Blocks {
     const blockHeightTip = await bitcoinApi.$getBlockHeightTip();
 
     if (this.blocks.length === 0) {
-      this.currentBlockHeight = blockHeightTip - Blocks.INITIAL_BLOCK_AMOUNT;
+      this.currentBlockHeight = blockHeightTip - config.MEMPOOL.INITIAL_BLOCKS_AMOUNT;
     } else {
       this.currentBlockHeight = this.blocks[this.blocks.length - 1].height;
     }
 
-    if (blockHeightTip - this.currentBlockHeight > Blocks.INITIAL_BLOCK_AMOUNT * 2) {
-      logger.info(`${blockHeightTip - this.currentBlockHeight} blocks since tip. Fast forwarding to the ${Blocks.INITIAL_BLOCK_AMOUNT} recent blocks`);
-      this.currentBlockHeight = blockHeightTip - Blocks.INITIAL_BLOCK_AMOUNT;
+    if (blockHeightTip - this.currentBlockHeight > config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 2) {
+      logger.info(`${blockHeightTip - this.currentBlockHeight} blocks since tip. Fast forwarding to the ${config.MEMPOOL.INITIAL_BLOCKS_AMOUNT} recent blocks`);
+      this.currentBlockHeight = blockHeightTip - config.MEMPOOL.INITIAL_BLOCKS_AMOUNT;
     }
 
     if (!this.lastDifficultyAdjustmentTime) {
-      const heightDiff = blockHeightTip % 2016;
-      const blockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff);
-      const block = await bitcoinApi.$getBlock(blockHash);
-      this.lastDifficultyAdjustmentTime = block.timestamp;
+      const blockchainInfo = await bitcoinBaseApi.$getBlockchainInfo();
+      if (blockchainInfo.blocks === blockchainInfo.headers) {
+        const heightDiff = blockHeightTip % 2016;
+        const blockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff);
+        const block = await bitcoinApi.$getBlock(blockHash);
+        this.lastDifficultyAdjustmentTime = block.timestamp;
+        this.currentDifficulty = block.difficulty;
+
+        const previousPeriodBlockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff - 2016);
+        const previousPeriodBlock = await bitcoinApi.$getBlock(previousPeriodBlockHash);
+        this.previousDifficultyRetarget = (block.difficulty - previousPeriodBlock.difficulty) / previousPeriodBlock.difficulty * 100;
+        logger.debug(`Initial difficulty adjustment data set.`);
+      } else {
+        logger.debug(`Blockchain headers (${blockchainInfo.headers}) and blocks (${blockchainInfo.blocks}) not in sync. Waiting...`);
+      }
     }
 
     while (this.currentBlockHeight < blockHeightTip) {
@@ -97,16 +110,18 @@ class Blocks {
       blockExtended.coinbaseTx = transactionUtils.stripCoinbaseTransaction(transactions[0]);
       transactions.shift();
       transactions.sort((a, b) => b.effectiveFeePerVsize - a.effectiveFeePerVsize);
-      blockExtended.medianFee = transactions.length > 1 ? Common.median(transactions.map((tx) => tx.effectiveFeePerVsize)) : 0;
-      blockExtended.feeRange = transactions.length > 1 ? Common.getFeesInRange(transactions, 8) : [0, 0];
+      blockExtended.medianFee = transactions.length > 0 ? Common.median(transactions.map((tx) => tx.effectiveFeePerVsize)) : 0;
+      blockExtended.feeRange = transactions.length > 0 ? Common.getFeesInRange(transactions, 8) : [0, 0];
 
       if (block.height % 2016 === 0) {
+        this.previousDifficultyRetarget = (block.difficulty - this.currentDifficulty) / this.currentDifficulty * 100;
         this.lastDifficultyAdjustmentTime = block.timestamp;
+        this.currentDifficulty = block.difficulty;
       }
 
       this.blocks.push(blockExtended);
-      if (this.blocks.length > Blocks.INITIAL_BLOCK_AMOUNT * 4) {
-        this.blocks = this.blocks.slice(-Blocks.INITIAL_BLOCK_AMOUNT * 4);
+      if (this.blocks.length > config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 4) {
+        this.blocks = this.blocks.slice(-config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 4);
       }
 
       if (this.newBlockCallbacks.length) {
@@ -122,6 +137,10 @@ class Blocks {
     return this.lastDifficultyAdjustmentTime;
   }
 
+  public getPreviousDifficultyRetarget(): number {
+    return this.previousDifficultyRetarget;
+  }
+
   public getCurrentBlockHeight(): number {
     return this.currentBlockHeight;
   }

backend/src/api/common.ts

@@ -1,5 +1,5 @@
 import { CpfpInfo, TransactionExtended, TransactionStripped } from '../mempool.interfaces';
-
+import config from '../config';
 export class Common {
   static median(numbers: number[]) {
     let medianNr = 0;
@@ -105,7 +105,7 @@ export class Common {
       totalFees += tx.bestDescendant.fee;
     }
 
-    tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+    tx.effectiveFeePerVsize = Math.max(config.MEMPOOL.NETWORK === 'liquid' ? 0.1 : 1, totalFees / (totalWeight / 4));
     tx.cpfpChecked = true;
 
     return {

backend/src/api/mempool-blocks.ts

@@ -4,7 +4,6 @@ import { Common } from './common';
 import config from '../config';
 
 class MempoolBlocks {
-  private static DEFAULT_PROJECTED_BLOCKS_AMOUNT = 8;
   private mempoolBlocks: MempoolBlockWithTransactions[] = [];
 
   constructor() {}
@@ -72,29 +71,29 @@ class MempoolBlocks {
 
   private calculateMempoolBlocks(transactionsSorted: TransactionExtended[]): MempoolBlockWithTransactions[] {
     const mempoolBlocks: MempoolBlockWithTransactions[] = [];
-    let blockVSize = 0;
+    let blockWeight = 0;
     let blockSize = 0;
     let transactions: TransactionExtended[] = [];
     transactionsSorted.forEach((tx) => {
-      if (blockVSize + tx.vsize <= 1000000 || mempoolBlocks.length === MempoolBlocks.DEFAULT_PROJECTED_BLOCKS_AMOUNT - 1) {
-        blockVSize += tx.vsize;
+      if (blockWeight + tx.weight <= config.MEMPOOL.BLOCK_WEIGHT_UNITS || mempoolBlocks.length === config.MEMPOOL.MEMPOOL_BLOCKS_AMOUNT) {
+        blockWeight += tx.weight;
         blockSize += tx.size;
         transactions.push(tx);
       } else {
-        mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockVSize, mempoolBlocks.length));
-        blockVSize = tx.vsize;
+        mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockWeight, mempoolBlocks.length));
+        blockWeight = tx.weight;
         blockSize = tx.size;
         transactions = [tx];
       }
     });
     if (transactions.length) {
-      mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockVSize, mempoolBlocks.length));
+      mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockWeight, mempoolBlocks.length));
     }
     return mempoolBlocks;
   }
 
   private dataToMempoolBlocks(transactions: TransactionExtended[],
-    blockSize: number, blockVSize: number, blocksIndex: number): MempoolBlockWithTransactions {
+    blockSize: number, blockWeight: number, blocksIndex: number): MempoolBlockWithTransactions {
     let rangeLength = 4;
     if (blocksIndex === 0) {
       rangeLength = 8;
@@ -106,7 +105,7 @@ class MempoolBlocks {
     }
     return {
       blockSize: blockSize,
-      blockVSize: blockVSize,
+      blockVSize: blockWeight / 4,
       nTx: transactions.length,
       totalFees: transactions.reduce((acc, cur) => acc + cur.fee, 0),
       medianFee: Common.percentile(transactions.map((tx) => tx.effectiveFeePerVsize), config.MEMPOOL.RECOMMENDED_FEE_PERCENTILE),

backend/src/api/transaction-utils.ts

@@ -1,7 +1,7 @@
 import bitcoinApi from './bitcoin/bitcoin-api-factory';
-import logger from '../logger';
 import { TransactionExtended, TransactionMinerInfo } from '../mempool.interfaces';
 import { IEsploraApi } from './bitcoin/esplora-api.interface';
+import config from '../config';
 
 class TransactionUtils {
   constructor() { }
@@ -31,7 +31,7 @@ class TransactionUtils {
       // @ts-ignore
       return transaction;
     }
-    const feePerVbytes = Math.max(1, (transaction.fee || 0) / (transaction.weight / 4));
+    const feePerVbytes = Math.max(config.MEMPOOL.NETWORK === 'liquid' ? 0.1 : 1, (transaction.fee || 0) / (transaction.weight / 4));
     const transactionExtended: TransactionExtended = Object.assign({
       vsize: Math.round(transaction.weight / 4),
       feePerVsize: feePerVbytes,

backend/src/api/websocket-handler.ts

@@ -53,18 +53,25 @@ class WebsocketHandler {
               if (parsedMessage['watch-mempool']) {
                 const tx = memPool.getMempool()[client['track-tx']];
                 if (tx) {
-                  if (config.MEMPOOL.BACKEND !== 'esplora') {
+                  if (config.MEMPOOL.BACKEND === 'esplora') {
+                    response['tx'] = tx;
+                  } else {
+                    // tx.prevouts is missing from transactions when in bitcoind mode
                     try {
                       const fullTx = await transactionUtils.$getTransactionExtended(tx.txid, true);
                       response['tx'] = fullTx;
                     } catch (e) {
-                      logger.debug('Error finding transaction in mempool: ' + e.message || e);
+                      logger.debug('Error finding transaction: ' + e.message || e);
                     }
-                  } else {
-                    response['tx'] = tx;
                   }
                 } else {
-                  client['track-mempool-tx'] = parsedMessage['track-tx'];
+                  try {
+                    const fullTx = await transactionUtils.$getTransactionExtended(client['track-tx'], true);
+                    response['tx'] = fullTx;
+                  } catch (e) {
+                    logger.debug('Error finding transaction. ' + e.message || e);
+                    client['track-mempool-tx'] = parsedMessage['track-tx'];
+                  }
                 }
               }
             } else {
@@ -90,7 +97,7 @@ class WebsocketHandler {
           }
 
           if (parsedMessage.action === 'init') {
-            const _blocks = blocks.getBlocks().slice(-8);
+            const _blocks = blocks.getBlocks().slice(-config.MEMPOOL.INITIAL_BLOCKS_AMOUNT);
             if (!_blocks) {
               return;
             }
@@ -166,12 +173,13 @@ class WebsocketHandler {
 
   getInitData(_blocks?: BlockExtended[]) {
     if (!_blocks) {
-      _blocks = blocks.getBlocks().slice(-8);
+      _blocks = blocks.getBlocks().slice(-config.MEMPOOL.INITIAL_BLOCKS_AMOUNT);
     }
     return {
       'mempoolInfo': memPool.getMempoolInfo(),
       'vBytesPerSecond': memPool.getVBytesPerSecond(),
       'lastDifficultyAdjustment': blocks.getLastDifficultyAdjustmentTime(),
+      'previousRetarget': blocks.getPreviousDifficultyRetarget(),
       'blocks': _blocks,
       'conversions': fiatConversion.getConversionRates(),
       'mempool-blocks': mempoolBlocks.getMempoolBlocks(),
@@ -384,6 +392,7 @@ class WebsocketHandler {
         'block': block,
         'mempoolInfo': memPool.getMempoolInfo(),
         'lastDifficultyAdjustment': blocks.getLastDifficultyAdjustmentTime(),
+        'previousRetarget': blocks.getPreviousDifficultyRetarget(),
       };
 
       if (mBlocks && client['want-mempool-blocks']) {

backend/src/config.ts

@@ -11,6 +11,9 @@ interface IConfig {
     CACHE_DIR: string;
     CLEAR_PROTECTION_MINUTES: number;
     RECOMMENDED_FEE_PERCENTILE: number;
+    BLOCK_WEIGHT_UNITS: number;
+    INITIAL_BLOCKS_AMOUNT: number;
+    MEMPOOL_BLOCKS_AMOUNT: number;
   };
   ESPLORA: {
     REST_API_URL: string;
@@ -69,6 +72,9 @@ const defaults: IConfig = {
     'CACHE_DIR': './cache',
     'CLEAR_PROTECTION_MINUTES': 20,
     'RECOMMENDED_FEE_PERCENTILE': 50,
+    'BLOCK_WEIGHT_UNITS': 4000000,
+    'INITIAL_BLOCKS_AMOUNT': 8,
+    'MEMPOOL_BLOCKS_AMOUNT': 8,
   },
   'ESPLORA': {
     'REST_API_URL': 'http://127.0.0.1:3000',

backend/src/index.ts

@@ -153,6 +153,7 @@ class Server {
     this.app
       .get(config.MEMPOOL.API_URL_PREFIX + 'transaction-times', routes.getTransactionTimes)
       .get(config.MEMPOOL.API_URL_PREFIX + 'cpfp/:txId', routes.getCpfpInfo)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'difficulty-adjustment', routes.getDifficultyChange)
       .get(config.MEMPOOL.API_URL_PREFIX + 'fees/recommended', routes.getRecommendedFees)
       .get(config.MEMPOOL.API_URL_PREFIX + 'fees/mempool-blocks', routes.getMempoolBlocks)
       .get(config.MEMPOOL.API_URL_PREFIX + 'backend-info', routes.getBackendInfo)
@@ -234,9 +235,11 @@ 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)
+        .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)
         .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash', routes.getBlock)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash/header', routes.getBlockHeader)
         .get(config.MEMPOOL.API_URL_PREFIX + 'blocks', routes.getBlocks)
         .get(config.MEMPOOL.API_URL_PREFIX + 'blocks/:height', routes.getBlocks)
         .get(config.MEMPOOL.API_URL_PREFIX + 'blocks/tip/height', routes.getBlockTipHeight)

backend/src/routes.ts

@@ -484,6 +484,20 @@ class Routes {
     }
   }
 
+  public async getRawTransaction(req: Request, res: Response) {
+    try {
+      const transaction: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(req.params.txId, true);
+      res.setHeader('content-type', 'text/plain');
+      res.send(transaction.hex);
+    } catch (e) {
+      let statusCode = 500;
+      if (e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
+        statusCode = 404;
+      }
+      res.status(statusCode).send(e.message || e);
+    }
+  }
+
   public async getTransactionStatus(req: Request, res: Response) {
     try {
       const transaction = await transactionUtils.$getTransactionExtended(req.params.txId, true);
@@ -506,6 +520,16 @@ class Routes {
     }
   }
 
+  public async getBlockHeader(req: Request, res: Response) {
+    try {
+      const blockHeader = await bitcoinApi.$getBlockHeader(req.params.hash);
+      res.setHeader('content-type', 'text/plain');
+      res.send(blockHeader);
+    } catch (e) {
+      res.status(500).send(e.message || e);
+    }
+  }
+
   public async getBlocks(req: Request, res: Response) {
     try {
       loadingIndicators.setProgress('blocks', 0);
@@ -666,6 +690,60 @@ class Routes {
   public getTransactionOutspends(req: Request, res: Response) {
     res.status(501).send('Not implemented');
   }
+
+  public getDifficultyChange(req: Request, res: Response) {
+    try {
+      const DATime = blocks.getLastDifficultyAdjustmentTime();
+      const previousRetarget = blocks.getPreviousDifficultyRetarget();
+      const blockHeight = blocks.getCurrentBlockHeight();
+
+      const now = new Date().getTime() / 1000;
+      const diff = now - DATime;
+      const blocksInEpoch = blockHeight % 2016;
+      const progressPercent = (blocksInEpoch >= 0) ? blocksInEpoch / 2016 * 100 : 100;
+      const remainingBlocks = 2016 - blocksInEpoch;
+      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;
+      }
+
+      const timeAvgDiff = difficultyChange * 0.1;
+
+      let timeAvgMins = 10;
+      if (timeAvgDiff > 0) {
+        timeAvgMins -= Math.abs(timeAvgDiff);
+      } else {
+        timeAvgMins += Math.abs(timeAvgDiff);
+      }
+
+      const timeAvg = timeAvgMins * 60;
+      const remainingTime =  remainingBlocks * timeAvg;
+      const estimatedRetargetDate = remainingTime + now;
+      
+      const result = {
+        progressPercent,
+        difficultyChange,
+        estimatedRetargetDate,
+        remainingBlocks,
+        remainingTime,
+        previousRetarget,
+        nextRetargetHeight,
+        timeAvg,
+      }
+      res.json(result);
+
+    } catch (e) {
+      res.status(500).send(e.message || e);
+    }
+  }
 }
 
 export default new Routes();

docker/frontend/Dockerfile

@@ -2,6 +2,7 @@ FROM node:12-buster-slim AS builder
 
 ARG commitHash
 ENV DOCKER_COMMIT_HASH=${commitHash}
+ENV CYPRESS_INSTALL_BINARY=0
 
 WORKDIR /build
 COPY . .

frontend/.gitignore

@@ -59,3 +59,6 @@ generated-config.js
 cypress/videos
 cypress/screenshots
 
+# Base index
+src/index.html
+

frontend/angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -23,6 +26,10 @@
             "translation": "src/locale/messages.ar.xlf",
             "baseHref": "/ar/"
           },
+          "ca": {
+            "translation": "src/locale/messages.ca.xlf",
+            "baseHref": "/ca/"
+          },
           "cs": {
             "translation": "src/locale/messages.cs.xlf",
             "baseHref": "/cs/"
@@ -114,6 +121,10 @@
           "ru": {
             "translation": "src/locale/messages.ru.xlf",
             "baseHref": "/ru/"
+          },
+          "hi": {
+            "translation": "src/locale/messages.hi.xlf",
+            "baseHref": "/hi/"
           }
         }
       },
@@ -189,10 +200,10 @@
               "verbose": true
             },
             "local-prod": {
-              "proxyConfig": "proxy.prod.conf.json",
+              "proxyConfig": "proxy.conf.js",
               "disableHostCheck": true,
               "host": "0.0.0.0",
-              "verbose": true
+              "verbose": false
             }
           }
         },

frontend/cypress.json

@@ -1,9 +1,15 @@
 {
+  "projectId": "ry4br7",
   "integrationFolder": "cypress/integration",
   "supportFile": "cypress/support/index.ts",
   "videosFolder": "cypress/videos",
   "screenshotsFolder": "cypress/screenshots",
   "pluginsFile": "cypress/plugins/index.js",
   "fixturesFolder": "cypress/fixtures",
-  "baseUrl": "http://localhost:4200"
+  "baseUrl": "http://localhost:4200",
+  "video": false,
+  "retries": {
+    "runMode": 3,
+    "openMode": 0
+  }
 }

frontend/cypress/fixtures/mainnet_live2hchart.json

@@ -0,0 +1 @@
+{"live-2h-chart":{"id":1319298,"added":"2021-07-23T18:27:34.000Z","unconfirmed_transactions":546,"tx_per_second":3.93333,"vbytes_per_second":1926,"mempool_byte_weight":1106656,"total_fee":6198583,"vsizes":[255,18128,43701,58534,17144,5532,4483,1759,2394,1089,1683,7409,751,101010,1151,592,1497,703,1369,4747,800,1221,0,0,712,0,0,0,0,0,0,0,0,0,0,0,0,0]}}

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

@@ -1,5 +1,7 @@
 describe('Bisq', () => {
+    let baseModule;
     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');
@@ -10,42 +12,77 @@ describe('Bisq', () => {
         cy.intercept('/bisq/api/txs/*/*').as('txs');
         cy.intercept('/bisq/api/blocks/*/*').as('blocks');
         cy.intercept('/bisq/api/stats').as('stats');
-    });
-    it('loads the dashboard', () => {
-      cy.visit('/bisq');
-
-      cy.wait('@socket');
-      cy.wait('@hloc');
-      cy.wait('@ticker');
-      cy.wait('@markets');
-      cy.wait('@7d');
-      cy.wait('@trades');
+        
+        Cypress.Commands.add('waitForDashboard', () => {
+            cy.wait('@socket');
+            cy.wait('@hloc');
+            cy.wait('@ticker');
+            cy.wait('@markets');
+            cy.wait('@7d');
+            cy.wait('@trades');
+          });
     });
 
-    it('loads the transactions screen', () => {
-        cy.visit('/bisq');
-        cy.get('li:nth-of-type(2) > a').click().then(() => {
-            cy.wait('@txs');
+    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") !== 'liquid') {
+
+        it('loads the dashboard', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
         });
-    });
-    it('loads the blocks screen', () => {
-        cy.visit('/bisq');
-        cy.get('li:nth-of-type(3) > a').click().then(() => {
-            cy.wait('@blocks');
-        });
-    });
-    it('loads the stats screen', () => {
-        cy.visit('/bisq');
-        cy.get('li:nth-of-type(4) > a').click().then(() => {
-            cy.wait('@stats');
-        });
-    });
-
-    it('loads the api screen', () => {
-        cy.visit('/bisq');
-        cy.get('li:nth-of-type(5) > a').click().then(() => {
 
+        it('loads the transactions screen', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(2) > a').click().then(() => {
+                cy.get('.table > tr').should('have.length', 50);
+            });
         });
-    });
 
+        it('loads the blocks screen', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(3) > a').click().then(() => {
+                cy.wait('@blocks');
+                cy.get('tbody tr').should('have.length', 10);
+            });
+        });
+
+        it('loads the stats screen', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.wait('@stats');
+            });
+        });
+
+        it('loads the api screen', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(5) > a').click().then(() => {
+                cy.get('.card').should('have.length.at.least', 1);
+                cy.get('.card').first().click();
+                cy.get('.card-body');
+            });
+        });
+
+        it('shows blocks pagination with 5 pages (desktop)', () => {
+            cy.viewport(760, 800);
+            cy.visit(`${baseModule}/blocks`);
+            cy.waitForSkeletonGone();
+            cy.get('tbody tr').should('have.length', 10);
+            // 5 pages + 4 buttons = 9 buttons
+            cy.get('.pagination-container ul.pagination').first().children().should('have.length', 9);
+        });
+
+        it('shows blocks pagination with 3 pages (mobile)', () => {
+            cy.viewport(669, 800);
+            cy.visit(`${baseModule}/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");
+    }
   });

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

@@ -1,81 +1,147 @@
 describe('Liquid', () => {
+    let baseModule;
     beforeEach(() => {
-        // TODO: Fix ng serve to deliver these files
-        cy.fixture('assets.minimal').then((json) => {
-            cy.intercept('/resources/assets.minimal.json', json);
+        baseModule = (Cypress.env('BASE_MODULE') && Cypress.env('BASE_MODULE') === 'liquid') ? '' : '/liquid';
+
+        cy.intercept('/liquid/api/block/**').as('block');
+        cy.intercept('/liquid/api/blocks/').as('blocks');
+        cy.intercept('/liquid/api/tx/**/outspends').as('outspends');
+        cy.intercept('/liquid/api/block/**/txs/**').as('block-txs');
+        cy.intercept('/resources/pools.json').as('pools');
+
+        Cypress.Commands.add('waitForBlockData', () => {
+            cy.wait('@socket');
+            cy.wait('@block');
+            cy.wait('@outspends');
+          });
+    });
+
+    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") !== 'bisq') {
+
+        it('loads the dashboard', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
         });
 
-        cy.fixture('assets').then((json) => {
-            cy.intercept('/resources/assets.json', json);
+        it('loads the blocks page', () => {
+            cy.visit(`${baseModule}/blocks`);
+            cy.waitForSkeletonGone();
         });
-    });
 
-    it('loads the dashboard', () => {
-        cy.visit('/liquid');
-    });
-
-    it('loads the blocks page', () => {
-        cy.visit('/liquid/blocks');
-    });
-
-    it('loads a specific block page', () => {
-        cy.visit('/liquid/blocks');
-    });
-
-    it('loads the graphs page', () => {
-        cy.visit('/liquid/graphs');
-    });
-
-    it('loads the tv page - desktop', () => {
-        cy.visit('/liquid');
-        cy.get('li:nth-of-type(3) > a').click().then(() => {
-            cy.wait(1000);
+        it('loads a specific block page', () => {
+            cy.visit(`${baseModule}/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54`);
+            cy.waitForSkeletonGone();
         });
-    });
 
-    it('loads the graphs page - mobile', () => {
-        cy.visit('/liquid');
-        cy.get('li:nth-of-type(3) > a').click().then(() => {
-            cy.viewport('iphone-6');
-            cy.wait(1000);
-            // TODO: Should we really support TV Mode in Mobile for Bisq?
-            // cy.get('.tv-only').should('be.visible')
+        it('loads the graphs page', () => {
+            cy.visit(`${baseModule}/graphs`);
+            cy.waitForSkeletonGone();
         });
-    });
 
-    describe('assets', () => {
-      it('shows the assets screen', () => {
-        cy.visit('/liquid');
-        cy.get('li:nth-of-type(5) > a').click().then(() => {
-            cy.get('table tr').should('have.length', 5);
-        });
-      });
-
-      it('allows searching assets', () => {
-        cy.visit('/liquid');
-        cy.get('li:nth-of-type(5) > a').click().then(() => {
-            cy.get('.container-xl input').click().type('Liquid Bitcoin').then(() => {
-                cy.get('table tr').should('have.length', 1);
+        it('loads the tv page - desktop', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(3) > a').click().then(() => {
+                cy.wait(1000);
             });
         });
-      });
 
-      it('shows a specific asset ID', () => {
-        cy.visit('/liquid');
-        cy.get('li:nth-of-type(5) > a').click().then(() => {
-            cy.get('.container-xl input').click().type('Liquid CAD').then(() => {
-                cy.get('table tr td:nth-of-type(4) a').click();
+        it('loads the graphs page - mobile', () => {
+            cy.visit(`${baseModule}`)
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(3) > a').click().then(() => {
+                cy.viewport('iphone-6');
+                cy.wait(1000);
+                cy.get('.tv-only').should('not.exist');
             });
         });
-      });
 
-      it('shows a specific asset issuance TX', () => {
-        cy.visit('/liquid');
-        cy.get('li:nth-of-type(5) > a').click().then(() => {
-            cy.get('.container-xl input').click().type('Liquid CAD').then(() => {
-                cy.get('table tr td:nth-of-type(5) a').click();
+        describe('assets', () => {
+            it('shows the assets screen', () => {
+                cy.visit(`${baseModule}/assets`);
+                cy.waitForSkeletonGone();
+                cy.get('table tr').should('have.length.at.least', 5);
+            });
+
+            it('allows searching assets', () => {
+                cy.visit(`${baseModule}/assets`);
+                cy.waitForSkeletonGone();
+                cy.get('.container-xl input').click().type('Liquid Bitcoin').then(() => {
+                    cy.get('table tr').should('have.length', 1);
+                });
+            });
+
+            it('shows a specific asset ID', () => {
+                cy.visit(`${baseModule}/assets`);
+                cy.waitForSkeletonGone();
+                cy.get('.container-xl input').click().type('Liquid AUD').then(() => {
+                    cy.get('table tr td:nth-of-type(1) a').click();
+                });
             });
         });
-      });
-    });
+
+
+        describe('unblinded TX', () => {
+
+            it('should not show an unblinding error message for regular txs', () => {
+                cy.visit(`${baseModule}/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.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.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.waitForSkeletonGone();
+                cy.get('#table-tx-vin tr').should('have.class', '');
+                cy.get('#table-tx-vout tr').should('have.class', '');
+                cy.get('.error-unblinded' ).contains('Error: Invalid blinding data (invalid hex)');
+            });
+
+            it('show first unblinded vout', () => {
+                cy.visit(`${baseModule}/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.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.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.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.waitForSkeletonGone();
+            });
+        });
+    } else {
+        it.skip("Tests cannot be run on the selected BASE_MODULE");
+    }
 });

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

@@ -1,98 +1,323 @@
+import { emitMempoolInfo, dropWebSocket } from "../../support/websocket";
+
 describe('Mainnet', () => {
     beforeEach(() => {
+        //cy.intercept('/sockjs-node/info*').as('socket');
         cy.intercept('/api/block-height/*').as('block-height');
         cy.intercept('/api/block/*').as('block');
         cy.intercept('/api/block/*/txs/0').as('block-txs');
         cy.intercept('/api/tx/*/outspends').as('tx-outspends');
+        cy.intercept('/resources/pools.json').as('pools');
 
-        // TODO: Fix ng serve to deliver this file
-        cy.fixture('pools').then((json) => {
-            cy.intercept('/resources/pools.json', json);
-        });
-    });
-
-    it('loads the dashboard', () => {
-      cy.visit('/');
-      cy.wait(1000);
-    });
-
-    it('loads the blocks screen', () => {
-        cy.visit('/');
-        cy.get('li:nth-of-type(2) > a').click().then(() => {
-           cy.wait(1000);
-        });
-    });
-
-    it('loads the graphs screen', () => {
-        cy.visit('/');
-        cy.get('li:nth-of-type(3) > a').click().then(() => {
-            cy.wait(1000);
-        });
-    });
-
-    describe('tv mode', () => {
-        it('loads the tv screen - desktop', () => {
-            cy.viewport('macbook-16');
-            cy.visit('/');
-            cy.get('li:nth-of-type(4) > a').click().then(() => {
-                cy.viewport('macbook-16');
-                cy.wait(1000);
-                cy.get('.blockchain-wrapper').should('be.visible');
-            });
-        });
-
-        it('loads the tv screen - mobile', () => {
-            cy.visit('/');
-            cy.get('li:nth-of-type(4) > a').click().then(() => {
-                cy.viewport('iphone-6');
-                cy.wait(1000);
-                cy.get('.blockchain-wrapper').should('not.be.visible');
-            });
-        });
-    });
-
-
-    it('loads the api screen', () => {
-        cy.visit('/');
-        cy.get('li:nth-of-type(5) > a').click().then(() => {
-            cy.wait(1000);
-        });
-    });
-
-    describe('blocks', () => {
-        it('shows empty blocks properly', () => {
-            cy.visit('/block/0000000000000000000bd14f744ef2e006e61c32214670de7eb891a5732ee775');
-            cy.get('h2').invoke('text').should('equal', '1 transaction');
-        });
-
-        it('expands and collapses the block details', () => {
-            cy.visit('/block/0');
+        Cypress.Commands.add('waitForBlockData', () => {
             cy.wait('@tx-outspends');
-            cy.get('.btn.btn-outline-info').click().then(() => {
-                cy.get('#details').should('be.visible');
-            });
+            cy.wait('@pools');
+        });
+    });
 
-            cy.get('.btn.btn-outline-info').click().then(() => {
-                cy.get('#details').should('not.be.visible');
+    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+
+        it('loads the status screen', () => {
+            cy.visit('/status');
+            cy.get('#mempool-block-0').should('be.visible');
+            cy.get('[id^="bitcoin-block-"]').should('have.length', 8);
+            cy.get('.footer').should('be.visible');
+            cy.get('.row > :nth-child(1)').invoke('text').then((text) => {
+                expect(text).to.match(/Tx vBytes per second:.* vB\/s/);
+            });
+            cy.get('.row > :nth-child(2)').invoke('text').then((text) => {
+                expect(text).to.match(/Unconfirmed:(.*)/);
+            });
+            cy.get('.row > :nth-child(3)').invoke('text').then((text) => {
+                expect(text).to.match(/Mempool size:(.*) (kB|MB) \((\d+) (block|blocks)\)/);
             });
         });
 
-        it('shows blocks with no pagination', () => {
-            cy.visit('/block/00000000000000000001ba40caf1ad4cec0ceb77692662315c151953bfd7c4c4');
-            cy.get('h2').invoke('text').should('equal', '19 transactions');
-            cy.get('ul.pagination').first().children().should('have.length', 5);
+        it('loads dashboard, drop websocket and reconnect', () => {
+            cy.viewport('macbook-16');
+            cy.mockMempoolSocket();
+            cy.visit('/');
+            cy.get('.badge').should('not.exist');
+            dropWebSocket();
+            cy.get('.badge').should('be.visible');
+            cy.get('.badge', {timeout: 25000}).should('not.exist');
+            emitMempoolInfo({
+                'params': {
+                loaded: true
+                }
+            });
+            cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
+            cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
+            cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');
         });
 
-        it('supports pagination on the block screen', () => {
-            // 41 txs
-            cy.visit('/block/00000000000000000009f9b7b0f63ad50053ad12ec3b7f5ca951332f134f83d8');
-            cy.get('.header-bg.box > a').invoke('text').then((text1) => {
-                cy.get('.active + li').first().click().then(() => {
-                    cy.get('.header-bg.box > a').invoke('text').then((text2) => {
-                        expect(text1).not.to.eq(text2);
+        it('loads the dashboard', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+        });
+
+        describe('blocks navigation', () => {
+
+            describe('keyboard events', () => {
+                it('loads first blockchain blocks visible and keypress arrow right', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/');
+                    cy.waitForSkeletonGone();
+                    cy.get('.blockchain-blocks-0 > a').click().then(() => {
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.waitForPageIdle();
+                        cy.document().right();
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    });
+                });
+
+                it('loads first blockchain blocks visible and keypress arrow left', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/');
+                    cy.waitForSkeletonGone();
+                    cy.get('.blockchain-blocks-0 > a').click().then(() => {
+                        cy.waitForPageIdle();
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.document().left();
+                        cy.get('.title-block h1').invoke('text').should('equal', 'Next block');
+                    });
+                });
+
+                it('loads last blockchain blocks and keypress arrow right', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/');
+                    cy.waitForSkeletonGone();
+                    cy.get('.blockchain-blocks-4 > a').click().then(() => {
+                        cy.waitForPageIdle();
+
+                        // block 6
+                        cy.document().right();
+                        cy.wait(5000);
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+
+                        // block 7
+                        cy.document().right();
+                        cy.wait(5000);
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+
+                        // block 8 - last visible block
+                        cy.document().right();
+                        cy.wait(5000);
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+
+                        // block 9 - not visible at the blochchain blocks visible block
+                        cy.document().right();
+                        cy.wait(5000);
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+
+                    });
+                });
+
+                it('loads genesis block and keypress arrow right', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/block/0');
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+
+                    cy.document().right();
+                    cy.wait(5000);
+                    cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                });
+
+                it('loads genesis block and keypress arrow left', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/block/0');
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+
+                    cy.document().left();
+                    cy.wait(5000);
+                    cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                });
+            });
+            describe('mouse events', () => {
+                it('loads first blockchain blocks visible and click on the arrow right', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/');
+                    cy.waitForSkeletonGone();
+                    cy.get('.blockchain-blocks-0 > a').click().then(() => {
+                        cy.waitForPageIdle();
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').click().then(() => {
+                            cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                            cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        });
+                    });
+                });
+
+                it('loads genesis block and click on the arrow left', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/block/0');
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+                    cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                    cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').click().then(() => {
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
                     });
                 });
             });
         });
-    });
+
+
+        it('loads skeleton when changes between networks', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+
+            cy.changeNetwork("testnet");
+            cy.changeNetwork("signet");
+            cy.changeNetwork("liquid");
+            cy.changeNetwork("mainnet");
+            cy.changeNetwork("bisq");
+        });
+
+        it('loads the dashboard with the skeleton blocks', () => {
+            cy.mockMempoolSocket();
+            cy.visit("/");
+            cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
+            cy.get(':nth-child(2) > #bitcoin-block-0').should('be.visible');
+            cy.get(':nth-child(3) > #bitcoin-block-0').should('be.visible');
+            cy.get('#mempool-block-0').should('be.visible');
+            cy.get('#mempool-block-1').should('be.visible');
+            cy.get('#mempool-block-2').should('be.visible');
+
+            emitMempoolInfo({
+                'params': {
+                loaded: true
+                }
+            });
+
+            cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
+            cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
+            cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');
+        });
+
+        it('loads the blocks screen', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(2) > a').click().then(() => {
+                cy.waitForPageIdle();
+            });
+        });
+
+        it('loads the graphs screen', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(3) > a').click().then(() => {
+                cy.wait(1000);
+            });
+        });
+
+        it('loads the tv screen - desktop', () => {
+            cy.viewport('macbook-16');
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.viewport('macbook-16');
+                cy.get('.chart-holder');
+                cy.get('.blockchain-wrapper').should('be.visible');
+                cy.get('#mempool-block-0').should('be.visible');
+            });
+        });
+
+        it('loads the tv screen - mobile', () => {
+            cy.viewport('iphone-6');
+            cy.visit('/tv');
+            cy.waitForSkeletonGone();
+            cy.get('.chart-holder');
+            cy.get('.blockchain-wrapper').should('be.visible');
+        });
+
+        it('loads the api screen', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(5) > a').click().then(() => {
+                cy.wait(1000);
+            });
+        });
+
+        describe('blocks', () => {
+            it('shows empty blocks properly', () => {
+                cy.visit('/block/0000000000000000000bd14f744ef2e006e61c32214670de7eb891a5732ee775');
+                cy.waitForSkeletonGone();
+                cy.waitForPageIdle();
+                cy.get('h2').invoke('text').should('equal', '1 transaction');
+            });
+
+            it('expands and collapses the block details', () => {
+                cy.visit('/block/0');
+                cy.waitForSkeletonGone();
+                cy.waitForPageIdle();
+                cy.get('.btn.btn-outline-info').click().then(() => {
+                    cy.get('#details').should('be.visible');
+                });
+
+                cy.get('.btn.btn-outline-info').click().then(() => {
+                    cy.get('#details').should('not.be.visible');
+                });
+            });
+            it('shows blocks with no pagination', () => {
+                cy.visit('/block/00000000000000000001ba40caf1ad4cec0ceb77692662315c151953bfd7c4c4');
+                cy.waitForSkeletonGone();
+                cy.waitForPageIdle();
+                cy.get('.block-tx-title h2').invoke('text').should('equal', '19 transactions');
+                cy.get('.pagination-container ul.pagination').first().children().should('have.length', 5);
+            });
+
+            it('supports pagination on the block screen', () => {
+                // 41 txs
+                cy.visit('/block/00000000000000000009f9b7b0f63ad50053ad12ec3b7f5ca951332f134f83d8');
+                cy.waitForSkeletonGone();
+                cy.get('.pagination-container a').invoke('text').then((text1) => {
+                    cy.get('.active + li').first().click().then(() => {
+                        cy.waitForSkeletonGone();
+                        cy.waitForPageIdle();
+                        cy.get('.header-bg.box > a').invoke('text').then((text2) => {
+                            expect(text1).not.to.eq(text2);
+                        });
+                    });
+                });
+            });
+
+            it('shows blocks pagination with 5 pages (desktop)', () => {
+                cy.viewport(760, 800);
+                cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3').then(() => {
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+                });
+
+                // 5 pages + 4 buttons = 9 buttons
+                cy.get('.pagination-container ul.pagination').first().children().should('have.length', 9);
+            });
+
+            it('shows blocks pagination with 3 pages (mobile)', () => {
+                cy.viewport(669, 800);
+                cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3').then(() => {
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+                });
+
+                // 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");
+    }
 });

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

@@ -1,10 +1,131 @@
+import { emitMempoolInfo } from "../../support/websocket";
+
 describe('Signet', () => {
-    it('loads the dashboard', () => {
-      cy.visit('/signet');
-    });
-
-    it.skip('loads all the pages properly', () => {
-
-    });
-
+  beforeEach(() => {
+    cy.intercept('/api/block-height/*').as('block-height');
+    cy.intercept('/api/block/*').as('block');
+    cy.intercept('/api/block/*/txs/0').as('block-txs');
+    cy.intercept('/api/tx/*/outspends').as('tx-outspends');
+  });
+
+
+  if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+    it('loads the dashboard', () => {
+        cy.visit('/signet');
+        cy.waitForSkeletonGone();
+    });
+
+    it('loads the dashboard with the skeleton blocks', () => {
+        cy.mockMempoolSocket();
+        cy.visit("/signet");
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('be.visible');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('be.visible');
+        cy.get('#mempool-block-0').should('be.visible');
+        cy.get('#mempool-block-1').should('be.visible');
+        cy.get('#mempool-block-2').should('be.visible');
+
+        emitMempoolInfo({
+            'params': {
+            "network": "signet"
+            }
+        });
+
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');
+    });
+
+    it('loads the blocks screen', () => {
+        cy.visit('/signet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(2) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    it('loads the graphs screen', () => {
+        cy.visit('/signet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(3) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    describe('tv mode', () => {
+        it('loads the tv screen - desktop', () => {
+            cy.viewport('macbook-16');
+            cy.visit('/signet');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.get('.chart-holder').should('be.visible');
+                cy.get('#mempool-block-0').should('be.visible');
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+
+        it('loads the tv screen - mobile', () => {
+            cy.visit('/signet');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.viewport('iphone-8');
+                cy.get('.chart-holder').should('be.visible');
+                //TODO: Remove comment when the bug is fixed
+                //cy.get('#mempool-block-0').should('be.visible');
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+    });
+
+
+    it('loads the api screen', () => {
+        cy.visit('/signet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(5) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    describe('blocks', () => {
+        it('shows empty blocks properly', () => {
+            cy.visit('/signet/block/00000133d54e4589f6436703b067ec23209e0a21b8a9b12f57d0592fd85f7a42');
+            cy.waitForSkeletonGone();
+            cy.get('h2').invoke('text').should('equal', '1 transaction');
+        });
+
+        it('expands and collapses the block details', () => {
+            cy.visit('/signet/block/0');
+            cy.waitForSkeletonGone();
+            cy.get('.btn.btn-outline-info').click().then(() => {
+                cy.get('#details').should('be.visible');
+            });
+
+            cy.get('.btn.btn-outline-info').click().then(() => {
+                cy.get('#details').should('not.be.visible');
+            });
+        });
+
+        it('shows blocks with no pagination', () => {
+            cy.visit('/signet/block/00000078f920a96a69089877b934ce7fd009ab55e3170920a021262cb258e7cc');
+            cy.waitForSkeletonGone();
+            cy.get('h2').invoke('text').should('equal', '13 transactions');
+            cy.get('ul.pagination').first().children().should('have.length', 5);
+        });
+
+        it('supports pagination on the block screen', () => {
+            // 43 txs
+            cy.visit('/signet/block/00000094bd52f73bdbfc4bece3a94c21fec2dc968cd54210496e69e4059d66a6');
+            cy.waitForSkeletonGone();
+            cy.get('.header-bg.box > a').invoke('text').then((text1) => {
+                cy.get('.active + li').first().click().then(() => {
+                    cy.get('.header-bg.box > a').invoke('text').then((text2) => {
+                        expect(text1).not.to.eq(text2);
+                    });
+                });
+            });
+        });
+    });
+    } else {
+        it.skip("Tests cannot be run on the selected BASE_MODULE");
+    }
   });

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

@@ -1,9 +1,128 @@
+import { confirmAddress, emitMempoolInfo, sendWsMock, showNewTx, startTrackingAddress } from "../../support/websocket";
+
 describe('Testnet', () => {
-    it('loads the dashboard', () => {
-      cy.visit('/testnet');
-    });
-
-    it.skip('loads all the pages properly', () => {
-
-    });
+  beforeEach(() => {
+    cy.intercept('/api/block-height/*').as('block-height');
+    cy.intercept('/api/block/*').as('block');
+    cy.intercept('/api/block/*/txs/0').as('block-txs');
+    cy.intercept('/api/tx/*/outspends').as('tx-outspends');
+  });
+
+  if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+
+    it('loads the dashboard', () => {
+        cy.visit('/testnet');
+        cy.waitForSkeletonGone();
+    });
+
+    it('loads the dashboard with the skeleton blocks', () => {
+        cy.mockMempoolSocket();
+        cy.visit("/testnet");
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('be.visible');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('be.visible');
+        cy.get('#mempool-block-0').should('be.visible');
+        cy.get('#mempool-block-1').should('be.visible');
+        cy.get('#mempool-block-2').should('be.visible');
+
+        emitMempoolInfo({
+            'params': {
+            loaded: true
+            }
+        });
+
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');
+    });
+
+    it('loads the blocks screen', () => {
+        cy.visit('/testnet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(2) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    it('loads the graphs screen', () => {
+        cy.visit('/testnet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(3) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    describe('tv mode', () => {
+        it('loads the tv screen - desktop', () => {
+            cy.viewport('macbook-16');
+            cy.visit('/testnet');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.wait(1000);
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+
+        it('loads the tv screen - mobile', () => {
+            cy.visit('/testnet');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.viewport('iphone-6');
+                cy.wait(1000);
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+    });
+
+
+    it('loads the api screen', () => {
+        cy.visit('/testnet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(5) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    describe('blocks', () => {
+        it('shows empty blocks properly', () => {
+            cy.visit('/testnet/block/0');
+            cy.waitForSkeletonGone();
+            cy.get('h2').invoke('text').should('equal', '1 transaction');
+        });
+
+        it('expands and collapses the block details', () => {
+            cy.visit('/testnet/block/0');
+            cy.waitForSkeletonGone();
+            cy.get('.btn.btn-outline-info').click().then(() => {
+                cy.get('#details').should('be.visible');
+            });
+
+            cy.get('.btn.btn-outline-info').click().then(() => {
+                cy.get('#details').should('not.be.visible');
+            });
+        });
+
+        it('shows blocks with no pagination', () => {
+            cy.visit('/testnet/block/000000000000002f8ce27716e74ecc7ad9f7b5101fed12d09e28bb721b9460ea');
+            cy.waitForSkeletonGone();
+            cy.get('h2').invoke('text').should('equal', '11 transactions');
+            cy.get('ul.pagination').first().children().should('have.length', 5);
+        });
+
+        it('supports pagination on the block screen', () => {
+            // 48 txs
+            cy.visit('/testnet/block/000000000000002ca3878ebd98b313a1c2d531f2e70a6575d232ca7564dea7a9');
+            cy.waitForSkeletonGone();
+            cy.get('.header-bg.box > a').invoke('text').then((text1) => {
+                cy.get('.active + li').first().click().then(() => {
+                    cy.get('.header-bg.box > a').invoke('text').then((text2) => {
+                        expect(text1).not.to.eq(text2);
+                    });
+                });
+            });
+        });
+    });
+    } else {
+        it.skip("Tests cannot be run on the selected BASE_MODULE");
+    }
   });

frontend/cypress/support/PageIdleDetector.ts

@@ -0,0 +1,63 @@
+// source: chrisp_68 @ https://stackoverflow.com/questions/50525143/how-do-you-reliably-wait-for-page-idle-in-cypress-io-test
+export class PageIdleDetector
+{   
+    defaultOptions: Object = { timeout: 60000 };
+
+    public WaitForPageToBeIdle(): void
+    {
+        this.WaitForPageToLoad();
+        this.WaitForAngularRequestsToComplete();
+        this.WaitForAngularDigestCycleToComplete();
+        this.WaitForAnimationsToStop();
+    }
+
+    public WaitForPageToLoad(options: Object = this.defaultOptions): void
+    {
+        cy.document(options).should((myDocument: any) =>
+        {
+            expect(myDocument.readyState, "WaitForPageToLoad").to.be.oneOf(["interactive", "complete"]);
+        });
+    }
+
+    public WaitForAngularRequestsToComplete(options: Object = this.defaultOptions): void
+    {
+        cy.window(options).should((myWindow: any) =>
+        {
+            if (!!myWindow.angular)
+            {
+                expect(this.NumberOfPendingAngularRequests(myWindow), "WaitForAngularRequestsToComplete").to.have.length(0);
+            }
+        });
+    }
+
+    public WaitForAngularDigestCycleToComplete(options: Object = this.defaultOptions): void
+    {
+        cy.window(options).should((myWindow: any) =>
+        {
+            if (!!myWindow.angular)
+            {
+                expect(this.AngularRootScopePhase(myWindow), "WaitForAngularDigestCycleToComplete").to.be.null;
+            }
+        });
+    }
+
+    public WaitForAnimationsToStop(options: Object = this.defaultOptions): void
+    {
+        cy.get(":animated", options).should("not.exist");
+    }
+
+    private getInjector(myWindow: any)
+    {
+        return myWindow.angular.element(myWindow.document.body).injector();
+    }
+
+    private NumberOfPendingAngularRequests(myWindow: any)
+    {
+        return this.getInjector(myWindow).get('$http').pendingRequests;
+    }
+
+    private AngularRootScopePhase(myWindow: any)
+    {
+        return this.getInjector(myWindow).get("$rootScope").$$phase;
+    }
+}

frontend/cypress/support/commands.ts

@@ -42,4 +42,106 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
+'use strict'
+
 import 'cypress-wait-until';
+import { PageIdleDetector } from './PageIdleDetector';
+import { mockWebSocket } from './websocket';
+
+/* global Cypress */
+const codes = {
+    ArrowLeft: 37,
+    ArrowUp: 38,
+    ArrowRight: 39,
+    ArrowDown: 40
+}
+
+Cypress.Commands.add('waitForSkeletonGone', () => {
+    cy.waitUntil(() => {
+        return Cypress.$('.skeleton-loader').length === 0;
+    }, { verbose: true, description: "waitForSkeletonGone", errorMsg: "skeleton loaders never went away", timeout: 7000, interval: 50});
+});
+
+Cypress.Commands.add(
+    "waitForPageIdle",
+    () => {
+        console.warn("Waiting for page idle state");
+        const pageIdleDetector = new PageIdleDetector();
+        pageIdleDetector.WaitForPageToBeIdle();
+    }
+);
+
+Cypress.Commands.add('mockMempoolSocket', () => {
+  mockWebSocket();
+});
+
+Cypress.Commands.add('changeNetwork', (network: "testnet"|"signet"|"liquid"|"bisq"|"mainnet" ) => {
+    cy.get('.dropdown-toggle').click().then(() => {
+        cy.get(`.${network}`).click().then(() => {
+            cy.waitForPageIdle();
+            if(network !== 'bisq'){
+                cy.waitForSkeletonGone();
+            }
+        });
+    });
+});
+
+// https://github.com/bahmutov/cypress-arrows/blob/8f0303842a343550fbeaf01528d01d1ff213b70c/src/index.js
+function keydownCommand ($el, key) {
+    const message = `sending the "${key}" keydown event`
+    const log = Cypress.log({
+      name: `keydown: ${key}`,
+      message: message,
+      consoleProps: function () {
+        return {
+          Subject: $el
+        }
+      }
+    })
+  
+    const e = $el.createEvent('KeyboardEvent')
+  
+    Object.defineProperty(e, 'key', {
+      get: function () {
+        return key
+      }
+    })
+  
+    Object.defineProperty(e, 'keyCode', {
+      get: function () {
+        return this.keyCodeVal
+      }
+    })
+    Object.defineProperty(e, 'which', {
+      get: function () {
+        return this.keyCodeVal
+      }
+    })
+    var metaKey = false
+  
+    Object.defineProperty(e, 'metaKey', {
+      get: function () {
+        return metaKey
+      }
+    })
+  
+    Object.defineProperty(e, 'shiftKey', {
+      get: function () {
+        return false
+      }
+    })
+    e.keyCodeVal = codes[key]
+  
+    e.initKeyboardEvent('keydown', true, true,
+      $el.defaultView, false, false, false, false, e.keyCodeVal, e.keyCodeVal)
+  
+    $el.dispatchEvent(e)
+    log.snapshot().end()
+    return $el
+  }
+  
+  Cypress.Commands.add('keydown', { prevSubject: "dom" }, keydownCommand)
+  Cypress.Commands.add('left', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowLeft'))
+  Cypress.Commands.add('right', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowRight'))
+  Cypress.Commands.add('up', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowUp'))
+  Cypress.Commands.add('down', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowDown'))

frontend/cypress/support/index.d.ts

@@ -0,0 +1,10 @@
+
+/// <reference types="cypress" />
+declare namespace Cypress {
+    interface Chainable<Subject> {
+        waitForSkeletonGone(): Chainable<any>
+        waitForPageIdle(): Chainable<any>
+        mockMempoolSocket(): Chainable<any>
+        changeNetwork(network: "testnet"|"signet"|"liquid"|"bisq"|"mainnet"): Chainable<any>
+    }
+}

frontend/cypress/support/index.ts

@@ -15,3 +15,6 @@
 
 // When a command from ./commands is ready to use, import with `import './commands'` syntax
 import './commands';
+import failOnConsoleError from 'cypress-fail-on-console-error';
+
+failOnConsoleError();

frontend/cypress/support/websocket.ts

@@ -0,0 +1,92 @@
+import { v4 as uuid } from 'uuid';
+import { WebSocket, Server } from 'mock-socket';
+
+declare global {
+	interface Window {
+		mockServer: Server;
+		mockSocket: WebSocket;
+	}
+}
+
+const mocks: { [key: string]: { server: Server; websocket: WebSocket } } = {};
+
+const cleanupMock = (url: string) => {
+	if (mocks[url]) {
+		mocks[url].websocket.close();
+		mocks[url].server.stop();
+		delete mocks[url];
+	}
+};
+
+const createMock = (url: string) => {
+	cleanupMock(url);
+	const server = new Server(url);
+	const websocket = new WebSocket(url);
+	mocks[url] = { server, websocket };
+
+	return mocks[url];
+};
+
+export const mockWebSocket = () => {
+	cy.on('window:before:load', (win) => {
+		const winWebSocket = win.WebSocket;
+		cy.stub(win, 'WebSocket').callsFake((url) => {
+            console.log(url);
+			if ((new URL(url).pathname.indexOf('/sockjs-node/') !== 0)) {
+				const { server, websocket } = createMock(url);
+
+				win.mockServer = server;
+				win.mockServer.on('connection', (socket) => {
+					win.mockSocket = socket;
+                    win.mockSocket.send('{"action":"init"}');
+				});
+
+                win.mockServer.on('message', (message) => {
+                    console.log(message);
+                });
+
+				return websocket;
+			} else {
+				return new winWebSocket(url);
+			}
+		});
+	});
+
+	cy.on('window:before:unload', () => {
+		for (const url in mocks) {
+			cleanupMock(url);
+		}
+	});
+};
+
+export const emitMempoolInfo = ({
+	params
+}: { params?: any } = {}) => {
+	cy.window().then((win) => {
+		//TODO: Refactor to take into account different parameterized mocking scenarios
+		switch (params.network) {
+			//TODO: Use network specific mocks
+			case "signet":
+			case "testnet":
+			default:
+				win.mockSocket.send('{"action":"init"}');
+				win.mockSocket.send('{"action":"want","data":["blocks","stats","mempool-blocks","live-2h-chart"]}');
+				win.mockSocket.send('{"conversions":{"USD":32365.338815782445}}');
+				cy.readFile('cypress/fixtures/mainnet_live2hchart.json', 'ascii').then((fixture) => {
+					win.mockSocket.send(JSON.stringify(fixture));
+				});
+				cy.readFile('cypress/fixtures/mainnet_mempoolInfo.json', 'ascii').then((fixture) => {
+					win.mockSocket.send(JSON.stringify(fixture));
+				});
+		}
+	});
+    cy.waitForSkeletonGone();
+    return cy.get('#mempool-block-0');
+};
+
+export const dropWebSocket = (() => {
+    cy.window().then((win) => {
+        win.mockServer.simulate("error");
+    });
+    return cy.wait(500);
+});

frontend/cypress/tsconfig.json

@@ -2,7 +2,9 @@
   "extends": "../tsconfig.json",
   "include": ["**/*.ts"],
   "compilerOptions": {
-    "sourceMap": false,
-    "types": ["cypress"]
+    "types": ["cypress"],
+    "lib": ["es2015", "dom"],
+    "allowJs": true,
+    "noEmit": true,
   }
 }

frontend/generate-config.js

@@ -21,6 +21,16 @@ try {
   }
 }
 
+const indexFilePath = configContent.BASE_MODULE ? 'src/index.' + configContent.BASE_MODULE + '.html' : 'src/index.mempool.html';
+
+try {
+  fs.copyFileSync(indexFilePath, 'src/index.html');
+  console.log('Copied ' + indexFilePath + ' to src/index.html');
+} catch (e) {
+  console.log('Error copying the index file');
+  throw new Error(e);
+}
+
 try {
   const packageJson = fs.readFileSync('package.json');
   packetJsonVersion = JSON.parse(packageJson).version;

frontend/mempool-frontend-config.sample.json

@@ -8,5 +8,8 @@
   "KEEP_BLOCKS_AMOUNT": 8,
   "NGINX_PROTOCOL": "http",
   "NGINX_HOSTNAME": "127.0.0.1",
-  "NGINX_PORT": "80"
+  "NGINX_PORT": "80",
+  "MEMPOOL_BLOCKS_AMOUNT": 8,
+  "BLOCK_WEIGHT_UNITS": 4000000,
+  "BASE_MODULE": "mempool"
 }

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-frontend",
-  "version": "2.2.0",
+  "version": "2.2.2-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 xi18n --ivy --out-file ./src/locale/messages.xlf",
+    "i18n-extract-from-source": "./node_modules/@angular/cli/bin/ng extract-i18n --ivy --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",
@@ -37,13 +37,20 @@
     "build-mempool.js": "tsc | browserify -p tinyify ./node_modules/@mempool/mempool.js/lib/index.js --standalone mempoolJS > ./dist/mempool/browser/en-US/mempool.js",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e",
+    "e2e": "npm run generate-config && ng e2e",
+    "e2e:ci": "npm run cypress:run:ci",
+    "config:defaults:mempool": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=mempool && npm run generate-config",
+    "config:defaults:liquid": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=liquid && npm run generate-config",
+    "config:defaults:bisq": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=bisq && npm run generate-config",
     "dev:ssr": "npm run generate-config && ng run mempool:serve-ssr",
     "serve:ssr": "node server.run.js",
     "build:ssr": "npm run build && ng run mempool:server:production && ./node_modules/typescript/bin/tsc server.run.ts",
     "prerender": "ng run mempool:prerender",
-    "cypress:open": "concurrently \"ng serve -c local-prod\" \"cypress open\" --kill-others",
-    "cypress:run": "concurrently \"ng serve -c local-prod\" \"cypress run\" --kill-others"
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "cypress:run:record": "cypress run --record",
+    "cypress:open:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:open",
+    "cypress:run:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true 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",
@@ -61,7 +68,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@mempool/chartist": "^0.11.4",
-    "@mempool/mempool.js": "^2.2.2",
+    "@mempool/mempool.js": "^2.2.4",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "@nguniversal/express-engine": "11.2.1",
     "@types/qrcode": "^1.3.4",
@@ -85,15 +92,12 @@
     "@angular/cli": "~11.2.7",
     "@angular/compiler-cli": "~11.2.8",
     "@angular/language-service": "~11.2.8",
-    "@cypress/schematic": "^1.3.0",
     "@nguniversal/builders": "^11.2.1",
     "@types/express": "^4.17.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.1",
-    "concurrently": "^6.2.0",
-    "cypress-wait-until": "^1.7.1",
     "http-proxy-middleware": "^1.0.5",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -107,6 +111,11 @@
     "typescript": "~4.1.5"
   },
   "optionalDependencies": {
-    "cypress": "^7.4.0"
+    "@cypress/schematic": "^1.3.0",
+    "cypress": "^7.7.0",
+    "cypress-fail-on-console-error": "^2.1.0",
+    "cypress-wait-until": "^1.7.1",
+    "mock-socket": "^9.0.3",
+    "start-server-and-test": "^1.12.6"
   }
 }

frontend/proxy.conf.js

@@ -0,0 +1,64 @@
+const fs = require('fs');
+
+let PROXY_CONFIG;
+let configContent;
+
+const CONFIG_FILE_NAME = 'mempool-frontend-config.json';
+
+try {
+    const rawConfig = fs.readFileSync(CONFIG_FILE_NAME);
+    configContent = JSON.parse(rawConfig);
+    console.log(`${CONFIG_FILE_NAME} file found, using provided config`);
+} catch (e) {
+    console.log(e);
+    if (e.code !== 'ENOENT') {
+      throw new Error(e);
+  } else {
+      console.log(`${CONFIG_FILE_NAME} file not found, using default config`);
+      
+  }
+}
+
+PROXY_CONFIG = [
+    {
+        context: ['*', 
+        '/api/**', '!/api/v1/ws', 
+        '!/bisq', '!/bisq/**', '!/bisq/',
+        '!/liquid', '!/liquid/**', '!/liquid/',
+        '/testnet/api/**', '/signet/api/**'
+        ],
+        target: "https://mempool.space",
+        ws: true,
+        secure: false,
+        changeOrigin: true
+    },
+    {
+        context: ['/api/v1/ws'],
+        target: "https://mempool.space",
+        ws: true,
+        secure: false,
+        changeOrigin: true,
+    },
+    {
+        context: ['/api/bisq**', '/bisq/api/**'],
+        target: "https://bisq.markets",
+        pathRewrite: {
+            "^/api/bisq/": "/bisq/api"
+        },
+        ws: true,
+        secure: false,
+        changeOrigin: true
+    },
+    {
+        context: ['/api/liquid**', '/liquid/api/**'],
+        target: "https://liquid.network",
+        pathRewrite: {
+            "^/api/liquid/": "/liquid/api"
+        },
+        ws: true,
+        secure: false,
+        changeOrigin: true
+    }
+];
+
+module.exports = PROXY_CONFIG;

frontend/proxy.conf.json

@@ -67,11 +67,18 @@
       "^/liquid/api": "/api/v1/ws"
     }
   },
-  "/liquid/api/": {
-    "target": "http://localhost:50001/",
+  "/liquid/api/v1/": {
+    "target": "http://localhost:8999/",
     "secure": false,
     "pathRewrite": {
-      "^/liquid/api/": ""
+      "^/liquid/api/": "/api/"
+    }
+  },
+  "/liquid/api/": {
+    "target": "http://localhost:8999/",
+    "secure": false,
+    "pathRewrite": {
+      "^/liquid/api/": "/api/v1/"
     }
   },
   "/bisq/api/": {

frontend/proxy.prod.conf.json

@@ -4,14 +4,11 @@
     "secure": false,
     "ws": true
   },
-  "/api/*": {
+  "/api": {
     "target": "https://mempool.space",
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug",
-    "pathRewrite": {
-      "^/api": "https://mempool.space/api"
-    },
     "timeout": 3600000
   },
   "/testnet/api/v1/ws": {
@@ -23,7 +20,7 @@
       "^/testnet/api": "/api/v1/ws"
     }
   },
-  "/testnet/api/*": {
+  "/testnet/api": {
     "target": "https://mempool.space",
     "secure": true,
     "changeOrigin": true,
@@ -42,7 +39,7 @@
       "^/signet/api": "/api/v1/ws"
     }
   },
-  "/signet/api/*": {
+  "/signet/api": {
     "target": "https://mempool.space",
     "secure": true,
     "changeOrigin": true,
@@ -61,7 +58,7 @@
       "^/bisq/api": "/api/v1/ws"
     }
   },
-  "/bisq/api/*": {
+  "/bisq/api": {
     "target": "https://mempool.space/bisq",
     "secure": false,
     "changeOrigin": true,
@@ -75,7 +72,7 @@
     "secure": false,
     "ws": true
   },
-  "/liquid/api/*": {
+  "/liquid/api": {
     "target": "https://mempool.space",
     "secure": false,
     "changeOrigin": true,

frontend/proxy.stg.conf.json

@@ -78,7 +78,7 @@
     "secure": false,
     "changeOrigin": true,
     "pathRewrite": {
-      "^/liquid/api/": "/api/v1/liquid/"
+      "^/liquid/api/": "/api/liquid/"
     },
     "timeout": 3600000
   },

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

@@ -16,8 +16,11 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
+import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
+import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
 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';
 
 let routes: Routes = [
   {
@@ -66,6 +69,14 @@ let routes: Routes = [
         path: 'terms-of-service',
         component: TermsOfServiceComponent
       },
+      {
+        path: 'privacy-policy',
+        component: PrivacyPolicyComponent
+      },
+      {
+        path: 'trademark-policy',
+        component: TrademarkPolicyComponent
+      },
       {
         path: 'address/:id',
         children: [],
@@ -293,7 +304,7 @@ const browserWindow = window || {};
 // @ts-ignore
 const browserWindowEnv = browserWindow.__env || {};
 
-if (browserWindowEnv && browserWindowEnv.OFFICIAL_BISQ_MARKETS) {
+if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'bisq') {
   routes = [{
     path: '',
     component: BisqMasterPageComponent,
@@ -301,6 +312,93 @@ if (browserWindowEnv && browserWindowEnv.OFFICIAL_BISQ_MARKETS) {
   }];
 }
 
+if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
+  routes = [{
+    path: '',
+    component: LiquidMasterPageComponent,
+    children: [
+      {
+        path: '',
+        component: StartComponent,
+        children: [
+          {
+            path: '',
+            component: DashboardComponent
+          },
+          {
+            path: 'tx/:id',
+            component: TransactionComponent
+          },
+          {
+            path: 'block/:id',
+            component: BlockComponent
+          },
+          {
+            path: 'mempool-block/:id',
+            component: MempoolBlockComponent
+          },
+        ],
+      },
+      {
+        path: 'blocks',
+        component: LatestBlocksComponent,
+      },
+      {
+        path: 'graphs',
+        component: StatisticsComponent,
+      },
+      {
+        path: 'address/:id',
+        component: AddressComponent
+      },
+      {
+        path: 'asset/:id',
+        component: AssetComponent
+      },
+      {
+        path: 'assets',
+        component: AssetsComponent,
+      },
+      {
+        path: 'api',
+        component: ApiDocsComponent,
+      },
+      {
+        path: 'about',
+        component: AboutComponent,
+      },
+      {
+        path: 'terms-of-service',
+        component: TermsOfServiceComponent
+      },
+      {
+        path: 'privacy-policy',
+        component: PrivacyPolicyComponent
+      },
+      {
+        path: 'trademark-policy',
+        component: TrademarkPolicyComponent
+      },
+      {
+        path: 'sponsor',
+        component: SponsorComponent,
+      },
+    ],
+  },
+  {
+    path: 'tv',
+    component: TelevisionComponent
+  },
+  {
+    path: 'status',
+    component: StatusViewComponent
+  },
+  {
+    path: '**',
+    redirectTo: ''
+  }];
+}
+
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabled',

frontend/src/app/app.constants.ts

@@ -43,7 +43,7 @@ export const languages: Language[] = [
    { code: 'ar', name: 'العربية' },         // Arabic
 // { code: 'bg', name: 'Български' },       // Bulgarian
 // { code: 'bs', name: 'Bosanski' },        // Bosnian
-// { code: 'ca', name: 'Català' },          // Catalan
+   { code: 'ca', name: 'Català' },          // Catalan
    { code: 'cs', name: 'Čeština' },         // Czech
 // { code: 'da', name: 'Dansk' },           // Danish
    { code: 'de', name: 'Deutsch' },         // German
@@ -59,6 +59,7 @@ export const languages: Language[] = [
    { code: 'ko', name: '한국어' },          // Korean
 // { code: 'hr', name: 'Hrvatski' },        // Croatian
 // { code: 'id', name: 'Bahasa Indonesia' },// Indonesian
+   { code: 'hi', name: 'हिन्दी' },             // Hindi
    { code: 'it', name: 'Italiano' },        // Italian
    { code: 'he', name: 'עברית' },           // Hebrew
    { code: 'ka', name: 'ქართული' },         // Georgian

frontend/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { AddressLabelsComponent } from './components/address-labels/address-labe
 import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
 import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
+import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
 import { AboutComponent } from './components/about/about.component';
 import { TelevisionComponent } from './components/television/television.component';
 import { StatisticsComponent } from './components/statistics/statistics.component';
@@ -32,7 +33,7 @@ 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 { TimespanComponent } from './components/timespan/timespan.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 { AssetComponent } from './components/asset/asset.component';
@@ -44,11 +45,13 @@ 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, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt } from '@fortawesome/free-solid-svg-icons';
+import { 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';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
+import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
+import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { SponsorComponent } from './components/sponsor/sponsor.component';
@@ -59,6 +62,7 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     AboutComponent,
     MasterPageComponent,
     BisqMasterPageComponent,
+    LiquidMasterPageComponent,
     TelevisionComponent,
     BlockchainComponent,
     StartComponent,
@@ -71,7 +75,7 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     AmountComponent,
     LatestBlocksComponent,
     SearchFormComponent,
-    TimespanComponent,
+    TimeSpanComponent,
     AddressLabelsComponent,
     MempoolBlocksComponent,
     ChartistComponent,
@@ -88,6 +92,8 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     ApiDocsComponent,
     CodeTemplateComponent,
     TermsOfServiceComponent,
+    PrivacyPolicyComponent,
+    TrademarkPolicyComponent,
     SponsorComponent,
   ],
   imports: [
@@ -136,5 +142,12 @@ export class AppModule {
     library.addIcons(faChevronDown);
     library.addIcons(faFileAlt);
     library.addIcons(faRedoAlt);
+    library.addIcons(faArrowAltCircleRight);
+    library.addIcons(faExternalLinkAlt);
+    library.addIcons(faSortUp);
+    library.addIcons(faCaretUp);
+    library.addIcons(faCaretDown);
+    library.addIcons(faAngleRight);
+    library.addIcons(faAngleLeft);
   }
 }

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

@@ -20,15 +20,13 @@
         <th i18n="Asset ticker header">Ticker</th>
         <th class="d-none d-md-block" i18n="Asset Issuer Domain header">Issuer domain</th>
         <th i18n="Asset ID header">Asset ID</th>
-        <th class="d-none d-lg-block" i18n="Asset issuance transaction header">Issuance TX</th>
       </thead>
       <tbody>
         <tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
-          <td class="td-name">{{ asset.name }}</td>
+          <td class="td-name"><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a></td>
           <td>{{ asset.ticker }}</td>
-          <td class="d-none d-md-block"><a *ngIf="asset.entity" target="_blank" href="{{ 'http://' + asset.entity.domain }}">{{ asset.entity.domain }}</a></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>
-          <td class="d-none d-lg-block"><ng-template [ngIf]="asset.issuance_txin"><a [routerLink]="['/tx/' | relativeUrl, asset.issuance_txin.txid]">{{ asset.issuance_txin.txid | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.issuance_txin.txid"></app-clipboard></ng-template></td>
         </tr> 
       </tbody>
     </table>
@@ -47,15 +45,13 @@
         <th i18n="Asset ticker header">Ticker</th>
         <th i18n="Asset Issuer Domain header">Issuer domain</th>
         <th i18n="Asset ID header">Asset ID</th>
-        <th i18n="Asset issuance transaction header">Issuance TX</th>
       </thead>
       <tbody>
-        <tr *ngFor="let dummy of [0,0,0]">
+        <tr *ngFor="let dummy of [0,0,0,0,0,0,0,0,0,0]">
           <td><span class="skeleton-loader"></span></td>
           <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>
-          <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
         </tr> 
       </tbody>
     </table>

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

@@ -107,7 +107,7 @@ export class AssetsComponent implements OnInit {
         const start = (this.page - 1) * this.itemsPerPage;
         if (searchText.length ) {
           const filteredAssets = this.assetsCache.filter((asset) => asset.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
-            || asset.ticker.toLowerCase().indexOf(searchText.toLowerCase()) > -1);
+            || (asset.ticker || '').toLowerCase().indexOf(searchText.toLowerCase()) > -1);
           this.assets = filteredAssets;
           return filteredAssets.slice(start, this.itemsPerPage + start);
         } else {

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

@@ -1,4 +1,4 @@
-<div class="container-xl">
+<div class="container-xl" (window:resize)="onResize($event)">
   <h1 style="float: left;" i18n="Bisq blocks header">BSQ Blocks</h1>
   <br>
 
@@ -26,9 +26,7 @@
   </div>
 
   <br>
-  <div class="pagination">
-    <ngb-pagination *ngIf="blocks.value" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
-  </div>
+  <ngb-pagination *ngIf="blocks.value" class="pagination-container" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
   </ng-container>
 </div>
 

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss

@@ -1,3 +1,11 @@
-.pagination {
-    overflow: hidden;
+.pagination-container {
+  float: none;
+  margin-bottom: 200px;
+  @media(min-width: 400px){
+    float: right;
+  }
+}
+
+.container-xl {
+    padding-bottom: 110px;
 }

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

@@ -23,7 +23,7 @@ export class BisqBlocksComponent implements OnInit {
   isLoading = true;
   // @ts-ignore
   paginationSize: 'sm' | 'lg' = 'md';
-  paginationMaxSize = 4;
+  paginationMaxSize = 5;
 
   constructor(
     private websocketService: WebsocketService,
@@ -38,7 +38,7 @@ export class BisqBlocksComponent implements OnInit {
     this.seoService.setTitle($localize`:@@8a7b4bd44c0ac71b2e72de0398b303257f7d2f54:Blocks`);
     this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
     this.loadingItems = Array(this.itemsPerPage);
-    if (document.body.clientWidth < 768) {
+    if (document.body.clientWidth < 670) {
       this.paginationSize = 'sm';
       this.paginationMaxSize = 3;
     }
@@ -83,4 +83,8 @@ export class BisqBlocksComponent implements OnInit {
       queryParamsHandling: 'merge',
     });
   }
+
+  onResize(event: any) {
+    this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
+  }
 }

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

@@ -17,7 +17,7 @@
 
   <div class="container-info">
     <h1>
-      <ng-template [ngIf]="stateService.env.OFFICIAL_BISQ_MARKETS" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
+      <ng-template [ngIf]="stateService.env.BASE_MODULE === 'bisq'" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
       <ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
     </h1>
     <ng-container *ngIf="{ value: (tickers$ | async) } as tickers">

frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss

@@ -17,19 +17,6 @@
     z-index: 100;
 }
 
-.table-container {
-    overflow: scroll;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    font-size: 13px;
-    @media(min-width: 576px){
-        font-size: 16px;
-    }
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
 .container-info{
     overflow-x: scroll;
 }

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

@@ -69,7 +69,7 @@ export class BisqDashboardComponent implements OnInit {
         const newTickers = [];
         for (const t in tickers) {
 
-          if (!this.stateService.env.OFFICIAL_BISQ_MARKETS) {
+          if (this.stateService.env.BASE_MODULE !== 'bisq') {
             const pair = t.split('_');
             if (pair[1] === 'btc' && this.allowCryptoCoins.indexOf(pair[0]) === -1) {
               continue;
@@ -106,7 +106,7 @@ export class BisqDashboardComponent implements OnInit {
     ])
     .pipe(
       map(([trades, markets]) => {
-        if (!this.stateService.env.OFFICIAL_BISQ_MARKETS) {
+        if (this.stateService.env.BASE_MODULE !== 'bisq') {
           trades = trades.filter((trade) => {
             const pair = trade.market.split('_');
             return !(pair[1] === 'btc' && this.allowCryptoCoins.indexOf(pair[0]) === -1);

frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html

@@ -63,7 +63,7 @@
       <div class="card">
         <div class="card-body">
           <h5 class="card-title text-center">
-            <ng-template [ngIf]="stateService.env.OFFICIAL_BISQ_MARKETS" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
+            <ng-template [ngIf]="stateService.env.BASE_MODULE === 'bisq'" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
             <ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
           </h5>
 
@@ -105,7 +105,7 @@
   </ng-container>
   </div>
 
-  <app-language-selector *ngIf="!stateService.env.OFFICIAL_BISQ_MARKETS"></app-language-selector>
+  <app-language-selector *ngIf="stateService.env.BASE_MODULE !== 'bisq'"></app-language-selector>
 
   <div class="text-small text-center mt-3">
     <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>

frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss

@@ -18,15 +18,44 @@
 }
 
 .table-container {
-    font-size: 13px;
-    @media(min-width: 576px){
-        font-size: 16px;
+  overflow: scroll;
+  scrollbar-width: none;
+  font-size: 13px;
+  &::-webkit-scrollbar {
+      display: none;
+  }
+  @media(min-width: 576px){
+      font-size: 16px;
+  }
+  thead th{
+    text-align: right;
+    &:first-child {
+      text-align: left;
     }
-    &::-webkit-scrollbar {
+    &:nth-child(3) {
+      display: none;
+      @media(min-width: 1100px){
+        display: table-cell;
+      }
+    }
+  }
+  tr {
+    td {
+      text-align: right;
+      &:first-child {
+        text-align: left;
+      }
+      &:nth-child(3) {
         display: none;
+        @media(min-width: 1100px){
+          display: table-cell;
+        }
+      }
     }
+  }
 }
 
+
 .chart-container {
   height: 300px;
 }
@@ -41,44 +70,43 @@
     background-color: #1d1f31;
     height: 100%;
   }
-  
+
   .card-title {
     color: #4a68b9;
     font-size: 1rem;
   }
-  
+
   .info-block {
     float: left;
     width: 350px;
     line-height: 25px;
   }
-  
+
   .progress {
     display: inline-flex;
     width: 100%;
     background-color: #2d3348;
     height: 1.1rem;
   }
-  
+
   .bg-warning {
     background-color: #b58800 !important;
   }
-  
+
   .skeleton-loader {
     max-width: 100%;
     &.shorter {
       max-width: 150px;
     }
   }
-  
+
   .more-padding {
     padding: 1.25rem 2rem 1.25rem 2rem;
   }
-  
+
   .graph-card {
     height: 100%;
     @media (min-width: 992px) {
       height: 385px;
     }
   }
-  

frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.ts

@@ -77,7 +77,7 @@ export class BisqMainDashboardComponent implements OnInit {
         const newTickers = [];
         for (const t in tickers) {
 
-          if (!this.stateService.env.OFFICIAL_BISQ_MARKETS) {
+          if (this.stateService.env.BASE_MODULE !== 'bisq') {
             const pair = t.split('_');
             if (pair[1] === 'btc' && this.allowCryptoCoins.indexOf(pair[0]) === -1) {
               continue;
@@ -114,7 +114,7 @@ export class BisqMainDashboardComponent implements OnInit {
     ])
     .pipe(
       map(([trades, markets]) => {
-        if (!this.stateService.env.OFFICIAL_BISQ_MARKETS) {
+        if (this.stateService.env.BASE_MODULE !== 'bisq') {
           trades = trades.filter((trade) => {
             const pair = trade.market.split('_');
             return !(pair[1] === 'btc' && this.allowCryptoCoins.indexOf(pair[0]) === -1);

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

@@ -1,12 +1,38 @@
+
 .table-container {
-    overflow: scroll;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    font-size: 13px;
-    @media(min-width: 576px){
-        font-size: 16px;
+  overflow: scroll;
+  scrollbar-width: none;
+  font-size: 13px;
+  &::-webkit-scrollbar {
+      display: none;
+  }
+  @media(min-width: 576px){
+      font-size: 16px;
+  }
+  thead th{
+    text-align: right;
+    &:first-child{
+      text-align: left;
     }
-    &::-webkit-scrollbar {
+    &:nth-child(2) {
+      display: none;
+      @media(min-width: 1100px){
+        display: table-cell;
+      }
+    }
+  }
+  tr {
+    td {
+      text-align: right;
+      &:first-child{
+        text-align: left;
+      }
+      &:nth-child(2) {
         display: none;
+        @media(min-width: 1100px){
+          display: table-cell;
+        }
+      }
     }
+  }
 }

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

@@ -1,98 +1,102 @@
 <div class="container-xl">
 
+  <div class="title-block">
   <ng-template [ngIf]="!isLoading && !error">
 
-    <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>
-      <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
-      <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
-    </button>
-
-
-    <h1 i18n="shared.transaction">Transaction</h1>
-
-    <div class="tx-link">
-      <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>
-    <div class="clearfix"></div>
-
-    <div class="box transaction-container">
-      <div class="row">
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
-                <td>
-                  {{ 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>
-                </td>
-              </tr>
-              <tr>
-                <td class="td-width" i18n="transaction.included-in-block|Transaction included in block">Included in block</td>
-                <td>
-                  <a [routerLink]="['/block/' | relativeUrl, bisqTx.blockHash]" [state]="{ data: { blockHeight: bisqTx.blockHeight } }">{{ bisqTx.blockHeight }}</a>
-                </td>
-              </tr>
-              <tr>
-                <td class="td-width" i18n="transaction.features|Transaction features">Features</td>
-                <td>
-                  <app-tx-features *ngIf="tx; else loadingTx" [tx]="tx"></app-tx-features>
-                  <ng-template #loadingTx>
-                    <span class="skeleton-loader"></span>
-                  </ng-template>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td class="td-width" i18n="BSQ burnt amount">Burnt amount</td>
-                <td>
-                  {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
-              </tr>
-              <tr>
-                <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
-                <td *ngIf="!isLoadingTx; else loadingTxFee">
-                  {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span class="symbol">sat/vB</span>
-                  &nbsp;
-                  <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
-                </td>
-                <ng-template #loadingTxFee>
-                  <td><span class="skeleton-loader"></span></td>
-                </ng-template>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
+    <div>
+      <div class="title">
+        <h1 i18n="shared.transaction">Transaction</h1>
       </div>
+
+      <div class="tx-link">
+        <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>
+      <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>
+          <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
+          <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
+        </button>
+      </div>
+      <div class="clearfix"></div>
+
+      <div class="box transaction-container">
+        <div class="row">
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                <tr>
+                  <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
+                  <td>
+                    {{ 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>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="td-width" i18n="transaction.included-in-block|Transaction included in block">Included in block</td>
+                  <td>
+                    <a [routerLink]="['/block/' | relativeUrl, bisqTx.blockHash]" [state]="{ data: { blockHeight: bisqTx.blockHeight } }">{{ bisqTx.blockHeight }}</a>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="td-width" i18n="transaction.features|Transaction features">Features</td>
+                  <td>
+                    <app-tx-features *ngIf="tx; else loadingTx" [tx]="tx"></app-tx-features>
+                    <ng-template #loadingTx>
+                      <span class="skeleton-loader"></span>
+                    </ng-template>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                <tr>
+                  <td class="td-width" i18n="BSQ burnt amount">Burnt amount</td>
+                  <td>
+                    {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
+                </tr>
+                <tr>
+                  <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
+                  <td *ngIf="!isLoadingTx; else loadingTxFee">
+                    {{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol">sat/vB</span>
+                    &nbsp;
+                    <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
+                  </td>
+                  <ng-template #loadingTxFee>
+                    <td><span class="skeleton-loader"></span></td>
+                  </ng-template>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+        </div>
+      </div>
+
+      <br>
+
+      <h2 i18n="transaction.details">Details</h2>
+
+
+      <app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
+
+      <br>
+
+      <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+
+      <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
+
+      <br>
     </div>
-
-    <br>
-
-    <h2 i18n="transaction.details">Details</h2>
-
-
-    <app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
-
-    <br>
-
-    <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
-
-    <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
-
-    <br>
-
   </ng-template>
 
   <ng-template [ngIf="isLoading && !error">

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

@@ -1,126 +1 @@
-.adjust-btn-padding {
-	padding: 0.55rem;
-}
-
-.title-block {
-	padding-top: 1px;
-}
-
-@media (max-width: 767.98px) {
-	.mobile-bottomcol {
-		margin-top: 15px;
-	}
-}
-
-.td-width {
-	width: 150px;
-	@media (min-width: 768px) {
-		width: 175px;
-	}
-}
-
-
-h1 {
-	margin-bottom: 0;
-}
-
-.badge {
-	position: relative;
-	top: -1px;
-}
-
-.btn-small-height {
-	line-height: 1.1;
-}
-
-.arrow-green {
-	color: #1a9436;
-}
-
-.arrow-red {
-	color: #dc3545;
-}
-
-.btn-success {
-	float: right;
-	margin-bottom: 0px;
-	margin-top: 5px;
-}
-
-.tx-link {
-	display: block;
-	width: auto;
-	margin-bottom: 10px;
-    margin-left: 2px;
-	margin-top: 40px;
-    position: absolute;
-	@media (min-width: 700px) {
-	  margin-top: 14px;
-	  margin-left: 10px;
-	  position: relative;	  
-	  text-align: left;
-	  width: 100%;
-	  top: 14px;
-	  left: 10px;
-	}
-  }
-
-.container-xl {
-	margin-bottom: 40px;
-}
-
-.row{
-	flex-direction: column;
-	@media (min-width: 768px) {
-		flex-direction: row;
-	}
-}
-
-@media (max-width: 767.98px) {
-	.mobile-bottomcol {
-		margin-top: 15px;
-	}
-	.details-table td:first-child {
-		white-space: pre-wrap;
-	}
-}
-
-.fiat {
-	display: block;
-	font-size: 13px;
-	@media (min-width: 576px){
-		display: inline-block;
-		margin-left: 15px;
-		font-size: 14px;
-		text-align: left;
-	}
-}
-
-h1{
-	font-size: 1.75rem;
-    margin-top: 2px;
-	margin-bottom: 0;
-	float: left;
-    padding-bottom: 40px;
-	@media (min-width: 375px){
-		margin-top: 0px;
-		font-size: 2rem;
-	}
-	@media (min-width: 768px){
-		padding-bottom: 10px;
-	}
-}
-.transaction-container {
-	font-size: 14px;
-	@media (min-width: 576px){
-		font-size: 16px;
-	}
-	tr td {
-		&:last-child{
-			text-align: right;
-			@media (min-width: 768px){
-				text-align: left;
-			}
-		}
-	}
-}
+@import "./../../components/transaction/transaction.component.scss";

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

@@ -85,7 +85,11 @@ export class BisqTransactionComponent implements OnInit, OnDestroy {
         }
 
         if (tx.version) {
-          this.router.navigate(['/tx/', this.txId], { state: { data: tx, bsqTx: true }});
+          if (this.stateService.env.BASE_MODULE === 'bisq') {
+            window.location.replace('https://mempool.space/tx/' + this.txId);
+          } else {
+            this.router.navigate(['/tx/', this.txId], { state: { data: tx, bsqTx: true }});
+          }
           return of(null);
         }
 

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

@@ -1,4 +1,4 @@
-<div class="container-xl">
+<div class="container-xl" (window:resize)="onResize($event)">
   <h1 style="float: left;" i18n>BSQ Transactions</h1>
 
   <div class="d-block float-right">
@@ -44,9 +44,7 @@
   </table>
 
   <br>
-  <div class="pagination">
-    <ngb-pagination *ngIf="transactions.value" [size]="paginationSize" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
-  </div>
+  <ngb-pagination class="pagination-container" *ngIf="transactions.value" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
 
   </ng-container>
 </div>

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

@@ -8,13 +8,16 @@ label {
   left: inherit;
 }
 
-.pagination {
-  overflow: hidden;
+.pagination-container {
+  float: none;
+  @media(min-width: 400px){
+    float: right;
+  }
 }
 
-h1{
-  font-size: 1.5rem;
-  @media(min-width: 375px){
-    font-size: 2rem;
+.container-xl {
+  padding-bottom: 60px;
+  @media(min-width: 400px){
+    padding-bottom: 100px;
   }
 }

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

@@ -60,7 +60,7 @@ export class BisqTransactionsComponent implements OnInit {
 
   // @ts-ignore
   paginationSize: 'sm' | 'lg' = 'md';
-  paginationMaxSize = 4;
+  paginationMaxSize = 5;
 
   txTypes = ['ASSET_LISTING_FEE', 'BLIND_VOTE', 'COMPENSATION_REQUEST', 'GENESIS', 'LOCKUP', 'PAY_TRADE_FEE',
     'PROOF_OF_BURN', 'PROPOSAL', 'REIMBURSEMENT_REQUEST', 'TRANSFER_BSQ', 'UNLOCK', 'VOTE_REVEAL', 'IRREGULAR'];
@@ -85,7 +85,7 @@ export class BisqTransactionsComponent implements OnInit {
 
     this.loadingItems = Array(this.itemsPerPage);
 
-    if (document.body.clientWidth < 768) {
+    if (document.body.clientWidth < 670) {
       this.paginationSize = 'sm';
       this.paginationMaxSize = 3;
     }
@@ -168,4 +168,8 @@ export class BisqTransactionsComponent implements OnInit {
   trackByFn(index: number) {
     return index;
   }
+
+  onResize(event: any) {
+    this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
+  }
 }

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

@@ -7,11 +7,13 @@
             <tr *ngIf="input.isVerified">
               <td class="arrow-td">
                 <ng-template [ngIf]="input.spendingTxId === null" [ngIfElse]="hasPreoutput">
-                  <i class="arrow grey"></i>
+                  <span class="grey">
+                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                  </span>
                 </ng-template>
                 <ng-template #hasPreoutput>
-                  <a [routerLink]="['/tx/' | relativeUrl, input.spendingTxId]">
-                    <i class="arrow red"></i>
+                  <a [routerLink]="['/tx/' | relativeUrl, input.spendingTxId]" class="red">
+                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                   </a>
                 </ng-template>
               </td>
@@ -44,10 +46,14 @@
               <td class="text-right nowrap">
                 <app-bsq-amount [bsq]="output.bsqAmount"></app-bsq-amount>
               </td>
-              <td class="pl-1 arrow-td">
-                <i *ngIf="!output.spentInfo; else spent" class="arrow green"></i>
+              <td class="arrow-td">
+                <span *ngIf="!output.spentInfo; else spent" class="green">
+                  <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                </span>
                 <ng-template #spent>
-                  <a [routerLink]="['/tx/' | relativeUrl, output.spentInfo.txId]"><i class="arrow red"></i></a>
+                  <a [routerLink]="['/tx/' | relativeUrl, output.spentInfo.txId]" class="red">
+                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                  </a>
                 </ng-template>
               </td>
             </tr>

frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss

@@ -1,62 +1,26 @@
+
 .arrow-td {
-	width: 22px;
+	width: 20px;
 }
-
-.arrow {
-	display: inline-block!important;
+.green, .grey, .red {
+	font-size: 16px;
+    top: -2px;
 	position: relative;
-	width: 14px;
-	height: 22px;
-	box-sizing: content-box
+	@media( min-width: 576px){
+		font-size: 19px;
+	}
 }
 
-.arrow:before {
-	position: absolute;
-	content: '';
-	margin: auto;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: calc(-1*30px/3);
-	width: 0;
-  height: 0;
-	border-top: 6.66px solid transparent;
-  border-bottom: 6.66px solid transparent
+.green {
+  	color:#28a745;
 }
 
-.arrow:after {
-	position: absolute;
-	content: '';
-	margin: auto;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: calc(30px/6);
-	width: calc(30px/3);
-	height: calc(20px/3);
-	background: rgba(0, 0, 0, 0);
+.red {
+  	color:#dc3545;
 }
 
-.arrow.green:before {
-  border-left: 10px solid #28a745;
-}
-.arrow.green:after {
-  background-color:#28a745;
-}
-
-.arrow.red:before {
-  border-left: 10px solid #dc3545;
-}
-.arrow.red:after {
-  background-color:#dc3545;
-}
-
-.arrow.grey:before {
-  border-left: 10px solid #6c757d;
-}
-
-.arrow.grey:after {
-  background-color:#6c757d;
+.grey {
+  	color:#6c757d;
 }
 
 @media (max-width: 767.98px) {

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

@@ -8,10 +8,13 @@
     </div>
   </div>
 
-  <div class="about-text">
-    <h5><ng-container i18n="about.about-the-project">The Mempool Open Source Project</ng-container> &trade;</h5>
+  <div class="about-text" *ngIf="stateService.env.BASE_MODULE === 'mempool'; else marginBox">
+    <h5><ng-container i18n="about.about-the-project">The Mempool Open Source Project</ng-container><ng-template [ngIf]="locale.substr(0, 2) === 'en'"> &trade;</ng-template></h5>
     <p i18n>Building a mempool and blockchain explorer for the Bitcoin community, focusing on the transaction fee market and multi-layer ecosystem, without any advertising, altcoins, or third-party trackers.</p>
   </div>
+  <ng-template #marginBox>
+    <div class="no-about-margin"></div>
+  </ng-template>
 
   <div class="social-icons">
     <a target="_blank" href="https://github.com/mempool/mempool">
@@ -43,6 +46,14 @@
         <img class="image" src="/resources/profile/exodus.svg" />
         <span>Exodus</span>
       </a>
+      <a href="https://foundrydigital.com/" target="_blank" title="Foundry">
+        <img class="image" src="/resources/profile/foundry.svg" />
+        <span>Foundry</span>
+      </a>
+      <a href="https://unchained-capital.com/" target="_blank" title="Unchained">
+        <img class="image" src="/resources/profile/unchained.svg" />
+        <span>Unchained</span>
+      </a>
     </div>
   </div>
 
@@ -115,6 +126,10 @@
         <img class="image" src="/resources/profile/blixt.png" />
         <span>Blixt</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>
+      </a>
       <a href="https://github.com/Satpile/satpile" target="_blank" title="Satpile Watch-Only Wallet">
         <img class="image" src="/resources/profile/satpile.jpg" />
         <span>Satpile</span>
@@ -175,25 +190,31 @@
 
   <div class="copyright">
     <div class="title">
-      Copyright (c) 2019-2021<br />
+      Copyright &copy; 2019-2021<br>
       The Mempool Open Source Project
     </div>
     <p>
-      This program is free software; you can redistribute it and/or modify it under the terms of (at your option) either:<br>
+      <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> is free software; you can redistribute it and/or modify it under the terms of (at your option) either:<br>
     </p>
     <ul>
       <li>
-        1) the <a href="https://www.gnu.org/licenses/agpl-3.0-standalone.html">GNU Affero General Public License</a> as published by the Free Software Foundation, either version 3 of the License or any later version approved by a proxy statement published on <https://mempool.space/about>; or<br>
+        1) the <a href="https://www.gnu.org/licenses/agpl-3.0-standalone.html">GNU Affero General Public License</a> as published by the Free Software Foundation, either version 3 of the License or any later version approved by a proxy statement published on &lt;https://mempool.space/about&gt;; or<br>
       </li>
       <li>
-        2) the <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU General Public License</a> as published by the Free Software Foundation, either version 3 of the License or any later version approved by a proxy statement published on <https://mempool.space/about>.<br>
+        2) the <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU General Public License</a> as published by the Free Software Foundation, either version 3 of the License or any later version approved by a proxy statement published on &lt;https://mempool.space/about&gt;.<br>
       </li>
     </ul>
     <p>
       This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the full license terms for more details.<br>
     </p>
+    <div class="title">
+      Trademark Notice<br>
+    </div>
     <p>
-      mempool.space&trade;, The Mempool Open Source Project&trade;, and the Mempool block logo are trademarks of Mempool Space K.K. in Japan.
+      The Mempool Open Source Project&trade;, mempool.space&trade;, the mempool logo&trade;, the mempool.space logos&trade;, the mempool square logo&trade;, and the mempool blocks logo&trade; are either registered trademarks or trademarks of Mempool Space K.K in Japan, the United States, and/or other countries.
+    </p>
+    <p>
+      While our software is available under an open source software license, the copyright license does not include an implied right or license to use our trademarks. See our <a href="https://mempool.space/trademark-policy">Trademark Policy and Guidelines</a> for more details, published on &lt;https://mempool.space/trademark-policy&gt;.
     </p>
   </div>
 

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

@@ -176,4 +176,8 @@
   .footer-version {
     font-size: 12px;
   }
+}
+
+.no-about-margin {
+  height: 10px;
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
 import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
@@ -25,9 +25,10 @@ export class AboutComponent implements OnInit {
   constructor(
     private websocketService: WebsocketService,
     private seoService: SeoService,
-    private stateService: StateService,
+    public stateService: StateService,
     private apiService: ApiService,
     private router: Router,
+    @Inject(LOCALE_ID) public locale: string,
   ) { }
 
   ngOnInit() {
@@ -40,7 +41,7 @@ export class AboutComponent implements OnInit {
   }
 
   sponsor() {
-    if (this.officialMempoolSpace) {
+    if (this.officialMempoolSpace && this.stateService.env.BASE_MODULE === 'mempool') {
       this.router.navigateByUrl('/sponsor');
     } else {
       this.showNavigateToSponsor = true;

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

@@ -69,4 +69,8 @@ li.nav-item {
 }
 .websocket {
   padding: 15px;
+}
+
+.difficulty {
+  padding: 15px;
 }

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

@@ -12,7 +12,7 @@
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code.codeSample.commonJS)"></app-clipboard></div>
         <div class="links">
-          <a href="https://github.com/mempool/mempool.js">github repository</a>
+          <a [href]="npmGithubLink()" target="_blank">github repository</a>
         </div>
         <pre><code [innerText]="wrapCommonJS(code.codeSample.commonJS)"></code></pre>
       </ng-template>
@@ -20,12 +20,12 @@
     <li ngbNavItem>
       <a ngbNavLink>ES Module</a>
       <ng-template ngbNavContent>
-        <div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="esModuleInstall"></app-clipboard></div>
+        <div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="wrapImportTemplate()"></app-clipboard></div>
         <div class="links">
-          <a href="https://github.com/mempool/mempool.js">github repository</a>
-          <a href="https://www.npmjs.org/package/@mempool/mempool.js">npm package</a>
+          <a [href]="npmGithubLink()" target="_blank">github repository</a>
+          <a [href]="npmModuleLink()" target="_blank">npm package</a>
         </div>
-        <pre><code [innerText]="esModuleInstall"></code></pre>
+        <pre><code [innerText]="wrapImportTemplate()"></code></pre>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapESmodule(code.codeSample.esModule)"></app-clipboard></div>
         <pre><code [innerText]="wrapESmodule(code.codeSample.esModule)"></code></pre>
       </ng-template>

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

@@ -71,6 +71,10 @@ li.nav-item {
   padding: 15px;
 }
 
+.difficulty {
+  padding: 15px;
+}
+
 .links {
   margin-bottom: 5px;
   a {
@@ -87,5 +91,7 @@ pre {
   padding: 30px;
   code{
     background-color: transparent;
+    white-space: break-spaces;
+    word-break: break-all;
   }
 }

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

@@ -7,6 +7,7 @@ import { Component, Input } from '@angular/core';
 })
 export class CodeTemplateComponent {
   @Input() network: string;
+  @Input() layer: string;
   @Input() code: {
     codeSample: {
       esModule: string;
@@ -16,15 +17,32 @@ export class CodeTemplateComponent {
     responseSample: string;
   };
   hostname = document.location.hostname;
-  esModuleInstall = `# npm
-npm install @mempool/mempool.js --save
-
-# yarn
-yarn add @mempool/mempool.js`;
 
   constructor(
   ) { }
 
+  npmGithubLink(){
+    let npmLink = `https://github.com/mempool/mempool.js`;
+    if (this.layer === 'bisq') {
+      npmLink = `https://github.com/mempool/mempool.js/tree/main/npm-bisq-js`;
+    }
+    if (this.layer === 'liquid') {
+      npmLink = `https://github.com/mempool/mempool.js/tree/main/npm-liquid-js`;
+    }
+    return npmLink;
+  }
+
+  npmModuleLink() {
+    let npmLink = `https://www.npmjs.org/package/@mempool/mempool.js`;
+    if (this.layer === 'bisq') {
+      npmLink = `https://www.npmjs.org/package/@mempool/bisq.js`;
+    }
+    if (this.layer === 'liquid') {
+      npmLink = `https://www.npmjs.org/package/@mempool/liquid.js`;
+    }
+    return npmLink;
+  }
+
   normalizeCodeHostname(code: string) {
     let codeText: string;
     if (this.network === 'bisq' || this.network === 'liquid'){
@@ -44,7 +62,15 @@ yarn add @mempool/mempool.js`;
   });` );
     }
 
-    return `import mempoolJS from "@mempool/mempool.js";
+    let importText = `import mempoolJS from "@mempool/mempool.js";`;
+    if (this.layer === 'bisq') {
+      importText = `import bisqJS from "@mempool/bisq.js";`;
+    }
+    if (this.layer === 'liquid') {
+      importText = `import liquidJS from "@mempool/liquid.js";`;
+    }
+
+    return `${importText}
 
 const init = async () => {
   ${codeText}
@@ -60,10 +86,18 @@ init();`;
           hostname: '${this.hostname}/${this.network}'
         });` );
     }
+
+    let importText = `<script src="https://mempool.space/mempool.js"></script>`;
+    if (this.layer === 'bisq') {
+      importText = `<script src="https://bisq.markets/bisq.js"></script>`;
+    }
+    if (this.layer === 'liquid') {
+      importText = `<script src="https://liquid.network/liquid.js"></script>`;
+    }
     return `<!DOCTYPE html>
 <html>
   <head>
-    <script src="https://mempool.space/mempool.js"></script>
+    ${importText}
     <script>
       const init = async () => {
         ${codeText}
@@ -81,4 +115,31 @@ init();`;
     return code;
   }
 
+  wrapImportTemplate() {
+
+    let importTemplate = `# npm
+npm install @mempool/mempool.js --save
+
+# yarn
+yarn add @mempool/mempool.js`;
+
+    if (this.layer === 'bisq') {
+      importTemplate = `# npm
+npm install @mempool/bisq.js --save
+
+# yarn
+yarn add @mempool/bisq.js`;
+    }
+
+    if (this.layer === 'liquid') {
+      importTemplate = `# npm
+npm install @mempool/liquid.js --save
+
+# yarn
+yarn add @mempool/liquid.js`;
+    }
+
+    return importTemplate;
+  }
+
 }

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

@@ -2,7 +2,7 @@
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
-      <img [src]="'./resources/bisq-markets.svg'" height="35" width="180" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
+      <img src="./resources/bisq/bisq-markets-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
       <div class="connection-badge">
         <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
         <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
@@ -10,15 +10,42 @@
     </ng-container>
   </a>
 
+  <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
+      <img src="./resources/bisq-logo.png" style="width: 25px; height: 25px;" class="mr-1">
+    </button>
+    <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
+      <a href="https://mempool.space" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
+      <a href="https://mempool.space/signet" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
+      <a href="https://mempool.space/testnet" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
+      <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
+      <button ngbDropdownItem class="mainnet active" routerLink="/"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
+      <a href="https://liquid.network" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a>
+    </div>
+  </div>
+
   <div class="navbar-collapse" id="navbarCollapse">
     <ul class="navbar-nav">
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
         <a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" i18n-title="master-page.dashboard" title="Dashboard"></fa-icon></a>
       </li>
+      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
+        <a class="nav-link" [routerLink]="['/transactions']" (click)="collapse()"><fa-icon [icon]="['fas', 'list']" [fixedWidth]="true" i18n-title="master-page.transactions" title="Transactions"></fa-icon></a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/blocks']" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/stats']" (click)="collapse()"><fa-icon [icon]="['fas', 'file-alt']" [fixedWidth]="true"  i18n-title="master-page.stats" title="Stats"></fa-icon></a>
+      </li>
       <li class="nav-item mr-2" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
       </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
+      </li>
     </ul>
+    <app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
   </div>
 </nav>
 </header>

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

@@ -8,14 +8,16 @@ fa-icon {
 
 .navbar {
   z-index: 100;
+  min-height: 64px;
 }
 
 li.nav-item {
+  margin: auto 5px;
   padding-left: 10px;
   padding-right: 10px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar {
     padding: 0rem 2rem;
   }
@@ -26,17 +28,54 @@ li.nav-item {
     margin-right: 16px;
   }
   li.nav-item {
+    margin: auto 0px;
     padding: 10px;
   }
 }
 
-li.nav-item a {
-  color: #ffffff;
+.navbar-nav {
+  background: #212121;
+  bottom: 0;
+  box-shadow: 0px 0px 15px 0px #000;
+  flex-direction: row;
+  left: 0;
+  justify-content: center;
+  position: fixed;
+  width: 100%;
+  @media (min-width: 992px) {
+    background: transparent;
+    box-shadow: none;
+    position: relative;
+    width: auto;
+  }
+  a {
+    font-size: 0.8em;
+    @media (min-width: 375px) {
+      font-size: 1em;
+    }
+  }
 }
 
-.navbar-nav {
-  flex-direction: row;
-  justify-content: center;
+
+.navbar-collapse {
+  flex-basis: auto;
+  justify-content: flex-end;
+}
+
+@media (min-width: 992px) {
+  .navbar-collapse {
+    justify-content: space-between;
+  }
+}
+
+.navbar-brand {
+  width: 60%;
+}
+
+@media (min-width: 576px) {
+  .navbar-brand {
+    width: 140px;
+  }
 }
 
 nav {
@@ -81,5 +120,20 @@ nav {
 
 .dropdown-item {
   display: flex;
-  align-items:center;
+  align-items: center;
+}
+
+@media (min-width: 992px) {
+  .search-form-container {
+    width: 100%;
+    max-width: 500px;
+    padding-left: 15px;
+  }
+}
+.navbar-dark .navbar-nav .nav-link {
+  color: #f1f1f1;
+}
+
+.navbar-brand {
+  margin-right: 5px;
 }

frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { StateService } from '../../services/state.service';
+import { Env, StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -10,16 +10,23 @@ import { Observable } from 'rxjs';
 export class BisqMasterPageComponent implements OnInit {
   connectionState$: Observable<number>;
   navCollapsed = false;
-
+  env: Env;
+  isMobile = window.innerWidth <= 767.98;
+  
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
+    this.env = this.stateService.env;
     this.connectionState$ = this.stateService.connectionState$;
   }
 
   collapse(): void {
     this.navCollapsed = !this.navCollapsed;
   }
+
+  onResize(event: any) {
+    this.isMobile = window.innerWidth <= 767.98;
+  }
 }

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

@@ -1,7 +1,39 @@
-<div class="container-xl">
+<div class="container-xl" (window:resize)="onResize($event)">
 
   <div class="title-block" id="block">
-    <h1><ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis </ng-template><ng-template [ngIf]="blockHeight" i18n="block.block">Block <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
+    <h1>
+      <ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis 
+        <div 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>
+          <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
+          <span placement="bottom" class="disable">
+            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
+          </span>
+        </div>
+      </ng-template>
+      <ng-template [ngIf]="blockHeight" i18n="block.block"> Block 
+        <div 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>
+          <span *ngIf="!showNextBlocklink" placement="bottom" class="disable">
+            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
+          </span>
+          <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
+          <a *ngIf="showPreviousBlocklink && block" [routerLink]="['/block/' | relativeUrl, block.previousblockhash]" (click)="navigateToPreviousBlock()" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
+            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
+          </a>
+          <span *ngIf="!showPreviousBlocklink" placement="bottom" class="disable">
+            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
+          </span>
+        </div>
+      </ng-template>
+    </h1>
+
+    <div class="grow"></div>
+
     <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm">&#10005;</button>
   </div>
 
@@ -92,14 +124,14 @@
                   <td class="td-width" i18n="transaction.version">Version</td>
                   <td>{{ block.version | decimal2hex }} <span *ngIf="displayTaprootStatus() && hasTaproot(block.version)" class="badge badge-success ml-1" >Taproot</span></td>
                 </tr>
-                <tr>
-                  <td i18n="block.merkle-root">Merkle root</td>
-                  <td><p class="break-all">{{ block.merkle_root }}</p></td>
-                </tr>
                 <tr *ngIf="network !== 'liquid'">
                   <td i18n="block.bits">Bits</td>
                   <td>{{ block.bits | decimal2hex }}</td>
                 </tr>
+                <tr>
+                  <td i18n="block.merkle-root">Merkle root</td>
+                  <td><p class="break-all">{{ block.merkle_root }}</p></td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -114,6 +146,10 @@
                   <td i18n="block.nonce">Nonce</td>
                   <td>{{ block.nonce | decimal2hex }}</td>
                 </tr>
+                <tr>
+                  <td i18n="block.header">Block Header Hex</td>
+                  <td><a target="_blank" href="{{ network === '' ? '' : '/' + network }}/api/block/{{block.id}}/header"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -122,25 +158,24 @@
     </div>
 
     <div class="text-right mt-3">
-      <button type="button" class="btn btn-outline-info btn-sm" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
+      <button type="button" class="btn btn-outline-info btn-sm btn-details" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
     </div>
 
-    <br>
-
-    <h2 class="float-left">
-      <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
-      <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
-      <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
-    </h2>
-
-    <ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
+    <div #blockTxTitle id="block-tx-title" class="block-tx-title">
+      <h2>
+        <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
+        <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+        <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+      </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>
+    </div>
     <div class="clearfix"></div>
 
     <app-transactions-list [transactions]="transactions"></app-transactions-list>
 
     <ng-template [ngIf]="isLoadingTransactions">
-      <div class="text-center mb-4">
+      <div class="text-center mb-4 mt-3">
 
         <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
           <span class="skeleton-loader"></span>
@@ -167,8 +202,7 @@
         
       </div>
     </ng-template>
-
-    <ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></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>
 
   </ng-template>
 

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

@@ -44,6 +44,11 @@ h1 {
     float: left;
     margin-right: 10px;
   }
+  a {
+    &:hover, &:focus{
+      text-decoration: none;;
+    }
+  }
 }
 
 .address-link {
@@ -71,4 +76,68 @@ h1 {
 	.details-table td:first-child {
 		white-space: pre-wrap;
 	}
+}
+
+.btn-details {
+  position: relative;
+  top: 7px;
+  @media (min-width: 550px) {
+    top: 0px;
+  }
+}
+
+.block-tx-title {
+  padding-top: 10px;
+  display: block;
+  text-align: right;
+  margin-top: -30px;
+  @media (min-width: 550px) {
+    margin-top: 0px;
+    padding-top: 10px;
+  }
+  h2 {
+    display: inline-block;
+    float: left;
+    line-height: 1.6;
+    margin: 0;
+    margin-bottom: -15px;
+    padding-right: 10px;
+    padding-top: 15px;
+    position: relative;
+    top: -22px;
+    width: auto;
+    @media (min-width: 550px) {
+      padding-top: 0px;
+      top: 0px;
+    }
+    @media (min-width: 768px) {
+      padding-top: 5px;
+      line-height: 1;
+    }
+  }
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.next-previous-blocks {
+  font-size: 36px;
+  display: inline-block;
+  vertical-align: bottom;
+
+  a {
+    color: #1ad8f4;
+    &:hover, &:focus {
+      color: #09a3ba;
+      display: inline-block;
+      // transform: scale(1.2);
+      // transition: 150ms all ease-in-out;
+    }
+  }
+}
+
+.disable {
+  font-size: 36px;
+  color: #393e5c73;
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
@@ -18,14 +18,15 @@ export class BlockComponent implements OnInit, OnDestroy {
   network = '';
   block: Block;
   blockHeight: number;
+  nextBlockHeight: number;
   blockHash: string;
   isLoadingBlock = true;
   latestBlock: Block;
+  latestBlocks: Block[] = [];
   transactions: Transaction[];
   isLoadingTransactions = true;
   error: any;
   blockSubsidy: number;
-  subscription: Subscription;
   fees: number;
   paginationMaxSize: number;
   coinbaseTx: Transaction;
@@ -33,6 +34,14 @@ export class BlockComponent implements OnInit, OnDestroy {
   itemsPerPage: number;
   txsLoadingStatus$: Observable<number>;
   showDetails = false;
+  showPreviousBlocklink = true;
+  showNextBlocklink = true;
+
+  subscription: Subscription;
+  keyNavigationSubscription: Subscription;
+  blocksSubscription: Subscription;
+  networkChangedSubscription: Subscription;
+  queryParamsSubscription: Subscription;
 
   constructor(
     private route: ActivatedRoute,
@@ -46,7 +55,7 @@ export class BlockComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.websocketService.want(['blocks', 'mempool-blocks']);
-    this.paginationMaxSize = window.matchMedia('(max-width: 700px)').matches ? 3 : 5;
+    this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
     this.network = this.stateService.network;
     this.itemsPerPage = this.stateService.env.ITEMS_PER_PAGE;
 
@@ -97,12 +106,22 @@ export class BlockComponent implements OnInit, OnDestroy {
                 })
               );
           }
+
+          this.stateService.blocks$.subscribe(([block]) => {
+            if (block.id === blockHash) {
+              this.block = block;
+            }
+          });
+          
           return this.electrsApiService.getBlock$(blockHash);
         }
       }),
       tap((block: Block) => {
         this.block = block;
         this.blockHeight = block.height;
+        this.nextBlockHeight = block.height + 1;
+        this.setNextAndPreviousBlockLink();
+
         this.seoService.setTitle($localize`:@@block.component.browser-title:Block ${block.height}:BLOCK_HEIGHT:: ${block.id}:BLOCK_ID:`);
         this.isLoadingBlock = false;
         if (block.coinbaseTx) {
@@ -140,24 +159,46 @@ export class BlockComponent implements OnInit, OnDestroy {
       this.isLoadingBlock = false;
     });
 
-    this.stateService.blocks$
-      .subscribe(([block]) => this.latestBlock = block);
+    this.blocksSubscription = this.stateService.blocks$
+      .subscribe(([block]) => {
+        this.latestBlock = block;
+        this.latestBlocks.unshift(block);
+        this.latestBlocks = this.latestBlocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
+        this.setNextAndPreviousBlockLink();
+      });
 
-    this.stateService.networkChanged$
+    this.networkChangedSubscription = this.stateService.networkChanged$
       .subscribe((network) => this.network = network);
 
-    this.route.queryParams.subscribe((params) => {
+    this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
       if (params.showDetails === 'true') {
         this.showDetails = true;
       } else {
         this.showDetails = false;
       }
     });
+
+    this.keyNavigationSubscription = this.stateService.keyNavigation$.subscribe((event) => {
+      if (this.showPreviousBlocklink && event.key === 'ArrowRight' && this.nextBlockHeight - 2 >= 0) {
+        this.navigateToPreviousBlock();
+      }
+      if (event.key === 'ArrowLeft') {
+        if (this.showNextBlocklink) {
+          this.navigateToNextBlock();
+        } else {
+          this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/mempool-block/', '0']);
+        }
+      }
+    });
   }
 
   ngOnDestroy() {
     this.stateService.markBlock$.next({});
     this.subscription.unsubscribe();
+    this.keyNavigationSubscription.unsubscribe();
+    this.blocksSubscription.unsubscribe();
+    this.networkChangedSubscription.unsubscribe();
+    this.queryParamsSubscription.unsubscribe();
   }
 
   setBlockSubsidy() {
@@ -173,15 +214,17 @@ export class BlockComponent implements OnInit, OnDestroy {
     }
   }
 
-  pageChange(page: number) {
+  pageChange(page: number, target: HTMLElement) {
     const start = (page - 1) * this.itemsPerPage;
     this.isLoadingTransactions = true;
     this.transactions = null;
+    target.scrollIntoView(); // works for chrome
 
     this.electrsApiService.getBlockTransactions$(this.block.id, start)
      .subscribe((transactions) => {
         this.transactions = transactions;
         this.isLoadingTransactions = false;
+        target.scrollIntoView(); // works for firefox
       });
   }
 
@@ -216,4 +259,36 @@ export class BlockComponent implements OnInit, OnDestroy {
     }
     return this.block && this.block.height > 681393 && (new Date().getTime() / 1000) < 1628640000;
   }
+
+  onResize(event: any) {
+    this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
+  }
+
+  navigateToPreviousBlock() {
+    if (!this.block) {
+      return;
+    }
+    const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight - 2);
+    this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/block/', block ? block.id : this.block.previousblockhash], { state: { data: { block, blockHeight: this.nextBlockHeight - 2 } } });
+  }
+
+  navigateToNextBlock() {
+    const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight);
+    this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/block/', block ? block.id : this.nextBlockHeight], { state: { data: { block, blockHeight: this.nextBlockHeight } } });
+  }
+
+  setNextAndPreviousBlockLink(){
+    if (this.latestBlock && this.blockHeight) {
+      if (this.blockHeight === 0){
+        this.showPreviousBlocklink = false;
+      } else {
+        this.showPreviousBlocklink = true;
+      }
+      if (this.latestBlock.height && this.latestBlock.height === this.blockHeight) {
+        this.showNextBlocklink = false;
+      } else {
+        this.showNextBlocklink = true;
+      }
+    }
+  }
 }

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

@@ -1,16 +1,16 @@
-<div class="blocks-container" *ngIf="blocks.length">
+<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" 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]">
       <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>
       </div>
       <div class="block-body">
         <div class="fees">
-          ~{{ block.medianFee | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          ~{{ block.medianFee | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
         <div class="fee-span">
-          {{ block.feeRange[1] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          {{ 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="transaction-count">
@@ -24,3 +24,14 @@
   </div>
   <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>
+
+<ng-template #loadingBlocksTemplate >
+  <div class="blocks-container">
+    <div class="flashing">
+      <div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn" >
+        <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="emptyBlockStyles[i]"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+

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

@@ -108,3 +108,15 @@
   border-right: 35px solid transparent;
   border-bottom: 35px solid #FFF;
 }
+
+.flashing {
+  animation: opacityPulse 2s ease-out;
+  animation-iteration-count: infinite; 
+  opacity: 1;
+}
+
+@keyframes opacityPulse {
+  0% {opacity: 0.7;}
+  50% {opacity: 1.0;}
+  100% {opacity: 0.7;}
+}

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } 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';
@@ -11,17 +11,21 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainBlocksComponent implements OnInit, OnDestroy {
+  
   network = '';
   blocks: Block[] = [];
+  emptyBlocks: Block[] = this.mountEmptyBlocks();
   markHeight: number;
   blocksSubscription: Subscription;
-  networkSubscriotion: Subscription;
+  networkSubscription: Subscription;
   tabHiddenSubscription: Subscription;
   markBlockSubscription: Subscription;
+  loadingBlocks$: Observable<boolean>;
   blockStyles = [];
+  emptyBlockStyles = [];
   interval: any;
   tabHidden = false;
-
+  feeRounding = '1.0-0';
   arrowVisible = false;
   arrowLeftPx = 30;
   blocksFilled = false;
@@ -42,9 +46,13 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.networkSubscriotion = this.stateService.networkChanged$.subscribe((network) => this.network = network);
+    if (this.stateService.network === 'liquid') {
+      this.feeRounding = '1.0-1';
+    }
+    this.emptyBlocks.forEach((b) => this.emptyBlockStyles.push(this.getStyleForEmptyBlock(b)));
+    this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;
+    this.networkSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
     this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
-
     this.blocksSubscription = this.stateService.blocks$
       .subscribe(([block, txConfirmed]) => {
         if (this.blocks.some((b) => b.height === block.height)) {
@@ -57,7 +65,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         }
 
         this.blocks.unshift(block);
-        this.blocks = this.blocks.slice(0, 8);
+        this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
 
         if (this.blocksFilled && !this.tabHidden) {
           block.stage = block.matchRate >= 66 ? 1 : 2;
@@ -93,33 +101,11 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         this.moveArrowToPosition(false);
         this.cd.markForCheck();
       });
-
-    this.stateService.keyNavigation$.subscribe((event) => {
-      if (!this.markHeight) {
-        return;
-      }
-
-      if (event.key === 'ArrowRight') {
-        const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
-        if (this.blocks[blockindex + 1]) {
-          this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
-            this.blocks[blockindex + 1].id], { state: { data: { block: this.blocks[blockindex + 1] } } });
-        }
-      } else if (event.key === 'ArrowLeft') {
-        const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
-        if (blockindex === 0) {
-          this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', '0']);
-        } else {
-          this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
-            this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
-        }
-      }
-    });
   }
 
   ngOnDestroy() {
     this.blocksSubscription.unsubscribe();
-    this.networkSubscriotion.unsubscribe();
+    this.networkSubscription.unsubscribe();
     this.tabHiddenSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
     clearInterval(this.interval);
@@ -160,7 +146,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   }
 
   getStyleForBlock(block: Block) {
-    const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100;
+    const greenBackgroundHeight = 100 - (block.weight / this.stateService.env.BLOCK_WEIGHT_UNITS) * 100;
     let addLeft = 0;
 
     if (block.stage === 1) {
@@ -179,4 +165,40 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     };
   }
 
+  getStyleForEmptyBlock(block: Block) {
+    let addLeft = 0;
+
+    if (block.stage === 1) {
+      block.stage = 2;
+      addLeft = -205;
+    }
+
+    return {
+      left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
+      background: "#2d3348",
+    };
+  }
+
+  mountEmptyBlocks() {
+    const emptyBlocks = [];
+    for (let i = 0; i < this.stateService.env.KEEP_BLOCKS_AMOUNT; i++) {
+      emptyBlocks.push({
+        id: '',
+        height: 0,
+        version: 0,
+        timestamp: 0,
+        bits: 0,
+        nonce: 0,
+        difficulty: 0,
+        merkle_root: '',
+        tx_count: 0,
+        size: 0,
+        weight: 0,
+        previousblockhash: '',
+        matchRate: 0,
+        stage: 0,
+      });
+    }
+    return emptyBlocks;
+  }
 }

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

@@ -1,15 +1,9 @@
 <div class="text-center" class="blockchain-wrapper">
-  <div class="position-container" [hidden]="(isLoading$ | async) === true">
+  <div class="position-container {{ network }}">
     <span>
       <app-mempool-blocks></app-mempool-blocks>
       <app-blockchain-blocks></app-blockchain-blocks>
       <div id="divider"></div>
     </span>
   </div>
-  <div *ngIf="(isLoading$ | async) === true" class="position-container loading">
-    <div class="loading-block">
-      <h3 i18n="blockchain.waiting-for-blocks|Loading text">Waiting for blocks...</h3>
-      <div class="spinner-border text-light mt-2"></div>
-    </div>
-  </div>
 </div>

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

@@ -26,10 +26,17 @@
   top: 75px;
 }
 
+.position-container.liquid {
+  left: 420px;
+}
+
 @media (max-width: 767.98px) {
   .position-container {
     left: 95%;
   }
+  .position-container.liquid {
+    left: 50%;
+  }
   .position-container.loading {
     left: 50%;
   }

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

@@ -1,6 +1,5 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
-import { Subscription, Observable } from 'rxjs';
 
 @Component({
   selector: 'app-blockchain',
@@ -9,13 +8,13 @@ import { Subscription, Observable } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockchainComponent implements OnInit {
-  isLoading$: Observable<boolean>;
+  network: string;
 
   constructor(
     private stateService: StateService,
   ) {}
 
   ngOnInit() {
-    this.isLoading$ = this.stateService.isLoadingWebSocket$;
+    this.network = this.stateService.network;
   }
 }

frontend/src/app/components/fees-box/fees-box.component.html

@@ -2,20 +2,20 @@
   <div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
     <div class="item">
       <h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
-      <div class="card-text">
-        <div class="fee-text">{{ feeEstimations.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.hourFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
+        <div class="fee-text">{{ feeEstimations.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.hourFee * 140" ></app-fiat></span>
       </div>
     </div>
     <div class="item">
       <h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
-      <div class="card-text">
-        <div class="fee-text">{{ feeEstimations.halfHourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.halfHourFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
+        <div class="fee-text">{{ feeEstimations.halfHourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.halfHourFee * 140" ></app-fiat></span>
       </div>
     </div>
     <div class="item">
       <h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
-      <div class="card-text">
-        <div class="fee-text">{{ feeEstimations.fastestFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.fastestFee * 140" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
+        <div class="fee-text">{{ feeEstimations.fastestFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="feeEstimations.fastestFee * 140" ></app-fiat></span>
       </div>
     </div>
   </div>

frontend/src/app/components/fees-box/fees-box.component.scss

@@ -73,11 +73,12 @@
   .skeleton-loader {
     width: 100%;
     display: block;
-    margin: 9px auto;
     &:first-child {
       max-width: 90px;
+      margin: 15px auto 3px;
     }
     &:last-child {
+      margin: 10px auto 3px;
       max-width: 55px;
     }
   }

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

@@ -4,7 +4,7 @@
       <div class="col d-none d-sm-block">
         <span class="txPerSecond" i18n="footer.tx-vbytes-per-second">Tx vBytes per second:</span>
         <span *ngIf="mempoolInfoData.vBytesPerSecond === 0; else inSync">
-          &nbsp;<span class="badge badge-pill badge-warning" i18n="footer.backend-is-synchronizing">Backend is synchronizing</span>
+          &nbsp;<span class="badge badge-pill badge-warning" i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</span>
         </span>
         <ng-template #inSync>
           <div class="progress sub-text">
@@ -19,8 +19,8 @@
       <div class="col">
         <span class="mempoolSize"><ng-container i18n="dashboard.mempool-size|Mempool size">Mempool size</ng-container>:</span>
         <div class="sub-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData"><span [innerHtml]="mempoolBlocksData.size | bytes"></span> (<ng-container *ngTemplateOutlet="mempoolBlocksData.blocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: mempoolBlocksData.blocks }"></ng-container>)</div>
-          <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} block</ng-template>
-          <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
+        <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+        <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
       </div>
     </div>
   </div>

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

@@ -64,7 +64,7 @@ export class FooterComponent implements OnInit {
 
           return {
             size: size,
-            blocks: Math.ceil(vsize / 1000000)
+            blocks: Math.ceil(vsize / this.stateService.blockVSize)
           };
         })
       );

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

@@ -43,6 +43,11 @@ export class LanguageSelectorComponent implements OnInit {
     try {
       document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`;
     } catch (e) { }
-    this.document.location.href = `/${language}/${this.stateService.network}`;
+    
+    if (this.stateService.env.BASE_MODULE === 'mempool') {
+      this.document.location.href = `/${language}/${this.stateService.network}`;
+    } else {
+      this.document.location.href = `/${language}`;
+    }
   }
 }

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

@@ -20,7 +20,7 @@
         <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
         <td>
           <div class="progress">
-            <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
+            <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
             <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
           </div>
         </td>

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

@@ -29,7 +29,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
 
   constructor(
     private electrsApiService: ElectrsApiService,
-    private stateService: StateService,
+    public stateService: StateService,
     private seoService: SeoService,
     private websocketService: WebsocketService,
     private cd: ChangeDetectorRef,

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

@@ -0,0 +1,62 @@
+<header>
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
+    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
+      <img src="./resources/liquid/liquid-network-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
+      <div class="connection-badge">
+        <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
+        <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
+      </div>
+    </ng-container>
+  </a>
+
+  <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
+      <img src="./resources/liquid-logo.png" style="width: 25px; height: 25px;" class="mr-1">
+    </button>
+    <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
+      <a href="https://mempool.space" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
+      <a href="https://mempool.space/signet" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
+      <a href="https://mempool.space/testnet" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
+      <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
+      <a href="https://bisq.markets" ngbDropdownItem class="mainnet"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
+      <button ngbDropdownItem class="liquid active" routerLink="/"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
+    </div>
+  </div>
+
+  <div class="navbar-collapse" id="navbarCollapse">
+    <ul class="navbar-nav liquid">
+      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
+        <a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" i18n-title="master-page.dashboard" title="Dashboard"></fa-icon></a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
+      </li>
+      <!--
+      <li class="nav-item d-none d-lg-block" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>
+      </li>
+      -->
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/assets']" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
+      </li>
+      <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
+      </li>
+    </ul>
+    <app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
+  </div>
+</nav>
+</header>
+
+<br />
+
+<router-outlet></router-outlet>
+
+<br>

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

@@ -0,0 +1,135 @@
+li.nav-item.active {
+  background-color: #653b9c;
+}
+
+fa-icon {
+  font-size: 1.66em;
+}
+
+.navbar {
+  z-index: 100;
+  min-height: 64px;
+}
+
+li.nav-item {
+  margin: auto 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+@media (min-width: 992px) {
+  .navbar {
+    padding: 0rem 2rem;
+  }
+  fa-icon {
+    font-size: 1.2em;
+  }
+  .dropdown-container {
+    margin-right: 16px;
+  }
+  li.nav-item {
+    margin: auto 0px;
+    padding: 10px;
+  }
+}
+
+.navbar-nav {
+  background: #212121;
+  bottom: 0;
+  box-shadow: 0px 0px 15px 0px #000;
+  flex-direction: row;
+  left: 0;
+  justify-content: center;
+  position: fixed;
+  width: 100%;
+  @media (min-width: 992px) {
+    background: transparent;
+    box-shadow: none;
+    position: relative;
+    width: auto;
+  }
+  a {
+    font-size: 0.8em;
+    @media (min-width: 375px) {
+      font-size: 1em;
+    }
+  }
+}
+
+
+.navbar-collapse {
+  flex-basis: auto;
+  justify-content: flex-end;
+}
+
+@media (min-width: 992px) {
+  .navbar-collapse {
+    justify-content: space-between;
+  }
+}
+
+.navbar-brand {
+  width: 60%;
+}
+
+@media (min-width: 576px) {
+  .navbar-brand {
+    width: 130px;
+  }
+}
+
+nav {
+  box-shadow: 0px 0px 15px 0px #000;
+}
+
+.connection-badge {
+  position: absolute;
+  top: 13px;
+  left: 0px;
+  width: 130px;
+}
+
+.badge {
+  margin: 0 auto;
+  display: table;
+}
+
+.mainnet.active {
+  background-color: #653b9c;
+}
+
+.liquid.active {
+  background-color: #116761;
+}
+
+.testnet.active {
+  background-color: #1d486f;
+}
+
+.signet.active {
+  background-color: #6f1d5d;
+}
+
+.dropdown-divider {
+  border-top: 1px solid #121420;
+}
+
+.dropdown-toggle::after {
+  vertical-align: 0.1em;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+}
+
+@media (min-width: 992px) {
+  .search-form-container {
+    width: 100%;
+    max-width: 500px;
+    padding-left: 15px;
+  }
+}
+.navbar-dark .navbar-nav .nav-link {
+  color: #f1f1f1;
+}