Pull from transifex

fixes #609

.github/workflows/cypress.yml

@@ -0,0 +1,34 @@
+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
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: frontend
+          build: npm run config:defaults
+          start: npm run start:local-prod
+          wait-on: 'http://localhost:4200'
+          wait-on-timeout: 120
+          record: true
+          parallel: true
+          group: Tests on ${{ matrix.browser }}
+          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/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "mempool-backend",
-  "version": "2.2.0",
+  "version": "2.2.1-dev",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mempool-backend",
-      "version": "2.2.0",
+      "version": "2.2.1-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.1-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,15 @@ 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() { }
@@ -43,10 +46,21 @@ class Blocks {
     }
 
     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) {
@@ -101,7 +115,9 @@ class Blocks {
       blockExtended.feeRange = transactions.length > 1 ? 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);
@@ -122,6 +138,10 @@ class Blocks {
     return this.lastDifficultyAdjustmentTime;
   }
 
+  public getPreviousDifficultyRetarget(): number {
+    return this.previousDifficultyRetarget;
+  }
+
   public getCurrentBlockHeight(): number {
     return this.currentBlockHeight;
   }

backend/src/api/common.ts

@@ -105,7 +105,7 @@ export class Common {
       totalFees += tx.bestDescendant.fee;
     }
 
-    tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+    tx.effectiveFeePerVsize = Math.max(1, totalFees / (totalWeight / 4));
     tx.cpfpChecked = true;
 
     return {

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 {
@@ -172,6 +179,7 @@ class WebsocketHandler {
       '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/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,47 @@ class Routes {
   public getTransactionOutspends(req: Request, res: Response) {
     res.status(501).send('Not implemented');
   }
+
+  public getDifficultyChange(req: Request, res: Response) {
+    try {
+      const now = new Date().getTime() / 1000;
+      const DATime = blocks.getLastDifficultyAdjustmentTime();
+      const previousRetarget = blocks.getPreviousDifficultyRetarget();
+      const diff = now - DATime;
+      const blockHeight = blocks.getCurrentBlockHeight();
+      const blocksInEpoch = blockHeight % 2016;
+      const difficultyChange = (600 / (diff / blocksInEpoch) - 1) * 100;
+
+      const timeAvgDiff = difficultyChange * 0.1;
+
+      let timeAvgMins = 10;
+      if (timeAvgDiff > 0 ){
+        timeAvgMins -= Math.abs(timeAvgDiff);
+      } else {
+        timeAvgMins += Math.abs(timeAvgDiff);
+      }
+
+      const remainingBlocks = 2016 - blocksInEpoch;
+      const timeAvgSeconds = timeAvgMins * 60;
+      const remainingTime = remainingBlocks * timeAvgSeconds;
+      const estimatedRetargetDate = (remainingTime + now);
+      const totalTime = estimatedRetargetDate-DATime;
+      const progressPercent = 100 - ((remainingTime * 100) / totalTime);
+
+      const result={
+        progressPercent,
+        difficultyChange,
+        estimatedRetargetDate,
+        remainingBlocks,
+        remainingTime,
+        previousRetarget,
+      }
+      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/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/"
           }
         }
       },
@@ -192,7 +203,7 @@
               "proxyConfig": "proxy.prod.conf.json",
               "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,6 +1,5 @@
 describe('Bisq', () => {
     beforeEach(() => {
-
         cy.intercept('/sockjs-node/info*').as('socket');
         cy.intercept('/bisq/api/markets/hloc?market=btc_usd&interval=day').as('hloc');
         cy.intercept('/bisq/api/markets/ticker').as('ticker');
@@ -10,32 +9,42 @@ describe('Bisq', () => {
         cy.intercept('/bisq/api/txs/*/*').as('txs');
         cy.intercept('/bisq/api/blocks/*/*').as('blocks');
         cy.intercept('/bisq/api/stats').as('stats');
+        
+        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 dashboard', () => {
-      cy.visit('/bisq');
 
-      cy.wait('@socket');
-      cy.wait('@hloc');
-      cy.wait('@ticker');
-      cy.wait('@markets');
-      cy.wait('@7d');
-      cy.wait('@trades');
+    it('loads the dashboard', () => {
+        cy.visit('/bisq');
+        cy.waitForSkeletonGone();
     });
 
     it('loads the transactions screen', () => {
         cy.visit('/bisq');
+        cy.waitForSkeletonGone();
         cy.get('li:nth-of-type(2) > a').click().then(() => {
-            cy.wait('@txs');
+            cy.get('.table > tr').should('have.length', 50);
         });
     });
+
     it('loads the blocks screen', () => {
         cy.visit('/bisq');
+        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('/bisq');
+        cy.waitForSkeletonGone();
         cy.get('li:nth-of-type(4) > a').click().then(() => {
             cy.wait('@stats');
         });
@@ -43,9 +52,30 @@ describe('Bisq', () => {
 
     it('loads the api screen', () => {
         cy.visit('/bisq');
+        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('/bisq/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('/bisq/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);
+    });
+
   });

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

@@ -1,33 +1,41 @@
 describe('Liquid', () => {
     beforeEach(() => {
-        // TODO: Fix ng serve to deliver these files
-        cy.fixture('assets.minimal').then((json) => {
-            cy.intercept('/resources/assets.minimal.json', json);
-        });
+        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');
 
-        cy.fixture('assets').then((json) => {
-            cy.intercept('/resources/assets.json', json);
-        });
+        Cypress.Commands.add('waitForBlockData', () => {
+            cy.wait('@socket');
+            cy.wait('@block');
+            cy.wait('@outspends');
+          });
     });
 
     it('loads the dashboard', () => {
         cy.visit('/liquid');
+        cy.waitForSkeletonGone();
     });
 
     it('loads the blocks page', () => {
         cy.visit('/liquid/blocks');
+        cy.waitForSkeletonGone();
     });
 
     it('loads a specific block page', () => {
-        cy.visit('/liquid/blocks');
+        cy.visit('/liquid/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54');
+        cy.waitForSkeletonGone();
     });
 
     it('loads the graphs page', () => {
         cy.visit('/liquid/graphs');
+        cy.waitForSkeletonGone();
     });
 
     it('loads the tv page - desktop', () => {
         cy.visit('/liquid');
+        cy.waitForSkeletonGone();
         cy.get('li:nth-of-type(3) > a').click().then(() => {
             cy.wait(1000);
         });
@@ -35,47 +43,107 @@ describe('Liquid', () => {
 
     it('loads the graphs page - mobile', () => {
         cy.visit('/liquid');
+        cy.waitForSkeletonGone();
         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')
+            cy.get('.tv-only').should('not.exist');
         });
     });
 
     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('shows the assets screen', () => {
+            cy.visit('/liquid');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(5) > a').click().then(() => {
+                cy.get('table tr').should('have.length', 5);
             });
         });
-      });
 
-      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('allows searching assets', () => {
+            cy.visit('/liquid');
+            cy.waitForSkeletonGone();
+            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('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();
+        it('shows a specific asset ID', () => {
+            cy.visit('/liquid');
+            cy.waitForSkeletonGone();
+            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('shows a specific asset issuance TX', () => {
+            cy.visit('/liquid');
+            cy.waitForSkeletonGone();
+            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('unblinded TX', () => {
+        it('show unblinded TX', () => {
+            cy.visit('/liquid/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('/liquid/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('/liquid/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('/liquid/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('/liquid/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('/liquid/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('/liquid/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('/liquid/tx/393b890966f305e7c440fcfb12a13f51a7a9011cc59ff5f14f6f93214261bd82');
+            cy.waitForSkeletonGone();
+        });
+    });
+
 });

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

@@ -1,59 +1,130 @@
+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);
+        Cypress.Commands.add('waitForBlockData', () => {
+            cy.wait('@tx-outspends');
+            cy.wait('@pools');
         });
     });
 
+    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('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('loads the dashboard', () => {
-      cy.visit('/');
-      cy.wait(1000);
+        cy.visit('/');
+        cy.waitForSkeletonGone();
+    });
+
+    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.wait(1000);
+            cy.waitForPageIdle();
         });
     });
 
     it('loads the graphs screen', () => {
         cy.visit('/');
+        cy.waitForSkeletonGone();
         cy.get('li:nth-of-type(3) > a').click().then(() => {
             cy.wait(1000);
         });
     });
 
-    describe('tv mode', () => {
-        it('loads the tv screen - desktop', () => {
+    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.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');
-            });
+            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);
         });
@@ -62,12 +133,15 @@ describe('Mainnet', () => {
     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.wait('@tx-outspends');
+            cy.waitForSkeletonGone();
+            cy.waitForPageIdle();
             cy.get('.btn.btn-outline-info').click().then(() => {
                 cy.get('#details').should('be.visible');
             });
@@ -76,23 +150,49 @@ describe('Mainnet', () => {
                 cy.get('#details').should('not.be.visible');
             });
         });
-
         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);
+            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.get('.header-bg.box > a').invoke('text').then((text1) => {
+            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);
+        });
     });
 });

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

@@ -1,10 +1,126 @@
+import { emitMempoolInfo } from "../../support/websocket";
+
 describe('Signet', () => {
-    it('loads the dashboard', () => {
+  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');
+  });
+
+  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.skip('loads all the pages properly', () => {
+  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);
+                  });
+              });
+          });
+      });
+  });
 
   });

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

@@ -1,9 +1,122 @@
+import { emitMempoolInfo } from "../../support/websocket";
+
 describe('Testnet', () => {
-    it('loads the dashboard', () => {
-      cy.visit('/testnet');
+  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');
+  });
+
+  it('loads the dashboard', () => {
+    cy.visit('/testnet');
+    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': {
+          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.skip('loads all the pages properly', () => {
+  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);
+                  });
+              });
+          });
+      });
     });
   });

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

@@ -43,3 +43,35 @@
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
 import 'cypress-wait-until';
+import { PageIdleDetector } from './PageIdleDetector';
+import { mockWebSocket } from './websocket';
+
+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();
+            }
+        });
+    });
+});

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-frontend",
-  "version": "2.2.0",
+  "version": "2.2.1-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",
@@ -38,12 +38,17 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
+    "e2e:ci": "npm run cypress:run:ci",
+    "config:defaults": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && 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 +66,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 +90,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 +109,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.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,6 +16,8 @@ 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';
 
@@ -66,6 +68,14 @@ let routes: Routes = [
         path: 'terms-of-service',
         component: TermsOfServiceComponent
       },
+      {
+        path: 'privacy-policy',
+        component: PrivacyPolicyComponent
+      },
+      {
+        path: 'trademark-policy',
+        component: TrademarkPolicyComponent
+      },
       {
         path: 'address/:id',
         children: [],

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

@@ -32,7 +32,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';
@@ -45,10 +45,12 @@ 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';
+  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';
@@ -71,7 +73,7 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     AmountComponent,
     LatestBlocksComponent,
     SearchFormComponent,
-    TimespanComponent,
+    TimeSpanComponent,
     AddressLabelsComponent,
     MempoolBlocksComponent,
     ChartistComponent,
@@ -88,6 +90,8 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     ApiDocsComponent,
     CodeTemplateComponent,
     TermsOfServiceComponent,
+    PrivacyPolicyComponent,
+    TrademarkPolicyComponent,
     SponsorComponent,
   ],
   imports: [
@@ -136,5 +140,10 @@ 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);
   }
 }

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-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) | 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>
+
+      <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-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

@@ -9,7 +9,7 @@
   </div>
 
   <div class="about-text">
-    <h5><ng-container i18n="about.about-the-project">The Mempool Open Source Project</ng-container> &trade;</h5>
+    <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>
 
@@ -43,6 +43,10 @@
         <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>
     </div>
   </div>
 
@@ -115,6 +119,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 +183,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.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';
@@ -28,6 +28,7 @@ export class AboutComponent implements OnInit {
     private stateService: StateService,
     private apiService: ApiService,
     private router: Router,
+    @Inject(LOCALE_ID) public locale: string,
   ) { }
 
   ngOnInit() {

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

@@ -5,8 +5,32 @@
   </div>
 
   <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
-
     <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="0">
+      <a ngbNavLink i18n="api-docs.tab.general|API Docs tab for General">General</a>
+      <ng-template ngbNavContent>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark">
+          <ngb-panel id="difficultyAdjustment" *ngIf="network.val !== 'liquid'">
+            <ng-template ngbPanelTitle>
+              <span>GET Difficulty Adjustment</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="difficulty">
+                <div class="endpoint">
+                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                  <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/difficulty-adjustment" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/difficulty-adjustment</a>
+                </div>
+                <div class="description">
+                  <div class="subtitle" i18n>Description</div>
+                    <div i18n>Returns details about difficulty adjustment.</div>
+                </div> 
+                <app-code-template [code]="code.difficulty" [network]="network.val" ></app-code-template>
+              </div>
+            </ng-template>
+          </ngb-panel>
+        </ngb-accordion>
+      </ng-template>
+    </li>
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="1">
       <a ngbNavLink i18n="api-docs.tab.addresses|API Docs tab for Addresses">Addresses</a>
       <ng-template ngbNavContent>
         <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
@@ -107,7 +131,7 @@
       </ng-template>
     </li>
 
-    <li *ngIf="network.val === 'liquid'" [ngbNavItem]="1">
+    <li *ngIf="network.val === 'liquid'" [ngbNavItem]="2">
       <a ngbNavLink i18n="api-docs.tab.assets|API Docs tab for Assets">Assets</a>
       <ng-template ngbNavContent>
         <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
@@ -169,7 +193,7 @@
       </ng-template>
     </li>
 
-    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="2">
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="3">
       <a ngbNavLink i18n="api-docs.tab.blocks|API Docs tab for Blocks">Blocks</a>
       <ng-template ngbNavContent>
         <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
@@ -190,6 +214,26 @@
             </ng-template>
           </ngb-panel>
 
+          <ngb-panel id="blockHeader">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Header</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/0000000000000000000065bda8f8a88f2e1e00d9a6887a43d640e52a4c7660f2/header" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/header</a>
+              </div>
+
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the hex-encoded block header.</div>
+              </div>
+
+              <app-code-template [code]="code.blockHeader" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
           <ngb-panel id="blockHeight">
             <ng-template ngbPanelTitle>
               <span>GET Block Height</span>
@@ -364,6 +408,46 @@
       </ng-template>
     </li>
 
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="4">
+      <a ngbNavLink i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</a>
+      <ng-template ngbNavContent>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark">
+          <ngb-panel id="mempoolBlocks">
+            <ng-template ngbPanelTitle>
+              <span>GET Mempool Blocks</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</div>
+              </div>
+              <app-code-template [code]="code.mempoolBlocks" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+          <ngb-panel id="recommendedFees">
+            <ng-template ngbPanelTitle>
+              <span>GET Recommended Fees</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</div>
+              </div>
+              <app-code-template [code]="code.recommendedFees" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+        </ngb-accordion>
+      </ng-template>
+    </li>
+
     <li *ngIf="network.val === 'bisq'" [ngbNavItem]="0">
       <a ngbNavLink i18n="api-docs.tab.bsq|API Docs tab for BSQ">BSQ</a>
       <ng-template ngbNavContent>
@@ -513,62 +597,6 @@
       </ng-template>
     </li>
 
-    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="4">
-      <a ngbNavLink i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</a>
-      <ng-template ngbNavContent>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-          <ngb-panel id="recommendedFees">
-            <ng-template ngbPanelTitle>
-              <span>GET Recommended Fees</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="endpoint">
-                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended</a>
-              </div>
-              <div class="description">
-                <div class="subtitle" i18n>Description</div>
-                <div i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</div>
-              </div>
-              <app-code-template [code]="code.recommendedFees" [network]="network.val" ></app-code-template>
-            </ng-template>
-          </ngb-panel>
-          <ngb-panel id="mempoolBlocks">
-            <ng-template ngbPanelTitle>
-              <span>GET Mempool Blocks</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="endpoint">
-                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks</a>
-              </div>
-              <div class="description">
-                <div class="subtitle" i18n>Description</div>
-                <div i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</div>
-              </div>
-              <app-code-template [code]="code.mempoolBlocks" [network]="network.val" ></app-code-template>
-            </ng-template>
-          </ngb-panel>
-          <ngb-panel id="cpfp">
-            <ng-template ngbPanelTitle>
-              <span>GET Children Pay for Parent</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="endpoint">
-                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/TXID" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/:txid</a>
-              </div>
-              <div class="description">
-                <div class="subtitle" i18n>Description</div>
-                <div i18n="api-docs.fees.cpfp|API Docs for /api/v1/fees/cpfp">Returns the ancestors and the best descendant fees for a transaction.</div>
-              </div>
-              <app-code-template [code]="code.cpfp" [network]="network.val" ></app-code-template>
-            </ng-template>
-          </ngb-panel>
-        </ngb-accordion>
-      </ng-template>
-    </li>
-
     <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="5">
       <a ngbNavLink i18n="api-docs.tab.mempool|API Docs tab for Mempool">Mempool</a>
       <ng-template ngbNavContent>
@@ -633,6 +661,24 @@
       <a ngbNavLink i18n="api-docs.tab.transactions|API Docs tab for Transactions">Transactions</a>
       <ng-template ngbNavContent>
         <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel id="cpfp">
+            <ng-template ngbPanelTitle>
+              <span>GET Children Pay for Parent</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/TXID" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/:txid</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.cpfp|API Docs for /api/v1/fees/cpfp">Returns the ancestors and the best descendant fees for a transaction.</div>
+              </div>
+              <app-code-template [code]="code.cpfp" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
           <ngb-panel id="transaction">
             <ng-template ngbPanelTitle>
               <span>GET Transaction</span>
@@ -822,7 +868,6 @@
         </div>
       </ng-template>
     </li>
-
   </ul>
 
   <div [ngbNavOutlet]="nav" class="mt-2"></div>
@@ -831,7 +876,9 @@
 
   <div class="text-center">
     <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+    |
+    <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
   </div>
 
 </div>
-</ng-container>
+</ng-container>

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/api-docs.component.ts

@@ -175,7 +175,21 @@ export class ApiDocsComponent implements OnInit {
     bits: 404111758,
     difficulty: 49402014931
   }`,
-    },
+      },
+      blockHeader: {
+        codeSample: {
+          esModule: `const { %{1}: { blocks } } = mempoolJS();
+
+  const blockHeader = await blocks.getBlockHeader({ hash: '0000000000000000000065bda8f8a88f2e1e00d9a6887a43d640e52a4c7660f2' });
+  console.log(blockHeader);`,
+          commonJS: `const { %{1}: { blocks } } = mempoolJS();
+
+        const blockHeight = await blocks.getBlockHeight({ height: 0 });
+        console.log(blockHeight);`,
+          curl: `curl -X GET "https://mempool.space/api/block/:hash/header"`,
+        },
+        responseSample: `040000202c04d4c450187d1da9b1bc23ba47d67fe028d22486fd0c00000000000000000059a3a33d4642c799af9f54a4dd351fff9130e6a89d4e251130c60064878616e906b5ea60ce9813173a25caf3`,
+        },
     blockHeight: {
       codeSample: {
         esModule: `const { %{1}: { blocks } } = mempoolJS();
@@ -1125,7 +1139,30 @@ responseSample: `{
         curl: ``,
       },
       responseSample: ``,
-    }
+    },
+
+     difficulty: {
+      codeSample: {
+        esModule:`const { bitcoin: { difficulty } } = mempoolJS();
+
+  const difficultyAdjustment = await difficulty.getDifficultyAdjustment();
+  console.log(difficultyAdjustment);`,
+        commonJS:`const { bitcoin: { difficulty } } = mempoolJS();
+
+        const difficultyAdjustment = await difficulty.getDifficultyAdjustment();
+        console.log(difficultyAdjustment);`,
+        curl: `curl -X GET "https://mempool.space/api/v1/difficulty-adjustment"`,
+      },
+      responseSample: `{
+  progressPercent: 44.397234501112074,
+  difficultyChange: 0.9845932018381687,
+  estimatedRetargetDate: 1627762478.9111245,
+  remainingBlocks: 1121,
+  remainingTime: 665977.6261244365,
+  previousRetarget: -4.807005268478962
+}`,
+    },
+    
   };
 
   constructor(

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="https://github.com/mempool/mempool.js" target="_blank">github repository</a>
         </div>
         <pre><code [innerText]="wrapCommonJS(code.codeSample.commonJS)"></code></pre>
       </ng-template>
@@ -22,8 +22,8 @@
       <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="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="https://github.com/mempool/mempool.js" target="_blank">github repository</a>
+          <a href="https://www.npmjs.org/package/@mempool/mempool.js" target="_blank">npm package</a>
         </div>
         <pre><code [innerText]="esModuleInstall"></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>

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 {

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

@@ -1,4 +1,4 @@
-<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>
@@ -92,14 +92,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 +114,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 +126,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 +170,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

@@ -71,4 +71,43 @@ 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;
+    }
+  }
 }

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';
@@ -46,7 +46,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;
 
@@ -173,15 +173,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 +218,8 @@ 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;
+  }
 }

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

@@ -1,4 +1,4 @@
-<div class="blocks-container" *ngIf="blocks.length">
+<div class="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]">
       <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
@@ -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,14 +11,18 @@ 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;
 
@@ -42,9 +46,10 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.networkSubscriotion = this.stateService.networkChanged$.subscribe((network) => this.network = network);
+    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)) {
@@ -119,7 +124,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.blocksSubscription.unsubscribe();
-    this.networkSubscriotion.unsubscribe();
+    this.networkSubscription.unsubscribe();
     this.tabHiddenSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();
     clearInterval(this.interval);
@@ -179,4 +184,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 < 8; 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">
     <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.ts

@@ -1,21 +1,11 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
-import { StateService } from 'src/app/services/state.service';
-import { Subscription, Observable } from 'rxjs';
-
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 @Component({
   selector: 'app-blockchain',
   templateUrl: './blockchain.component.html',
   styleUrls: ['./blockchain.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BlockchainComponent implements OnInit {
-  isLoading$: Observable<boolean>;
+export class BlockchainComponent {
 
-  constructor(
-    private stateService: StateService,
-  ) {}
-
-  ngOnInit() {
-    this.isLoading$ = this.stateService.isLoadingWebSocket$;
-  }
+  constructor() { }
 }

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/master-page/master-page.component.html

@@ -20,7 +20,7 @@
       <button ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</button>
       <button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button>
       <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
-      <button ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="mainnet" [class.active]="network.val === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
+      <button ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="bisq" [class.active]="network.val === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
       <button ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'" routerLink="/liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
     </div>
   </div>

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

@@ -1,43 +1,51 @@
-<div class="mempool-blocks-container">
-  <div class="flashing">
-    <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
-      <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
-        <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
-        <div class="block-body">
-          <div class="fees">
-            ~{{ projectedBlock.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
-          </div>
-          <div class="fee-span">
-            {{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
-          </div>
-          <div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">&lrm;</div>
-          <div class="transaction-count">
-            <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
-            <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
-            <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
-          </div>
-          <div class="time-difference" *ngIf="projectedBlock.blockVSize <= 1000000; else mergedBlock">
-            <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
-              <ng-container *ngTemplateOutlet="1 * i + 1 === 1 ? nextBlockEta : nextBlockEtaPlural; context:{ $implicit: 1 * i + 1 }"></ng-container>
-            </ng-template>
-            <ng-template #timeDiffMainnet>
-              <ng-container *ngTemplateOutlet="nextBlockEtaPlural; context:{ $implicit: 10 * i + 10 }"></ng-container>
-            </ng-template>
-          </div>
-          <ng-template #mergedBlock>
-            <div class="time-difference">
-              <b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>)</b>
-              <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
+<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
+  <div class="mempool-blocks-container" *ngIf="(timeAvg$ | async) as timeAvg;">
+    <div class="flashing">      
+      <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
+        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
+          <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
+          <div class="block-body">
+            <div class="fees">
+              ~{{ projectedBlock.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
             </div>
-          </ng-template>
+            <div class="fee-span">
+              {{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
+            </div>
+            <div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">&lrm;</div>
+            <div class="transaction-count">
+              <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
+              <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+              <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+            </div>
+            <div class="time-difference" *ngIf="projectedBlock.blockVSize <= 1000000; else mergedBlock">
+              <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
+                <app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
+              </ng-template>
+              <ng-template #timeDiffMainnet>
+                <app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
+              </ng-template>
+            </div>
+            <ng-template #mergedBlock>
+              <div class="time-difference">
+                <b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>)</b>
+                <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+              </div>
+            </ng-template>
+          </div>
+          <span class="animated-border"></span>
         </div>
-        <span class="animated-border"></span>
-      </div>
-    </ng-template>
+      </ng-template>
+    </div>
+    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
   </div>
-  <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
-</div>
+</ng-container>
 
-<ng-template let-i #nextBlockEtaPlural i18n="mempool-blocks.eta-of-next-block-plural|Block Frequency (plural)">In ~{{ i }} minutes</ng-template>
-
-<ng-template let-i #nextBlockEta i18n="mempool-blocks.eta-of-next-block|Block Frequency">In ~{{ i }} minute</ng-template>
+<ng-template #loadingBlocks>
+  <div class="mempool-blocks-container">
+    <div class="flashing">
+      <ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
+        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
+      </ng-template>
+    </div>
+  </div>
+</ng-template>

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

@@ -1,9 +1,9 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { Subscription, Observable, fromEvent, merge, of } from 'rxjs';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
+import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer } from 'rxjs';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
-import { take, map, switchMap } from 'rxjs/operators';
+import { take, map, switchMap, share } from 'rxjs/operators';
 import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
 
 @Component({
@@ -13,15 +13,22 @@ import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MempoolBlocksComponent implements OnInit, OnDestroy {
-  mempoolBlocks: MempoolBlock[];
-  mempoolBlocks$: Observable<MempoolBlock[]>;
 
-  mempoolBlocksFull: MempoolBlock[];
+  mempoolBlocks: MempoolBlock[] = [];
+  mempoolEmptyBlocks: MempoolBlock[] = this.mountEmptyBlocks();
+  mempoolBlocks$: Observable<MempoolBlock[]>;
+  timeAvg$: Observable<number>;
+  loadingBlocks$: Observable<boolean>;
+
+  mempoolBlocksFull: MempoolBlock[] = [];
   mempoolBlockStyles = [];
+  mempoolEmptyBlockStyles = [];
   markBlocksSubscription: Subscription;
+  isLoadingWebsocketSubscription: Subscription;
   blockSubscription: Subscription;
   networkSubscription: Subscription;
   network = '';
+  now = new Date().getTime();
 
   blockWidth = 125;
   blockPadding = 30;
@@ -45,7 +52,18 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
+    this.mempoolEmptyBlocks.forEach((b) => {
+      this.mempoolEmptyBlockStyles.push(this.getStyleForMempoolEmptyBlock(b.index));
+    });
+    this.reduceMempoolBlocksToFitScreen(this.mempoolEmptyBlocks);
+
+    this.mempoolBlocks.map(() => {
+      this.updateMempoolBlockStyles();
+      this.calculateTransactionPosition();
+    });
+    this.reduceMempoolBlocksToFitScreen(this.mempoolBlocks);
     this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
+    this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;
 
     this.mempoolBlocks$ = merge(
       of(true),
@@ -72,6 +90,35 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
       })
     );
 
+
+    this.timeAvg$ = timer(0, 1000)
+      .pipe(
+        switchMap(() => combineLatest([
+          this.stateService.blocks$.pipe(map(([block]) => block)),
+          this.stateService.lastDifficultyAdjustment$
+        ])),
+        map(([block, DATime]) => {
+          this.now = new Date().getTime();
+          const now = new Date().getTime() / 1000;
+          const diff = now - DATime;
+          const blocksInEpoch = block.height % 2016;
+          let difficultyChange = 0;
+          if (blocksInEpoch > 0) {
+            difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+          }
+          const timeAvgDiff = difficultyChange * 0.1;
+
+          let timeAvgMins = 10;
+          if (timeAvgDiff > 0 ){
+            timeAvgMins -= Math.abs(timeAvgDiff);
+          } else {
+            timeAvgMins += Math.abs(timeAvgDiff);
+          }
+          
+          return timeAvgMins * 60 * 1000;
+        })
+      );
+
     this.markBlocksSubscription = this.stateService.markBlock$
       .subscribe((state) => {
         this.markIndex = undefined;
@@ -191,6 +238,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     };
   }
 
+  getStyleForMempoolEmptyBlock(index: number) {
+    return {
+      'right': 40 + index * 155 + 'px',
+      'background': '#554b45',
+    };
+  }
+
   calculateTransactionPosition() {
     if ((!this.txFeePerVSize && (this.markIndex === undefined || this.markIndex === -1)) || !this.mempoolBlocks) {
       this.arrowVisible = false;
@@ -235,4 +289,20 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     }
   }
 
+  mountEmptyBlocks() {
+    const emptyBlocks = [];
+    const numberOfBlocks = 8;
+    for (let i = 0; i <= numberOfBlocks; i++) {
+      emptyBlocks.push({
+        blockSize: 0,
+        blockVSize: 0,
+        feeRange: [],
+        index: i,
+        medianFee: 0,
+        nTx: 0,
+        totalFees: 0
+      });
+    }
+    return emptyBlocks;
+  }
 }

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

@@ -0,0 +1,51 @@
+<div class="container-xl">
+  <div class="text-center">
+    <br>
+    <img [src]="officialMempoolSpace ? './resources/mempool-space-logo-bigger.png' : './resources/mempool-logo-bigger.png'" style="width: 250px;height:63px;">
+    <br><br>
+
+    <h2>Privacy Policy</h2>
+    <h6>Updated: August 2, 2021</h6>
+
+    <br><br>
+
+    <div class="text-left">
+
+      <h4>TRUSTED THIRD PARTIES ARE SECURITY HOLES</h4>
+
+      <ul>
+        <li>We do not use any third-party analytics, trackers, or cookies.</li>
+        <li>We do not share any private user data with third-parties.</li>
+      </ul>
+
+      <h4>TRUSTED FIRST PARTIES ARE ALSO SECURITY HOLES</h4>
+
+      <ul>
+        <li>Your IP address may be collected in our webserver logs used for sysadmin purposes.</li>
+        <li>Your IP address may be collected in our self-hosted statistics matomo app.</li>
+      </ul>
+
+      <h4>DON'T TRUST US, PROTECT YOUR PRIVACY</h4>
+
+      <ul>
+        <li>Use a Tor Browser or a privacy VPN service to hide your IP address from us.</li>
+        <li>Use a self-hosted instance of The Mempool Open Source Project&trade; on your own hardware.</li>
+      </ul>
+
+      <h4>IF YOU DONATE TO MEMPOOL.SPACE</h4>
+
+      <ul>
+        <li>Your payment information, together with your Twitter identity (if provided) will be collected.</li>
+        <li>We display sponsor profiles publicly on <a href="https://mempool.space/about">mempool.space/about</a>.</li>
+        <li>Thank you :)</li>
+      </ul>
+
+      <p>EOF</p>
+
+    </div>
+
+  </div>
+
+  <br><br>
+
+</div>

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { Env, StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-privacy-policy',
+  templateUrl: './privacy-policy.component.html',
+  styleUrls: ['./privacy-policy.component.scss']
+})
+export class PrivacyPolicyComponent {
+  officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+}

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

@@ -11,7 +11,6 @@ export class StatusViewComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.websocketService.want(['mempool-blocks', 'stats']);
-    this.websocketService.want(['blocks', 'stats']);
+    this.websocketService.want(['mempool-blocks', 'stats', 'blocks']);
   }
 }

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

@@ -1,10 +1,10 @@
 <div id="tv-wrapper">
 
-  <div *ngIf="loading" class="loading">
+  <div *ngIf="mempoolStats.length === 0" class="loading">
     <div class="spinner-border text-light"></div>
   </div>
 
-  <div class="tv-container" *ngIf="!loading">
+  <div class="tv-container">
 
     <div class="chart-holder" *ngIf="mempoolStats.length">
       <app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph>

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

@@ -89,9 +89,4 @@
   display: flex;
   margin-top: 0px;
   flex-direction: column;
-  @media(max-height: 700px) {
-    .blockchain-wrapper{
-      display: none !important;
-    }
-  }
 }

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

@@ -4,6 +4,7 @@ import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-television',
@@ -11,7 +12,6 @@ import { SeoService } from 'src/app/services/seo.service';
   styleUrls: ['./television.component.scss']
 })
 export class TelevisionComponent implements OnInit {
-  loading = true;
 
   mempoolStats: OptimizedMempoolStats[] = [];
   mempoolVsizeFeesData: any;
@@ -30,7 +30,6 @@ export class TelevisionComponent implements OnInit {
     this.apiService.list2HStatistics$()
       .subscribe((mempoolStats) => {
         this.mempoolStats = mempoolStats;
-        this.loading = false;
       });
 
     this.stateService.live2Chart$

frontend/src/app/components/terms-of-service/terms-of-service.component.html

@@ -5,65 +5,68 @@
     <br /><br />
 
     <h2>Terms of Service</h2>
-    <h6>Updated: March 09, 2021</h6>
+    <h6>Updated: August 02, 2021</h6>
 
     <br><br>
 
     <div class="text-left">
 
-        <p *ngIf="officialMempoolSpace">The official <a href="https://mempool.space/">mempool.space</a> website and <a href="https://mempool.space/api">its API service</a> are operated by Mempool Space K.K.</p>
-        <p *ngIf="!officialMempoolSpace">This website and its API service are operated by an individual member of the Bitcoin community, who is not affiliated with Mempool Space K.K.</p>
+        <p *ngIf="officialMempoolSpace">The <a href="https://mempool.space/">mempool.space</a> website, the <a href="https://liquid.network/">liquid.network</a> website, the <a href="https://bisq.markets/">bisq.markets</a> website, their associated API services, and related network and server infrastructure (collectively, the "Website") are operated by Mempool Space K.K. in Japan ("Mempool", "We", or "Us") and self-hosted from <a href="https://wq.apnic.net/static/search.html?query=AS142052">AS142052</a>.</p>
 
-        <h5>By using this website or accessing its API, you agree to these Terms of Service:</h5>
+        <p *ngIf="!officialMempoolSpace">This website and its API service (collectively, the "Website") are operated by a member of the Bitcoin community ("We" or "Us"). Mempool Space K.K. in Japan ("Mempool") has no affiliation with the operator of this Website, and does not sponsor or endorse the information provided herein.</p>
+
+        <h5>By accessing this Website, you agree to the following Terms of Service:</h5>
 
         <br>
 
         <h4>NO WARRANTY</h4>
 
-        <p>This website is operated in the hope that it will be useful, but all services and data are provided on an "AS IS, AS AVAILABLE" basis, WITHOUT ANY WARRANTY OR REPRESENTATIONS; express or implied, without even the implied warranties of MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, CONTINUOUS AVAILABILITY, or UNINTERRUPTED SERVICE. The operators of this website make NO GUARANTEE to the accuracy of any data on this website or its API, and it is your responsibility to VERIFY ALL DATA obtained for inaccuracies and omissions.</p>
+        <p>THIS WEBSITE IS PROVIDED ON AN "AS IS, AS AVAILABLE" BASIS, WITHOUT ANY WARRANTY OR REPRESENTATIONS; EXPRESS OR IMPLIED, WITHOUT EVEN THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, CONTINUOUS AVAILABILITY, OR UNINTERRUPTED SERVICE. WE MAKE NO GUARANTEE TO THE ACCURACY OF ANY DATA ON THIS WEBSITE, AND IT IS YOUR RESPONSIBILITY TO VERIFY ALL DATA OBTAINED FOR INACCURACIES AND OMISSIONS.</p>
 
         <br>
 
         <h4>NO LIABILITY</h4>
 
-        <p>THE OPERATORS OF THIS WEBSITE WILL NOT BE HELD LIABLE FOR ANY LOSS OR DAMAGES, whether direct, indirect, or any other nature, that are deemed or alleged to have resulted from or been caused by this website or its contents, including, but without limitation to, errors, inaccuracies or ambiguity in this website or its contents, failures, malfunctions, delays or interruptions in operation or transmission, any persons use or misuse of this website or its content, any errors or omissions in content, damage for loss of Bitcoin or other crypto assets, loss of business, loss of profits, business interruption, loss of information, or any other pecuniary or consequential loss or damage (even if the operators of this website have been notified of such risk of loss or damage).</p>
+        <p>WE WILL NOT BE HELD LIABLE FOR ANY LOSS OR DAMAGES, WHETHER DIRECT, INDIRECT, OR ANY OTHER NATURE, THAT ARE DEEMED OR ALLEGED TO HAVE RESULTED FROM OR BEEN CAUSED BY THIS WEBSITE OR ITS CONTENTS, INCLUDING, BUT WITHOUT LIMITATION TO, ERRORS, INACCURACIES OR AMBIGUITY IN THIS WEBSITE OR ITS CONTENTS, FAILURES, MALFUNCTIONS, DELAYS OR INTERRUPTIONS IN OPERATION OR TRANSMISSION, ANY PERSONS USE OR MISUSE OF THIS WEBSITE OR ITS CONTENT, ANY ERRORS OR OMISSIONS IN CONTENT, DAMAGE FOR LOSS OF BITCOIN OR OTHER CRYPTO ASSETS, LOSS OF BUSINESS, LOSS OF PROFITS, BUSINESS INTERRUPTION, LOSS OF INFORMATION, OR ANY OTHER PECUNIARY OR CONSEQUENTIAL LOSS OR DAMAGE (EVEN IF WE HAVE BEEN NOTIFIED OF SUCH RISK OF LOSS OR DAMAGE).</p>
 
         <br>
 
-        <h4>PRIVACY POLICY</h4>
+        <h4>NO ADVERTISING</h4>
 
-        <p>Out of respect for the Bitcoin community, this website does not utilize any third-party trackers or cookies, and the operators of this website do not share any user data with third-parties. However, your IP address may be collected as part of basic webserver logs necessary for systems administration purposes, and as part of an anonymized self-hosted statistics application for analytics. To protect your privacy, use Tor browser to access this website's Tor V3 onion hostname to conceal your IP address, or alternatively install and use your own self-hosted instance of this website.</p>
-
-        <br>
-
-        <h4>BITCOIN ONLY POLICY</h4>
-
-        <p>Out of respect for the Bitcoin community, this website does not support altcoins, and is generally "Bitcoin Only". The <a href="https://mempool.space/liquid/assets">IOU tokens for Bitcoin and fiat currencies on the Liquid network</a>, and the <a href="https://mempool.space/bisq/stats">BSQ colored Bitcoin for DAO governance on the Bisq Network</a>, are not considered altcoins as they do not distract users from Bitcoin and are part of our stated mission to support the entire Bitcoin ecosystem including Bitcoin Layer 2 Networks.</p>
-
-        <br>
-
-        <h4>EXTERNAL LINK POLICY</h4>
-
-        <p>Out of respect for the Bitcoin community, this website does not display advertising, and generally does not link to external websites. However, exceptions are made for references to Bitcoin's technical documentation, for acknowledgements of individual members and open-source projects within the Bitcoin community, and for direct contributors and supporters of <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a>, as follows:</p>
+        <p>Out of respect for the Bitcoin community, this website does not display advertising, and generally does not link to external websites. However, external links are made for references to Bitcoin's technical documentation, for acknowledgements of individual members and open-source projects within the Bitcoin community, and for direct contributors and supporters of <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a>, as follows:</p>
         <ul>
           <li>In order to refer to Bitcoin technical documentation, external links may by added where applicable, to informational websites that respect that Bitcoin community and do not display advertising, altcoins, or third-party trackers, such as <a href="https://en.bitcoin.it/">bitcoin.it</a> and <a href="https://bitcoin.org/">bitcoin.org</a>.</li>
           <br>
-          <li>In order to acknowledge individual contributors to <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> who have made <a href="https://github.com/mempool/mempool/graphs/contributors">at least 10 contributions visible on GitHub</a>, the contributor's GitHub profile photo will automatically be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to their GitHub profile</u>.</li>
+          <li>In order to acknowledge individual contributors to <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> who have made <a href="https://github.com/mempool/mempool/graphs/contributors">at least 5 contributions visible on GitHub</a>, the contributor's GitHub profile photo will automatically be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to their GitHub profile</u>.</li>
           <br>
           <li>In order to acknowledge members of the Bitcoin community who have made a one-time donation of at least 0.01 BTC to <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> on <a href="https://mempool.space/about">mempool.space/about</a>, the Bitcoin community members's Twitter profile photo will automatically be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to their Twitter profile</u>.</li>
           <br>
-          <li>In order to acknowledge members of the Bitcoin community who have made recurring donations of at least $100 USD per month to <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> through <a href="https://github.com/sponsors/mempool">our GitHub Sponsors program</a> for at least 6 months, the Bitcoin community member's GitHub profile photo will automatically be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to their GitHub profile</u>.</li>
+          <li>In order to acknowledge members of the Bitcoin community who have or have committed to making recurring donations of at least $100 USD per month to <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> through <a href="https://github.com/sponsors/mempool">our GitHub Sponsors program</a> for at least 6 months, the Bitcoin community member's GitHub profile photo will automatically be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to their GitHub profile</u>.</li>
           <br>
           <li>In order to acknowledge open source projects that benefit the Bitcoin community and have integrated <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> into their software, the open source project's logo may be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to the project's GitHub repository</u>.</li>
           <br>
           <li>In order to acknowledge federations or alliances within the Bitcoin community that have a relationship to <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a>, the federation or alliance logo may be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to the alliance website</u>.</li>
           <br>
+          <li>In order to acknowledge the enterprise organizations within the Bitcoin community that have or have committed to making recurring donations of at least $1000 USD per month to <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a> through <a href="https://github.com/sponsors/mempool">our GitHub Sponsors program</a> for at least 25 months, the organization's logo may be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to the organization's website</u>.</li>
+          <br>
           <li>In order to acknowledge the enterprise organizations within the Bitcoin community that have made a significant one-time donation of at least $25,000 USD to <a href="https://github.com/mempool/mempool">The Mempool Open Source Project</a>, the organization's logo may be displayed on <a href="https://mempool.space/about">mempool.space/about</a>, with <u>a link to the organization's website</u>.</li>
         </ul>
         <p>However, we reserve the right to remove any links from our website that in our sole discretion are inappropriate. All donations are non-refundable.</p>
 
         <br>
 
+        <ng-container *ngIf="officialMempoolSpace">
+
+          <h4>NO ALTCOINS</h4>
+
+          <p>The <a href="https://mempool.space/">mempool.space</a> explorer is Bitcoin Only.</p>
+
+          <p>Unfortunately, the <a href="https://liquid.network/">liquid.network</a> and <a href="https://bisq.markets/">bisq.markets</a> explorers cannot be considered Bitcoin Only, as they may display altcoins as part of their core network functionality. We do not endorse any altcoins and encourage you to stay Bitcoin Only. Please see <a href="https://bitcoin-only.com/">bitcoin-only.com</a> for more Bitcoin Only resources.</p>
+
+          <br>
+
+        </ng-container>
+
         <p>EOF</p>
 
       </div>

frontend/src/app/components/terms-of-service/terms-of-service.component.scss

@@ -1 +0,0 @@
- 

frontend/src/app/components/time-since/time-since.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges, PLATFORM_ID, Inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
+import { dates } from 'src/app/shared/i18n/dates';
 
 @Component({
   selector: 'app-time-since',
@@ -53,48 +54,33 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
   calculate() {
     const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
     if (seconds < 60) {
-      return $localize`:@@time-since.just-now:Just now`;
+      return $localize`:@@date-base.just-now:Just now`;
     }
-    let counter;
+    let counter: number;
     for (const i in this.intervals) {
       if (this.intervals.hasOwnProperty(i)) {
         counter = Math.floor(seconds / this.intervals[i]);
+        const dateStrings = dates(counter);
         if (counter > 0) {
           if (counter === 1) {
-            switch (i) { // singular (1 day ago)
-              case 'year': return $localize`:@@time-since.year.ago:${counter}:INTERPOLATION: year ago`; break;
-              case 'month': return $localize`:@@time-since.month.ago:${counter}:INTERPOLATION: month ago`; break;
-              case 'week': return $localize`:@@time-since.week.ago:${counter}:INTERPOLATION: week ago`; break;
-              case 'day': return $localize`:@@time-since.day.ago:${counter}:INTERPOLATION: day ago`; break;
-              case 'hour': return $localize`:@@time-since.hour.ago:${counter}:INTERPOLATION: hour ago`; break;
-              case 'minute':
-                if (document.body.clientWidth < 768) {
-                  return $localize`:@@time-since.min.ago:${counter}:INTERPOLATION: min ago`;
-                }
-                return $localize`:@@time-since.minute.ago:${counter}:INTERPOLATION: minute ago`;
-              case 'second':
-                if (document.body.clientWidth < 768) {
-                  return $localize`:@@time-since.sec.ago:${counter}:INTERPOLATION: sec ago`;
-                }
-                return $localize`:@@time-since.second.ago:${counter}:INTERPOLATION: second ago`;
+            switch (i) { // singular (1 day)
+              case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break;
+              case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break;
+              case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break;
+              case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break;
+              case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break;
+              case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; break;
+              case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break;
             }
           } else {
-            switch (i) { // plural (2 days ago)
-              case 'year': return $localize`:@@time-since.years.ago:${counter}:INTERPOLATION: years ago`; break;
-              case 'month': return $localize`:@@time-since.months.ago:${counter}:INTERPOLATION: months ago`; break;
-              case 'week': return $localize`:@@time-since.weeks.ago:${counter}:INTERPOLATION: weeks ago`; break;
-              case 'day': return $localize`:@@time-since.days.ago:${counter}:INTERPOLATION: days ago`; break;
-              case 'hour': return $localize`:@@time-since.hours.ago:${counter}:INTERPOLATION: hours ago`; break;
-              case 'minute':
-                if (document.body.clientWidth < 768) {
-                  return $localize`:@@time-since.mins.ago:${counter}:INTERPOLATION: mins ago`;
-                }
-                return $localize`:@@time-since.minutes.ago:${counter}:INTERPOLATION: minutes ago`;
-              case 'second':
-                if (document.body.clientWidth < 768) {
-                  return $localize`:@@time-since.secs.ago:${counter}:INTERPOLATION: secs ago`;
-                }
-                return $localize`:@@time-since.seconds.ago:${counter}:INTERPOLATION: seconds ago`;
+            switch (i) { // plural (2 days)
+              case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break;
+              case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break;
+              case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break;
+              case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break;
+              case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break;
+              case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; break;
+              case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; break;
             }
           }
         }

frontend/src/app/components/time-span/time-span.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { dates } from 'src/app/shared/i18n/dates';
+
+@Component({
+  selector: 'app-time-span',
+  template: `{{ text }}`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimeSpanComponent implements OnInit, OnChanges, OnDestroy {
+  interval: number;
+  text: string;
+  intervals = {};
+
+  @Input() time: number;
+  @Input() fastRender = false;
+
+  constructor(
+    private ref: ChangeDetectorRef,
+    private stateService: StateService,
+  ) {
+      this.intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1
+      };
+  }
+
+  ngOnInit() {
+    if (!this.stateService.isBrowser) {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+      return;
+    }
+    this.interval = window.setInterval(() => {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+    }, 1000 * (this.fastRender ? 1 : 60));
+  }
+
+  ngOnChanges() {
+    this.text = this.calculate();
+    this.ref.markForCheck();
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.interval);
+  }
+
+  calculate() {
+    const seconds = Math.floor(this.time);
+    if (seconds < 60) {
+      return $localize`:@@date-base.just-now:Just now`;
+    }
+    let counter: number;
+    for (const i in this.intervals) {
+      if (this.intervals.hasOwnProperty(i)) {
+        counter = Math.floor(seconds / this.intervals[i]);
+        const dateStrings = dates(counter);
+        if (counter > 0) {
+          if (counter === 1) {
+            switch (i) { // singular (1 day)
+              case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break;
+              case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break;
+              case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break;
+              case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break;
+              case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break;
+              case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; break;
+              case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break;
+            }
+          } else {
+            switch (i) { // plural (2 days)
+              case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break;
+              case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break;
+              case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break;
+              case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break;
+              case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break;
+              case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; break;
+              case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; break;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

frontend/src/app/components/time-until/time-until.component.ts

@@ -0,0 +1,104 @@
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { dates } from 'src/app/shared/i18n/dates';
+
+@Component({
+  selector: 'app-time-until',
+  template: `{{ text }}`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy {
+  interval: number;
+  text: string;
+  intervals = {};
+
+  @Input() time: number;
+  @Input() fastRender = false;
+  @Input() fixedRender = false;
+  @Input() forceFloorOnTimeIntervals: string[];
+
+  constructor(
+    private ref: ChangeDetectorRef,
+    private stateService: StateService,
+  ) {
+      this.intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1
+      };
+  }
+
+  ngOnInit() {
+    if(this.fixedRender){
+      this.text = this.calculate();
+      return;
+    }
+    
+    if (!this.stateService.isBrowser) {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+      return;
+    }
+    this.interval = window.setInterval(() => {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+    }, 1000 * (this.fastRender ? 1 : 60));
+  }
+
+  ngOnChanges() {
+    this.text = this.calculate();
+    this.ref.markForCheck();
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.interval);
+  }
+
+  calculate() {
+    const seconds = (+new Date(this.time) - +new Date()) / 1000;
+
+    if (seconds < 60) {
+      const dateStrings = dates(1);
+      return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
+    }
+    let counter: number;
+    for (const i in this.intervals) {
+      if (this.intervals.hasOwnProperty(i)) {
+        if (this.forceFloorOnTimeIntervals && this.forceFloorOnTimeIntervals.indexOf(i) > -1) {
+          counter = Math.floor(seconds / this.intervals[i]);
+        } else {
+          counter = Math.round(seconds / this.intervals[i]);
+        }
+        const dateStrings = dates(counter);
+        if (counter > 0) {
+          if (counter === 1) {
+            switch (i) { // singular (In ~1 day)
+              case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break;
+              case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break;
+              case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break;
+              case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break;
+              case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break;
+              case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
+              case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`;
+            }
+          } else {
+            switch (i) { // plural (In ~2 days)
+              case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break;
+              case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break;
+              case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break;
+              case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break;
+              case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break;
+              case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; break;
+              case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; break;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

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

@@ -1,45 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
-
-@Component({
-  selector: 'app-timespan',
-  template: `{{ text }}`,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TimespanComponent implements OnChanges {
-  @Input() time: number;
-  text: string;
-
-  constructor() { }
-
-  ngOnChanges() {
-    const seconds = this.time;
-    if (seconds < 60) {
-      this.text = '< 1 minute';
-      return;
-    }
-    const intervals = {
-        year: 31536000,
-        month: 2592000,
-        week: 604800,
-        day: 86400,
-        hour: 3600,
-        minute: 60,
-        second: 1
-    };
-    let counter;
-    for (const i in intervals) {
-      if (intervals.hasOwnProperty(i)) {
-        counter = Math.floor(seconds / intervals[i]);
-        if (counter > 0) {
-          if (counter === 1) {
-              this.text = counter + ' ' + i; // singular (1 day ago)
-              break;
-          } else {
-              this.text = counter + ' ' + i + 's'; // plural (2 days ago)
-              break;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -0,0 +1,423 @@
+<div class="container-xl trademark-policy">
+
+  <div *ngIf="!officialMempoolSpace">
+    <p>This website is operated by an individual member of the Bitcoin community, and is not affiliated with Mempool Space K.K.</p>
+    <p>Please view the Trademark Policy and Guidelines for The Mempool Open Source Project at <a href="https://mempool.space/trademark-policy">https://mempool.space/trademark-policy</a>.</p>
+  </div>
+
+  <div *ngIf="officialMempoolSpace">
+    <h2>Trademark Policy and Guidelines</h2>
+    <h5>The Mempool Open Source Project &trade;</h5>
+    <h6>Updated: July 19, 2021</h6>
+    <br>
+
+    <div class="text-left">
+
+      <ol>
+
+        <li>Introduction</li>
+
+        <br>
+
+        <p>Thank you for your interest in The Mempool Open Source Project (“Project”). 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. This Policy (the “Policy”) outlines the allowable use of all trademarks and service marks, whether word marks, logos or trade dress (collectively, the "Marks"), owned by Mempool Space K.K. (“Mempool”).</p>
+
+        <p>The role of trademarks is to provide assurance about the quality of the products or services with which the trademark is associated. Therefore, because an open source license allows your unrestricted modification of the copyrighted software, we cannot be sure that your modifications to the software are ones that will not be misleading if distributed under the same name. Instead, this Policy describes the circumstances under which you may use our Marks.</p>
+
+        <p>In this Policy, we are not trying to limit the lawful use of our Marks, but rather describe for you what we consider the parameters of lawful use to be. Trademark law can be ambiguous, so we hope to provide enough clarity for you to understand whether we will consider your use licensed or non-infringing.</p>
+
+        <p>The Marks covered by this Policy are either registered trademarks or trademarks of Mempool in Japan, the United States, and/or other countries. The sections that follow describe uses of the Marks that are allowed without additional permission from us. If you want to use our Marks in ways that are not described in this Policy, please see "Where to get further information" below for contact information.</p>
+
+        <p>Any use that does not comply with this Policy or for which we have not separately provided written permission is not a use that we have approved. We reserve the right to revoke permission for any of the approved uses set forth in this Policy at any time. This Policy may change from time to time and all updates will be posted on this page.</p>
+
+        <br>
+
+        <li>Our Commitment to Open Source Principles</li>
+
+        <br>
+
+        <p>We want to encourage and facilitate the use of our Marks by the community but do so in a way that still ensures that the Marks are meaningful as a source and quality indicator for our organization and its associated goods and services. This will allow us to continue to embody the high reputation of our projects and the community associated with them.</p>
+
+        <p>As such, this Policy strives to strike the proper balance between: 1) our need to ensure that our Marks remain reliable indicators of quality, 2) our need to ensure that we preserve the integrity of the community which these Marks represent; and 3) our community members' desire to be full participants in the Project.</p>
+
+        <br>
+
+        <li>Trademarks Subject to the Policy</li>
+
+        <br>
+
+        <ol>
+
+          <li>Our Word Trademarks and Service Marks ("Word Marks"):</li>
+
+          <br>
+
+          <div class="text-center" style="max-width: 350px">
+            <table class="table table-bordered">
+              <tbody>
+                <tr><td>Mempool Space K.K.</td></tr>
+                <tr><td>The Mempool Open Source Project</td></tr>
+                <tr><td>mempool.space</td></tr>
+              </tbody>
+            </table>
+          </div>
+
+          <br>
+
+          <li>Our Logos (“Logos”):</li>
+
+          <br>
+
+          <div>
+
+            <img src="./resources/mempool-logo-bigger.png" style="width: 300px; max-width: 80%">
+            <br><br>
+            <p>The mempool Logo</p>
+            <br><br>
+
+            <img src="./resources/mempool-space-logo-bigger.png" style="width: 300px; max-width: 80%">
+            <br><br>
+            <p>The mempool.space Vertical Logo</p>
+            <br><br>
+
+            <img src="./resources/mempool-space-logo-horizontal.png" style="width: 450px; max-width: 80%">
+            <br><br>
+            <p>The mempool.space Horizontal Logo</p>
+            <br><br>
+
+            <img src="./resources/mempool-tube.png" style="width: 100px">
+            <br><br>
+            <p>The mempool Square Logo</p>
+            <br><br>
+
+            <img src="./resources/mempool-blocks.png" style="width: 500px; max-width: 80%">
+            <br><br>
+            <p>The mempool Blocks Logo</p>
+            <br><br>
+
+          </div>
+
+          <br>
+
+          <li>The Unique Visual Styling of our Website ("Trade Dress")</li>
+
+          <br>
+
+          <div class="row">
+            <div class="col-md-3 circle" style="color: #2F3246"></div>
+            <div class="col-md-9" style="margin: auto">
+              CMYK: 9%  8%  0% 73%
+              <br><br>
+              RGB:  47,  50,  70
+              <br><br>
+              HEX: #2F3246
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-md-3 circle" style="color: #8F5FF6"></div>
+            <div class="col-md-9" style="margin: auto">
+              CMYK: 40% 59% 0%  4%
+              <br><br>
+              RGB: 143,  95, 246
+              <br><br>
+              HEX: #8F5FF6
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-md-3 circle" style="color: #80C2E1"></div>
+            <div class="col-md-9" style="margin: auto">
+              CMYK: 38% 12% 0% 12%
+              <br><br>
+              RGB: 128, 194, 225
+              <br><br>
+              HEX: #80C2E1
+            </div>
+          </div>
+
+        </ol>
+
+        <br>
+
+        <li>Universal Considerations for All Uses</li>
+
+        <br>
+
+        <p>Whenever you use one of the Marks, you must always do so in a way that does not mislead anyone, either directly or by omission, about exactly what they are getting and from whom. The law reflects this requirement in two major ways described in more detail below: it prohibits creating a "likelihood of confusion" but allows for "nominative use." For example, you cannot say you are distributing the mempool.space software when you're distributing a modified version of it, because people would be confused when they are not getting the same features and functionality they would get if they downloaded the software directly from us. You also cannot use our logo on your website in a way that suggests that your website is an official website or that we endorse your website. You can, though, say you like the mempool.space software, that you participate in the mempool.space community, that you are providing an unmodified version of the mempool.space software, or that you wrote a book describing how to use the mempool.space software.</p>
+
+        <p>This fundamental requirement, that it is always clear to people what they are getting and from whom, is reflected throughout this Policy. It should also serve as your guide if you are not sure about how you are using the Marks.</p>
+
+        <p>In addition:</p>
+
+        <p>You may not use the Marks in association with the use or distribution of software if you are also not in compliance with the copyright license for the software.</p>
+
+        <p>You may not use or register, in whole or in part, the Marks as part of your own trademark, service mark, domain name, company name, trade name, product name or service name.</p>
+
+        <p>Trademark law does not allow your use of names or trademarks that are too similar to ours. You therefore may not use an obvious variation of any of our Marks or any phonetic equivalent, foreign language equivalent, takeoff, or abbreviation for a similar or compatible product or service.</p>
+
+        <p>You agree that you will not acquire any rights in the Marks and that any goodwill generated by your use of the Marks inures solely to our benefit.</p>
+
+        <br>
+
+        <li>Use for Software</li>
+
+        <br>
+
+        <ol>
+
+          <li>Uses We Consider Non-Infringing</li>
+
+          <br>
+
+          <ol>
+
+            <li>Distribution of Unmodified Source code or Unmodified Executable Code We Have Compiled</li>
+
+            <br>
+
+            <p>When you redistribute an unmodified copy of our software, you are not changing the quality or nature of it. Therefore, you may retain the Word Marks and the Logos we have placed on the software to identify your redistribution – – whether that redistribution is made by optical media, memory stick or download of unmodified source and executable code. This kind of use only applies if you are redistributing an official distribution from this Project that has not been changed in any way.</p>
+
+            <li>Distribution of Executable Code That You Have Compiled, or Modified Code</li>
+
+            <br>
+
+            <p>You may use the Word Marks, but not the Logos, to truthfully describe the origin of the software that you are providing, that is, that the code you are distributing is a modification of our software. You may say, for example, that "this software is derived from the source code for mempool.space."</p>
+
+            <p>Of course, you can place your own trademarks or logos on versions of the software to which you have made substantive modifications, because by modifying the software you have become the origin of that exact version. In that case, you should not use our Logos, and you should remove all of our Logo data files from your modified version of our software.</p>
+
+            <li>Statements About Compatibility, Interoperability or Derivation</li>
+
+            <br>
+
+            <p>You may use the Word Marks, but not the Logos, to truthfully describe the relationship between your software and ours. Our Mark should be used after a verb or preposition that describes the relationship between your software and ours.</p>
+
+            <p>You may say, for example, "Bob's software for mempool.space" but may not say "Bob's mempool.space software." Some other examples that may work for you are:</p>
+
+            <ul>
+              <li>[Your software] works with mempool.space.</li>
+              <li>[Your software] uses mempool.space.</li>
+              <li>[Your software] is powered by mempool.space.</li>
+              <li>[Your software] runs on mempool.space.</li>
+              <li>[Your software] for use with mempool.space.</li>
+              <li>[Your software] for mempool.space.</li>
+            </ul>
+
+          </ol>
+
+          <br>
+
+          <li>Uses for Which We Are Granting a License</li>
+
+          <br>
+
+          <ol>
+
+            <li>Distribution of Modified Software</li>
+
+            <br>
+
+            <p>You may use the Word Marks and the Logos for the distribution of executable code on the condition that it is made from official Project source code using the procedure documented for creating an executable found on the Project’s website.</p>
+
+            <li>Distribution of Software Preloaded on Hardware</li>
+
+            <br>
+
+            <p>You may use the Word Marks and the Logos in association with hardware devices on the condition that the executable installed on the device is the official source executable for the Project, and that you do not suggest that the Project is the source of the hardware device itself but rather than the Marks are for the software incorporated into the device.</p>
+
+          </ol>
+
+          <li>Uses We Consider Infringing Without Seeking Further Permission From Us</li>
+
+          <br>
+
+          <p>We will likely consider using the Marks in a software distribution that combines our software with any other software program an infringement of our Marks. We would consider your software "combined" with ours if you create a single executable for both software programs, as well as if by installing our software it automatically installs yours. We would not consider your software "combined" with ours if it is on the same media but requires separate, independent action to install it.</p>
+
+        </ol>
+
+        <li>Use for Non-Software Goods and Services</li>
+
+        <br>
+
+        <ol>
+
+          <li>Uses We Consider Non-Infringing</li>
+
+          <br>
+
+          <ol>
+
+            <li>Websites</li>
+
+            <br>
+
+            <p>You may use the Word Marks and Logos, but not the Trade Dress, on your webpage to show your support for the Project as long as:</p>
+
+            <ul>
+
+              <li>Your own branding or naming is more prominent than any Project Marks;</li>
+
+              <li>The Logos hyperlink to the Project website;</li>
+
+              <li>The site does not mislead customers into thinking that either your website, service, or product is our website, service, or product; and</li>
+
+              <li>The site clearly states that you are not affiliated with or endorsed by the Project.</li>
+
+            </ul>
+
+            <br>
+
+            <li>Publications and Presentations</li>
+
+            <br>
+
+            <p>You may use the Word Marks in book and article titles, and the Logo in illustrations within the document, if the use does not suggest that we have published, endorse, or agree with your work.</p>
+
+            <li>App Stores</li>
+
+            <br>
+
+            <p>You may use the Word Marks and Logos, but not the Trade Dress to indicate that your app is built from The Mempool Open Source Project as long you include the phrases "mempool.space" or "The Mempool Open Source Project" in your description.</p>
+
+          </ol>
+
+          <li>Uses We Consider Infringing Without Seeking Further Permission From Us</li>
+
+          <br>
+
+          <p>We will likely consider using the Marks as part of a domain name or subdomain an infringement of our Marks, with the exception of the hostname component using the following naming convention: https://mempool.[HOSTNAME].[TLD]/</p>
+
+          <p>We would likely consider using the Marks on promotional goods or commercial goods an infringement of our Marks. "Promotional goods" are non-software goods that use the Marks and that are intended to advertise the Project, promote the Project, or show membership in the Project community.</p>
+
+        </ol>
+
+        <li>General Information</li>
+
+        <br>
+
+        <ol>
+
+          <li>Trademark Marking and Legends</li>
+
+          <br>
+
+          <p>The first or most prominent mention of a Mark on a webpage, document, packaging, or documentation should be accompanied by a symbol indicating whether the mark is a registered trademark ("®") or an unregistered trademark ("TM").</p>
+
+          <p>Also, if you are using our Marks in a way described in the sections "Uses for Which We Are Granting a License," you must include the following trademark attribution at the foot of the webpage where you have used the Mark (or, if in a book, on the credits page), on any packaging or labeling, and on advertising or marketing materials:</p>
+
+          <p>“The Mempool Space K.K.&trade;, 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, and are used with permission. Mempool Space K.K. has no affiliation with and does not sponsor or endorse the information provided herein.”</p>
+
+          <li>What to Do When You See Abuse</li>
+
+          <br>
+
+          <p>If you are aware of any confusing use or misuse of the Marks in any way, we would appreciate you bringing this to our attention. Please contact us as described below so that we can investigate it further.</p>
+
+          <li>Where to Get Further Information</li>
+
+          <br>
+
+          <p>If you have any questions about this Policy, would like to speak with us about the use of our Marks in ways not described in the Policy, or see any abuse of our Marks, please email us at &lt;legal@mempool.space&gt;</p>
+
+        </ol>
+
+        <li>General Considerations About Trademarks and Their Use</li>
+
+        <br>
+
+        <ol>
+
+          <li>What is a Trademark?</li>
+
+          <br>
+
+          <p>A trademark is a word, phrase, symbol or design, or a combination of words, phrases, symbols or designs, that identifies and distinguishes the source of the goods of one party from those of others.</p>
+
+          <p>A service mark is the same as a trademark, except that it identifies and distinguishes the source of a service rather than a product.</p>
+
+          <p>"Trade dress" or "get up" refers to the look and feel of the packaging, which in this context can include the layout, colors, images, and design choices in a web page.</p>
+
+          <p>Throughout this Policy, the terms "trademark" and "mark" refer to both trademarks, service marks and trade dress. However, the use of a word is "not as a trademark" when it is used functionally as part of the software program, for example, in a file, folder, directory, or path name. Use in this way is not a trademark infringement.</p>
+
+          <li>What is "Likelihood of Confusion"?</li>
+
+          <br>
+
+          <p>There is trademark infringement if your use of a trademark has created a "likelihood of confusion." This means using a trademark in a way that will likely confuse or deceive the relevant consuming public about the source of a product or service using the mark in question.</p>
+
+          <li>What is "Nominative" Use?</li>
+
+          <br>
+
+          <p>So-called "nominative use" (or "nominative fair use"), which is the name of the doctrine under U.S. trademark law, allows the use of another's trademark where it is necessary for understanding. Other countries' trademark laws also have similar provisions.</p>
+
+        </ol>
+
+        <li>Proper Trademark Use</li>
+
+        <br>
+
+        <p>You should follow these rules when engaging in proper use of our Marks.</p>
+
+        <ol>
+
+          <li>Use of Our Marks in Text</li>
+
+          <br>
+
+          <ol>
+
+            <li>Always use our Marks in their exact form with the correct spelling, neither abbreviated, hyphenated, or combined with any other word or words.</li>
+            <br>
+            <p>Unacceptable: Mempool-Space</p>
+            <p>Acceptable: mempool.space</p>
+
+            <li>Don't pluralize our Marks.</li>
+            <br>
+            <p>Unacceptable: I have two mempool.space’s running on my computer.</p>
+            <p>Acceptable: I have two mempool.space explorers running on my computer.</p>
+
+            <li>Don't use "a" or "the" to refer to an instance of our Mark.</li>
+            <br>
+            <p>Unacceptable: I installed a Mempool Open Source on my mom's computer.</p>
+            <p>Acceptable: I installed mempool.space on my mom's computer.</p>
+
+            <li>Always use our Marks as an adjective modifying a noun.</li>
+            <br>
+            <p>Unacceptable: This is a Mempool Open Source. Anyone can install it.</p>
+            <p>Acceptable: This is mempool.space. Anyone can install it.</p>
+
+            <li>Don't use our Marks as a verb. Trademarks are products or services, never actions.</li>
+            <br>
+            <p>Unacceptable: I Mempool Space'd my computer today.</p>
+            <p>Acceptable: I installed mempool.space on my computer today.</p>
+
+            <li>Don't use our Marks as a possessive. Instead, the following noun should be used in possessive form or the sentence reworded so there is no possessive.</li>
+            <br>
+            <p>Unacceptable: mempool.space’s web interface is very clean.</p>
+            <p>Acceptable: The mempool.space web interface is very clean.</p>
+
+          </ol>
+
+          <li>Use of Logos</li>
+
+          <br>
+
+          <p>You may not change any Logo except to scale it. This means you may not add decorative elements, change the colors, change the proportions, distort it, add elements, or combine it with other logos.</p>
+
+          <p>However, when the context requires the use of black-and-white graphics and the logo is color, you may reproduce the logo in a manner that produces a black-and-white image.</p>
+
+        </ol>
+
+      </ol>
+
+      <p>EOF</p>
+
+      <p>These guidelines are based on the <a href="http://www.modeltrademarkguidelines.org">Model Trademark Guidelines</a>, used under a <a href="https://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported license</a>.</p>
+
+    </div>
+
+  </div>
+
+  <br><br>
+
+</div>

frontend/src/app/components/trademark-policy/trademark-policy.component.scss

@@ -0,0 +1,33 @@
+.trademark-policy {
+  .logo {
+    height: 62.5px;
+    width: 250px;
+    margin: 10px;
+  }
+  .circle {
+    margin-top: -50px;
+    margin-bottom: -30px;
+  }
+  .circle:before {
+    content: ' \25CF';
+    font-size: 250px;
+  }
+  ol {
+    list-style-type: upper-roman;
+  }
+  ol li {
+    font-size: 1.75rem;
+  }
+  ol ol {
+    list-style-type: lower-alpha;
+  }
+  ol ol li {
+    font-size: 1.25rem;
+  }
+  ol ol ol {
+    list-style-type: lower-roman;
+  }
+  ol ol ol li {
+    font-size: 1.15rem;
+  }
+}

frontend/src/app/components/trademark-policy/trademark-policy.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { Env, StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-trademark-policy',
+  templateUrl: './trademark-policy.component.html',
+  styleUrls: ['./trademark-policy.component.scss']
+})
+export class TrademarkPolicyComponent {
+  officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+}

frontend/src/app/components/transaction/libwally.js

@@ -0,0 +1,184 @@
+/*
+The MIT License (MIT)
+
+Copyright 2021 Blockstream Corp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+const WALLY_OK = 0,
+  ASSET_COMMITMENT_LEN = 33,
+  ASSET_GENERATOR_LEN = 33,
+  ASSET_TAG_LEN = 32,
+  BLINDING_FACTOR_LEN = 32;
+
+const WASM_URL = `./resources/wallycore/wallycore.js`;
+
+let load_promise, Module;
+export function load() {
+  return (
+    load_promise ||
+    (load_promise = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = WASM_URL;
+      script.addEventListener("error", reject);
+      script.addEventListener("load", () =>
+        InitWally().then((module) => {
+          Module = module;
+          resolve();
+        }, reject)
+      );
+      document.body.appendChild(script);
+    }))
+  );
+}
+
+// Simple wrapper to execute both asset_generator_from_bytes and asset_value_commitment,
+// with hex conversions
+export function generate_commitments(
+  value,
+  asset_hex,
+  value_blinder_hex,
+  asset_blinder_hex
+) {
+  const asset = parseHex(asset_hex, ASSET_TAG_LEN),
+    value_blinder = parseHex(value_blinder_hex, BLINDING_FACTOR_LEN),
+    asset_blinder = parseHex(asset_blinder_hex, BLINDING_FACTOR_LEN);
+
+  const asset_commitment = asset_generator_from_bytes(asset, asset_blinder),
+    value_commitment = asset_value_commitment(
+      value,
+      value_blinder,
+      asset_commitment
+    );
+
+  return {
+    asset_commitment: encodeHex(asset_commitment),
+    value_commitment: encodeHex(value_commitment),
+  };
+}
+
+export function asset_generator_from_bytes(asset, asset_blinder) {
+  const asset_commitment_ptr = Module._malloc(ASSET_GENERATOR_LEN);
+  checkCode(
+    Module.ccall(
+      "wally_asset_generator_from_bytes",
+      "number",
+      ["array", "number", "array", "number", "number", "number"],
+      [
+        asset,
+        asset.length,
+        asset_blinder,
+        asset_blinder.length,
+        asset_commitment_ptr,
+        ASSET_GENERATOR_LEN,
+      ]
+    )
+  );
+
+  const asset_commitment = readBytes(asset_commitment_ptr, ASSET_GENERATOR_LEN);
+  Module._free(asset_commitment_ptr);
+  return asset_commitment;
+}
+
+export function asset_value_commitment(value, value_blinder, asset_commitment) {
+  // Emscripten transforms int64 function arguments into two int32 arguments, see:
+  // https://emscripten.org/docs/getting_started/FAQ.html#how-do-i-pass-int64-t-and-uint64-t-values-from-js-into-wasm-functions
+  const [value_lo, value_hi] = split_int52_lo_hi(value);
+
+  const value_commitment_ptr = Module._malloc(ASSET_COMMITMENT_LEN);
+  checkCode(
+    Module.ccall(
+      "wally_asset_value_commitment",
+      "number",
+      [
+        "number",
+        "number",
+        "array",
+        "number",
+        "array",
+        "number",
+        "number",
+        "number",
+      ],
+      [
+        value_lo,
+        value_hi,
+        value_blinder,
+        value_blinder.length,
+        asset_commitment,
+        asset_commitment.length,
+        value_commitment_ptr,
+        ASSET_COMMITMENT_LEN,
+      ]
+    )
+  );
+
+  const value_commitment = readBytes(
+    value_commitment_ptr,
+    ASSET_COMMITMENT_LEN
+  );
+  Module._free(value_commitment_ptr);
+  return value_commitment;
+}
+
+function checkCode(code) {
+  if (code != WALLY_OK) throw new Error(`libwally failed with code ${code}`);
+}
+
+function readBytes(ptr, size) {
+  const bytes = new Uint8Array(size);
+  for (let i = 0; i < size; i++) bytes[i] = Module.getValue(ptr + i, "i8");
+  return bytes;
+}
+
+// Split a 52-bit JavaScript number into two 32-bits numbers for the low and high bits
+// https://stackoverflow.com/a/19274574
+function split_int52_lo_hi(i) {
+  let lo = i | 0;
+  if (lo < 0) lo += 4294967296;
+
+  let hi = i - lo;
+  hi /= 4294967296;
+
+  if (hi < 0 || hi >= 1048576) throw new Error("not an int52: " + i);
+
+  return [lo, hi];
+}
+
+function encodeHex(bytes) {
+  // return Buffer.from(bytes).toString("hex");
+  return Array.from(bytes)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+// Parse hex string encoded in *reverse*
+function parseHex(str, expected_size) {
+  if (!/^([0-9a-f]{2})+$/.test(str))
+    throw new Error("Invalid blinders (invalid hex)");
+  if (str.length != expected_size * 2)
+    throw new Error("Invalid blinders (invalid length)");
+  return new Uint8Array(
+    str
+      .match(/.{2}/g)
+      .map((hex_byte) => parseInt(hex_byte, 16))
+      .reverse()
+  );
+}

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

@@ -9,33 +9,33 @@
       </a>
     </div>
   
-  <div>
-    <div class="title">
-      <h1 i18n="shared.transaction">Transaction</h1>
-    </div>
+    <div>
+      <div class="title">
+        <h1 i18n="shared.transaction">Transaction</h1>
+      </div>
 
-    <div class="tx-link">
-      <a [routerLink]="['/tx/' | relativeUrl, txId]">
-        <span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
-        <span class="d-none d-lg-inline">{{ txId }}</span>
-      </a>
-      <app-clipboard [text]="txId"></app-clipboard>
-    </div>
+      <div class="tx-link">
+        <a [routerLink]="['/tx/' | relativeUrl, txId]">
+          <span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
+          <span class="d-none d-lg-inline">{{ txId }}</span>
+        </a>
+        <app-clipboard [text]="txId"></app-clipboard>
+      </div>
 
-    <div class="container-buttons">
-      <ng-template [ngIf]="tx?.status?.confirmed">
-        <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success">
-          <ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 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>
-      </ng-template>
-      <ng-template [ngIf]="tx && !tx?.status.confirmed">
-        <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
-      </ng-template>
+      <div class="container-buttons">
+        <ng-template [ngIf]="tx?.status?.confirmed">
+          <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success">
+            <ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 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>
+        </ng-template>
+        <ng-template [ngIf]="tx && !tx?.status.confirmed">
+          <button type="button" class="btn btn-sm btn-danger" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
+        </ng-template>
+      </div>
     </div>
   </div>
-</div>
   <div class="clearfix"></div>
 
   <ng-template [ngIf]="!isLoadingTx && !error">
@@ -65,7 +65,7 @@
                 <ng-template [ngIf]="transactionTime > 0">
                   <tr>
                     <td i18n="transaction.confirmed|Transaction Confirmed state">Confirmed</td>
-                    <td><ng-container i18n="transaction.confirmed.after|Transaction confirmed after">After <app-timespan [time]="tx.status.block_time - transactionTime"></app-timespan></ng-container></td>
+                    <td><app-time-span [time]="tx.status.block_time - transactionTime" [fastRender]="true"></app-time-span></td>
                   </tr>
                 </ng-template>
                 <tr *ngIf="network !== 'liquid'">
@@ -117,10 +117,10 @@
                       </ng-template>
                       <ng-template #belowBlockLimit>
                         <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeEstimateDefault">
-                          <ng-container *ngTemplateOutlet="1 * txInBlockIndex + 1 === 1 ? nextBlockEta : nextBlockEtaPlural; context:{ $implicit: 1 * txInBlockIndex + 1 }"></ng-container>&nbsp;<i><span class="symbol">(<ng-container *ngTemplateOutlet="txInBlockIndex === 0 ? blocksSingular : blocksPlural; context: {$implicit: txInBlockIndex + 1 }"></ng-container>)</span></i>
+                          <app-time-until [time]="(60 * 1000 * txInBlockIndex) + now" [fastRender]="false" [fixedRender]="true"></app-time-until>
                         </ng-template>
                         <ng-template #timeEstimateDefault>
-                          <ng-container *ngTemplateOutlet="nextBlockEtaPlural; context:{ $implicit: 10 * txInBlockIndex + 10 }"></ng-container>&nbsp;<i><span class="symbol">(<ng-container *ngTemplateOutlet="txInBlockIndex === 0 ? blocksSingular : blocksPlural; context: {$implicit: txInBlockIndex + 1 }"></ng-container>)</span></i>
+                          <app-time-until *ngIf="(timeAvg$ | async) as timeAvg;" [time]="(timeAvg * txInBlockIndex) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
                         </ng-template>
                       </ng-template>
                     </ng-template>
@@ -198,7 +198,7 @@
 
     <div class="clearfix"></div>
 
-    <app-transactions-list #txList [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
+    <app-transactions-list #txList [transactions]="[tx]" [errorUnblinded]="errorUnblinded" [transactionPage]="true"></app-transactions-list>
 
     <h2 class="text-left" i18n="transaction.details">Details</h2>
     <div class="box">
@@ -216,6 +216,10 @@
             <td i18n="transaction.weight|Transaction Weight">Weight</td>
             <td [innerHTML]="tx.weight | wuBytes: 2"></td>
           </tr>
+          <tr>
+            <td i18n="transaction.hex">Transaction Hex</td>
+            <td><a target="_blank" href="{{ network === '' ? '' : '/' + network }}/api/tx/{{ txId }}/hex"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -317,13 +321,6 @@
 
 <br>
 
-<ng-template let-i #nextBlockEtaPlural i18n="mempool-blocks.eta-of-next-block-plural|Block Frequency (plural)">In ~{{ i }} minutes</ng-template>
-
-<ng-template let-i #nextBlockEta i18n="mempool-blocks.eta-of-next-block|Block Frequency">In ~{{ i }} minute</ng-template>
-
-<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 #feeTable>
   <table class="table table-borderless table-striped">
     <tbody>

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

@@ -16,15 +16,13 @@
   }
 }
 
-
 h1{
-	font-size: 1.75rem;
     margin-top: 2px;
 	margin-bottom: 0;
 	float: left;
-	@media (min-width: 375px){
-		margin-top: 0px;
-		font-size: 2rem;
+    margin-top: 2px;
+	@media (min-width: 768px){
+		margin-top: -8px;
 	}
 }
 

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

@@ -1,9 +1,16 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { switchMap, filter, catchError, retryWhen, delay } from 'rxjs/operators';
+import {
+  switchMap,
+  filter,
+  catchError,
+  retryWhen,
+  delay,
+  map
+} from 'rxjs/operators';
 import { Transaction, Block } from '../../interfaces/electrs.interface';
-import { of, merge, Subscription, Observable, Subject } from 'rxjs';
+import { of, merge, Subscription, Observable, Subject, timer, combineLatest,  } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { AudioService } from 'src/app/services/audio.service';
@@ -14,7 +21,7 @@ import { CpfpInfo } from 'src/app/interfaces/node-api.interface';
 @Component({
   selector: 'app-transaction',
   templateUrl: './transaction.component.html',
-  styleUrls: ['./transaction.component.scss']
+  styleUrls: ['./transaction.component.scss'],
 })
 export class TransactionComponent implements OnInit, OnDestroy {
   network = '';
@@ -23,6 +30,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
   txInBlockIndex: number;
   isLoadingTx = true;
   error: any = undefined;
+  errorUnblinded: any = undefined;
   waitingForTransaction = false;
   latestBlock: Block;
   transactionTime = -1;
@@ -32,6 +40,9 @@ export class TransactionComponent implements OnInit, OnDestroy {
   cpfpInfo: CpfpInfo | null;
   showCpfpDetails = false;
   fetchCpfp$ = new Subject<string>();
+  commitments: Map<any, any>;
+  now = new Date().getTime();
+  timeAvg$: Observable<number>;
 
   constructor(
     private route: ActivatedRoute,
@@ -40,28 +51,63 @@ export class TransactionComponent implements OnInit, OnDestroy {
     private websocketService: WebsocketService,
     private audioService: AudioService,
     private apiService: ApiService,
-    private seoService: SeoService,
-  ) { }
+    private seoService: SeoService
+  ) {}
 
   ngOnInit() {
     this.websocketService.want(['blocks', 'mempool-blocks']);
-    this.stateService.networkChanged$.subscribe((network) => this.network = network);
+    this.stateService.networkChanged$.subscribe(
+      (network) => (this.network = network)
+    );
+
+    this.timeAvg$ = timer(0, 1000)
+      .pipe(
+        switchMap(() => combineLatest([
+          this.stateService.blocks$.pipe(map(([block]) => block)),
+          this.stateService.lastDifficultyAdjustment$
+        ])),
+        map(([block, DATime]) => {
+          this.now = new Date().getTime();
+          const now = new Date().getTime() / 1000;
+          const diff = now - DATime;
+          const blocksInEpoch = block.height % 2016;
+          let difficultyChange = 0;
+          if (blocksInEpoch > 0) {
+            difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+          }
+          const timeAvgDiff = difficultyChange * 0.1;
+
+          let timeAvgMins = 10;
+          if (timeAvgDiff > 0 ){
+            timeAvgMins -= Math.abs(timeAvgDiff);
+          } else {
+            timeAvgMins += Math.abs(timeAvgDiff);
+          }
+          return timeAvgMins * 60 * 1000;
+        })
+      );
 
     this.fetchCpfpSubscription = this.fetchCpfp$
       .pipe(
-        switchMap((txId) => this.apiService.getCpfpinfo$(txId)
-          .pipe(
-            retryWhen((errors) => errors.pipe(delay(2000)))
-          )
-        ),
+        switchMap((txId) =>
+          this.apiService
+            .getCpfpinfo$(txId)
+            .pipe(retryWhen((errors) => errors.pipe(delay(2000))))
+        )
       )
       .subscribe((cpfpInfo) => {
         if (!this.tx) {
           return;
         }
-        const lowerFeeParents = cpfpInfo.ancestors.filter((parent) => (parent.fee / (parent.weight / 4)) < this.tx.feePerVsize);
-        let totalWeight = this.tx.weight + lowerFeeParents.reduce((prev, val) => prev + val.weight, 0);
-        let totalFees = this.tx.fee + lowerFeeParents.reduce((prev, val) => prev + val.fee, 0);
+        const lowerFeeParents = cpfpInfo.ancestors.filter(
+          (parent) => parent.fee / (parent.weight / 4) < this.tx.feePerVsize
+        );
+        let totalWeight =
+          this.tx.weight +
+          lowerFeeParents.reduce((prev, val) => prev + val.weight, 0);
+        let totalFees =
+          this.tx.fee +
+          lowerFeeParents.reduce((prev, val) => prev + val.fee, 0);
 
         if (cpfpInfo.bestDescendant) {
           totalWeight += cpfpInfo.bestDescendant.weight;
@@ -69,98 +115,116 @@ export class TransactionComponent implements OnInit, OnDestroy {
         }
 
         this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
-        this.stateService.markBlock$.next({ txFeePerVSize: this.tx.effectiveFeePerVsize });
+        this.stateService.markBlock$.next({
+          txFeePerVSize: this.tx.effectiveFeePerVsize,
+        });
         this.cpfpInfo = cpfpInfo;
       });
 
-    this.subscription = this.route.paramMap.pipe(
-      switchMap((params: ParamMap) => {
-        this.txId = params.get('id') || '';
-        this.seoService.setTitle($localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`);
-        this.resetTransaction();
-        return merge(
-          of(true),
-          this.stateService.connectionState$.pipe(
-            filter((state) => state === 2 && this.tx && !this.tx.status.confirmed)
-          ),
-        );
-      }),
-      switchMap(() => {
-        let transactionObservable$: Observable<Transaction>;
-        if (history.state.data) {
-          transactionObservable$ = of(history.state.data);
-        } else {
-          transactionObservable$ = this.electrsApiService.getTransaction$(this.txId).pipe(
-            catchError(this.handleLoadElectrsTransactionError.bind(this))
+    this.subscription = this.route.paramMap
+      .pipe(
+        switchMap(async (params: ParamMap) => {
+          this.txId = params.get('id') || '';
+
+          await this.checkUnblindedTx();
+          this.seoService.setTitle(
+            $localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
           );
-        }
-        return merge(
-          transactionObservable$,
-          this.stateService.mempoolTransactions$
-        );
-      })
-    )
-    .subscribe((tx: Transaction) => {
-      if (!tx) {
-        return;
-      }
-      this.tx = tx;
-      if (tx.fee === undefined) {
-        this.tx.fee = 0;
-      }
-      this.tx.feePerVsize = tx.fee / (tx.weight / 4);
-      this.isLoadingTx = false;
-      this.error = undefined;
-      this.waitingForTransaction = false;
-      this.setMempoolBlocksSubscription();
+          this.resetTransaction();
+          return merge(
+            of(true),
+            this.stateService.connectionState$.pipe(
+              filter(
+                (state) => state === 2 && this.tx && !this.tx.status.confirmed
+              )
+            )
+          );
+        }),
+        switchMap(() => {
+          let transactionObservable$: Observable<Transaction>;
+          if (history.state.data) {
+            transactionObservable$ = of(history.state.data);
+          } else {
+            transactionObservable$ = this.electrsApiService
+              .getTransaction$(this.txId)
+              .pipe(
+                catchError(this.handleLoadElectrsTransactionError.bind(this))
+              );
+          }
+          return merge(
+            transactionObservable$,
+            this.stateService.mempoolTransactions$
+          );
+        })
+      )
+      .subscribe(
+        async (tx: Transaction) => {
+          if (!tx) {
+            return;
+          }
+          this.tx = tx;
+          if (tx.fee === undefined) {
+            this.tx.fee = 0;
+          }
+          this.tx.feePerVsize = tx.fee / (tx.weight / 4);
+          this.isLoadingTx = false;
+          this.error = undefined;
+          this.waitingForTransaction = false;
+          this.setMempoolBlocksSubscription();
 
-      if (!tx.status.confirmed) {
-        this.websocketService.startTrackTransaction(tx.txid);
+          if (!tx.status.confirmed) {
+            this.websocketService.startTrackTransaction(tx.txid);
 
-        if (tx.firstSeen) {
-          this.transactionTime = tx.firstSeen;
-        } else {
-          this.getTransactionTime();
-        }
-      }
+            if (tx.firstSeen) {
+              this.transactionTime = tx.firstSeen;
+            } else {
+              this.getTransactionTime();
+            }
+          }
 
-      if (this.tx.status.confirmed) {
-        this.stateService.markBlock$.next({ blockHeight: tx.status.block_height });
-      } else {
-        if (tx.cpfpChecked) {
-          this.stateService.markBlock$.next({ txFeePerVSize: tx.effectiveFeePerVsize });
-          this.cpfpInfo = {
-            ancestors: tx.ancestors,
-            bestDescendant: tx.bestDescendant,
-          };
-        } else {
-          this.fetchCpfp$.next(this.tx.txid);
+          if (this.tx.status.confirmed) {
+            this.stateService.markBlock$.next({
+              blockHeight: tx.status.block_height,
+            });
+          } else {
+            if (tx.cpfpChecked) {
+              this.stateService.markBlock$.next({
+                txFeePerVSize: tx.effectiveFeePerVsize,
+              });
+              this.cpfpInfo = {
+                ancestors: tx.ancestors,
+                bestDescendant: tx.bestDescendant,
+              };
+            } else {
+              this.fetchCpfp$.next(this.tx.txid);
+            }
+          }
+          await this.checkUnblindedTx();
+        },
+        (error) => {
+          this.error = error;
+          this.isLoadingTx = false;
         }
+      );
+
+    this.stateService.blocks$.subscribe(([block, txConfirmed]) => {
+      this.latestBlock = block;
+
+      if (txConfirmed && this.tx) {
+        this.tx.status = {
+          confirmed: true,
+          block_height: block.height,
+          block_hash: block.id,
+          block_time: block.timestamp,
+        };
+        this.stateService.markBlock$.next({ blockHeight: block.height });
+        this.audioService.playSound('magic');
       }
-    },
-    (error) => {
-      this.error = error;
-      this.isLoadingTx = false;
     });
 
-    this.stateService.blocks$
-      .subscribe(([block, txConfirmed]) => {
-        this.latestBlock = block;
-
-        if (txConfirmed && this.tx) {
-          this.tx.status = {
-            confirmed: true,
-            block_height: block.height,
-            block_hash: block.id,
-            block_time: block.timestamp,
-          };
-          this.stateService.markBlock$.next({ blockHeight: block.height });
-          this.audioService.playSound('magic');
-        }
-      });
-
-    this.stateService.txReplaced$
-      .subscribe((rbfTransaction) => this.rbfTransaction = rbfTransaction);
+    this.stateService.txReplaced$.subscribe(
+      (rbfTransaction) => (this.rbfTransaction = rbfTransaction)
+    );
   }
 
   handleLoadElectrsTransactionError(error: any): Observable<any> {
@@ -174,26 +238,30 @@ export class TransactionComponent implements OnInit, OnDestroy {
   }
 
   setMempoolBlocksSubscription() {
-    this.stateService.mempoolBlocks$
-      .subscribe((mempoolBlocks) => {
-        if (!this.tx) {
-          return;
-        }
+    this.stateService.mempoolBlocks$.subscribe((mempoolBlocks) => {
+      if (!this.tx) {
+        return;
+      }
 
-        const txFeePerVSize = this.tx.effectiveFeePerVsize || this.tx.fee / (this.tx.weight / 4);
+      const txFeePerVSize =
+        this.tx.effectiveFeePerVsize || this.tx.fee / (this.tx.weight / 4);
 
-        for (const block of mempoolBlocks) {
-          for (let i = 0; i < block.feeRange.length - 1; i++) {
-            if (txFeePerVSize <= block.feeRange[i + 1] && txFeePerVSize >= block.feeRange[i]) {
-              this.txInBlockIndex = mempoolBlocks.indexOf(block);
-            }
+      for (const block of mempoolBlocks) {
+        for (let i = 0; i < block.feeRange.length - 1; i++) {
+          if (
+            txFeePerVSize <= block.feeRange[i + 1] &&
+            txFeePerVSize >= block.feeRange[i]
+          ) {
+            this.txInBlockIndex = mempoolBlocks.indexOf(block);
           }
         }
-      });
+      }
+    });
   }
 
   getTransactionTime() {
-    this.apiService.getTransactionTimes$([this.tx.txid])
+    this.apiService
+      .getTransactionTimes$([this.tx.txid])
       .subscribe((transactionTimes) => {
         this.transactionTime = transactionTimes[0];
       });
@@ -226,4 +294,145 @@ export class TransactionComponent implements OnInit, OnDestroy {
     this.fetchCpfpSubscription.unsubscribe();
     this.leaveTransaction();
   }
+
+  // Parse the blinders data from a string encoded as a comma separated list, in the following format:
+  // <value_in_satoshis>,<asset_tag_hex>,<amount_blinder_hex>,<asset_blinder_hex>
+  // This can be repeated with a comma separator to specify blinders for multiple outputs.
+
+  parseBlinders(str: string) {
+    const parts = str.split(',');
+    const blinders = [];
+    while (parts.length) {
+      blinders.push({
+        value: this.verifyNum(parts.shift()),
+        asset: this.verifyHex32(parts.shift()),
+        value_blinder: this.verifyHex32(parts.shift()),
+        asset_blinder: this.verifyHex32(parts.shift()),
+      });
+    }
+    return blinders;
+  }
+
+  verifyNum(num: string) {
+    if (!+num) {
+      throw new Error('Invalid blinding data (invalid number)');
+    }
+    return +num;
+  }
+  verifyHex32(str: string) {
+    if (!str || !/^[0-9a-f]{64}$/i.test(str)) {
+      throw new Error('Invalid blinding data (invalid hex)');
+    }
+    return str;
+  }
+
+  async makeCommitmentMap(blinders: any) {
+    const libwally = await import('./libwally.js');
+    await libwally.load();
+    const commitments = new Map();
+    blinders.forEach(b => {
+      const { asset_commitment, value_commitment } =
+      libwally.generate_commitments(b.value, b.asset, b.value_blinder, b.asset_blinder);
+
+      commitments.set(`${asset_commitment}:${value_commitment}`, {
+        asset: b.asset,
+        value: b.value,
+      });
+    });
+    return commitments;
+  }
+
+  // Look for the given output, returning an { value, asset } object
+  find(vout: any) {
+    return vout.assetcommitment && vout.valuecommitment &&
+      this.commitments.get(`${vout.assetcommitment}:${vout.valuecommitment}`);
+  }
+
+  // Lookup all transaction inputs/outputs and attach the unblinded data
+  tryUnblindTx(tx: any) {
+    if (tx) {
+      if (tx._unblinded) { return tx._unblinded; }
+      let matched = 0;
+      if (tx.vout !== undefined) {
+        tx.vout.forEach(vout => matched += +this.tryUnblindOut(vout));
+        tx.vin.filter(vin => vin.prevout).forEach(vin => matched += +this.tryUnblindOut(vin.prevout));
+      }
+      if (this.commitments !== undefined) {
+        tx._unblinded = { matched, total: this.commitments.size };
+        this.deduceBlinded(tx);
+        if (matched < this.commitments.size) {
+          this.errorUnblinded = `Error: Invalid blinding data.`;
+        }
+        tx._deduced = false; // invalidate cache so deduction is attempted again
+        return tx._unblinded;
+      }
+    }
+  }
+
+  // Look the given output and attach the unblinded data
+  tryUnblindOut(vout: any) {
+    const unblinded = this.find(vout);
+    if (unblinded) { Object.assign(vout, unblinded); }
+    return !!unblinded;
+  }
+
+  // Attempt to deduce the blinded input/output based on the available information
+  deduceBlinded(tx: any) {
+    if (tx._deduced) { return; }
+    tx._deduced = true;
+
+    // Find ins/outs with unknown amounts (blinded ant not revealed via the `#blinded` hash fragment)
+    const unknownIns = tx.vin.filter(vin => vin.prevout && vin.prevout.value == null);
+    const unknownOuts = tx.vout.filter(vout => vout.value == null);
+
+    // If the transaction has a single unknown input/output, we can deduce its asset/amount
+    // based on the other known inputs/outputs.
+    if (unknownIns.length + unknownOuts.length === 1) {
+
+      // Keep a per-asset tally of all known input amounts, minus all known output amounts
+      const totals = new Map();
+      tx.vin.filter(vin => vin.prevout && vin.prevout.value != null)
+        .forEach(({ prevout }) =>
+          totals.set(prevout.asset, (totals.get(prevout.asset) || 0) + prevout.value));
+      tx.vout.filter(vout => vout.value != null)
+        .forEach(vout =>
+          totals.set(vout.asset, (totals.get(vout.asset) || 0) - vout.value));
+
+      // There should only be a single asset where the inputs and outputs amounts mismatch,
+      // which is the asset of the blinded input/output
+      const remainder = Array.from(totals.entries()).filter(([ asset, value ]) => value !== 0);
+      if (remainder.length !== 1) { throw new Error('unexpected remainder while deducing blinded tx'); }
+      const [ blindedAsset, blindedValue ] = remainder[0];
+
+      // A positive remainder (when known in > known out) is the asset/amount of the unknown blinded output,
+      // a negative one is the input.
+      if (blindedValue > 0) {
+        if (!unknownOuts.length) { throw new Error('expected unknown output'); }
+        unknownOuts[0].asset = blindedAsset;
+        unknownOuts[0].value = blindedValue;
+      } else {
+        if (!unknownIns.length) { throw new Error('expected unknown input'); }
+        unknownIns[0].prevout.asset = blindedAsset;
+        unknownIns[0].prevout.value = blindedValue * -1;
+      }
+    }
+  }
+
+  async checkUnblindedTx() {
+    try {
+      if (this.network === 'liquid') {
+        const windowLocationHash = window.location.hash.substring('#blinded='.length);
+        if (windowLocationHash.length > 0) {
+
+          const blinders = this.parseBlinders(windowLocationHash);
+          if (blinders) {
+            this.commitments = await this.makeCommitmentMap(blinders);
+            this.tryUnblindTx(this.tx);
+          }
+        }
+      }
+    } catch (error) {
+      this.errorUnblinded = error;
+    }
+  }
 }

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

@@ -1,5 +1,5 @@
 <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
-  <div *ngIf="!transactionPage" class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
+  <div *ngIf="!transactionPage" class="header-bg box tx-page-container">
     <a class="float-left" [routerLink]="['/tx/' | relativeUrl, tx.txid]" [state]="{ data: tx }">
       <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 16 }}</span>
       <span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>
@@ -12,24 +12,29 @@
     </div>
     <div class="clearfix"></div>
   </div>
+
   <div class="header-bg box" infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
+
+    <div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
     <div class="row">
       <div class="col">
-        <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
+        <table class="table table-borderless smaller-text table-sm" id="table-tx-vin">
           <tbody>
             <ng-template ngFor let-vin [ngForOf]="tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin" [ngForTrackBy]="trackByIndexFn">
-              <tr>
+              <tr [ngClass]="assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address && tx._unblinded ? 'assetBox' : ''">
                 <td class="arrow-td">
                   <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
-                    <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 #hasPrevout>
-                    <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
-                      <i class="arrow red"></i>
+                    <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]" class="red">
+                      <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                     </a>
                     <ng-template #defaultPrevout>
-                      <a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
-                        <i class="arrow red"></i>
+                      <a [routerLink]="['/tx/' | relativeUrl, vin.txid]" class="red">
+                        <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                       </a>
                     </ng-template>
                   </ng-template>
@@ -66,7 +71,7 @@
                 </td>
               </tr>
               <tr *ngIf="displayDetails">
-                <td colspan="3">
+                <td colspan="3" class="details-container" >
                   <table class="table table-striped table-borderless details-table mb-3">
                     <tbody>
                       <ng-template [ngIf]="vin.scriptsig">
@@ -114,10 +119,10 @@
       </div>
       <div class="w-100 d-block d-md-none"></div>
       <div class="col mobile-bottomcol">
-        <table class="table table-borderless smaller-text table-xs"  style="margin: 0;">
+        <table class="table table-borderless smaller-text table-sm"  id="table-tx-vout">
           <tbody>
             <ng-template ngFor let-vout let-vindex="index"  [ngForOf]="tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout" [ngForTrackBy]="trackByIndexFn">
-              <tr>
+              <tr [ngClass]="assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded ? 'assetBox' : ''">
                 <td>
                   <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
                     <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
@@ -145,24 +150,30 @@
                   <ng-template [ngIf]="vout.asset && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
                     <div *ngIf="assetsMinimal && assetsMinimal[vout.asset]">
                       <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vout }"></ng-container>
-                  </div>
+                    </div>
                   </ng-template>
                   <ng-template #defaultOutput>
                     <app-amount [satoshis]="vout.value"></app-amount>
                   </ng-template>
                 </td>
-                <td class="pl-1 arrow-td">
-                  <i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
+                <td class="arrow-td">
+                  <span *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="grey">
+                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                  </span>
                   <ng-template #outspend>
-                    <i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
+                    <span *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="green">
+                      <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                    </span>
                     <ng-template #spent>
-                      <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
+                      <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]" class="red">
+                        <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                      </a>
                     </ng-template>
                   </ng-template>
                 </td>
               </tr>
               <tr *ngIf="displayDetails">
-                <td colspan="3">
+                <td colspan="3" class=" details-container" >
                   <table class="table table-striped table-borderless details-table mb-3">
                     <tbody>
                       <tr *ngIf="vout.scriptpubkey_type">
@@ -235,5 +246,4 @@
   {{ assetsMinimal[item.asset][0] }}
   <br />
   <a [routerLink]="['/asset/' | relativeUrl, item.asset]">{{ item.asset | shortenString : 13 }}</a>
-  <br /><br />
 </ng-template>

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

@@ -1,62 +1,25 @@
+
 .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;
+	}
+}
+.green {
+  	color:#28a745;
 }
 
-.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
+.red {
+  	color:#dc3545;
 }
 
-.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);
-}
-
-.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;
 }
 
 .mobile-bottomcol {
@@ -66,24 +29,6 @@
 	}
 }
 
-.details-table {
-	margin-top: 5px;
-}
-
-.details-table td {
-	padding: 0.75rem;
-	&:first-child {
-		white-space: pre-wrap;
-	}
-}
-
-.details-table td:nth-child(2) {
-	word-break: break-all;
-	white-space: normal;
-	font-family: "Courier New", Courier, monospace;
-	font-size: 12px;
-}
-
 .smaller-text {
 	font-size: 12px;
 	@media (min-width: 576px) {
@@ -132,3 +77,41 @@
 .fiat {
 	margin-left: 10px; 
 }
+
+.tx-page-container {
+	padding: 10px; 
+	margin-bottom: 10px;
+	margin-top: 10px;
+}
+.assetBox {
+	background-color: #653b9c90;
+}
+
+.details-container {
+	padding: 0px;
+	tr td {
+		padding: 0.75rem;
+		font-size: 12px;
+		&:first-child {
+			color: #ffffff66;
+			white-space: pre-wrap;
+			@media (min-width: 476px) {
+				white-space: nowrap;
+			}
+		}
+		&:nth-child(2) {
+			word-break: break-all;
+			white-space: normal;
+			font-family: "Courier New", Courier, monospace;
+		}
+	}
+}
+
+.error-unblinded {
+	display: block;
+	width: 100%;
+	color: #d43131;
+	text-align: right;
+    margin-top: 0px;
+    margin-bottom: 10px;
+}

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

@@ -21,6 +21,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   @Input() transactions: Transaction[];
   @Input() showConfirmations = false;
   @Input() transactionPage = false;
+  @Input() errorUnblinded = false;
 
   @Output() loadMore = new EventEmitter();
 

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

@@ -1,15 +1,18 @@
 
 <div class="container-xl dashboard-container">
-
   <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
     <ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
-      <div class="col">
+      <div class="col card-wrapper">
+        <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
         <div class="card">
           <div class="card-body">
             <app-fees-box class="d-block"></app-fees-box>
           </div>
         </div>
       </div>
+      <div class="col" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
+        <ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container>
+      </div>
       <div class="col">
         <div class="card">
           <div class="card-body">
@@ -24,12 +27,11 @@
           </div>
         </div>
       </div>
-      <div class="col" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
-        <ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container>
-      </div>
+      
     </ng-template>
     <ng-template #expanded>
-      <div class="col">
+      <div class="col card-wrapper">
+        <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
         <div class="card">
           <div class="card-body">
             <app-fees-box class="d-block"></app-fees-box>
@@ -112,7 +114,7 @@
               <tbody>
                 <tr *ngFor="let transaction of transactions$ | async; let i = index;">
                   <td class="table-cell-txid"><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
-                  <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
+                  <td class="table-cell-satoshis"><app-amount [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount></td>
                   <td class="table-cell-fiat" *ngIf="(network$ | async) === ''" ><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
                   <td class="table-cell-fees">{{ transaction.fee / transaction.vsize | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
                 </tr>
@@ -137,16 +139,22 @@
 
   <div class="terms-of-service">
     <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+    |
+    <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
   </div>
 
 </div>
 
+<ng-template #loadingTransactions>
+  <div class="skeleton-loader skeleton-loader-transactions"></div>
+</ng-template>
+
 <ng-template #loading>
   <div class="skeleton-loader"></div>
 </ng-template>
 
-<ng-template #loadingsmall>
-  <span class="skeleton-loader" style="width: 80%;"></span>
+<ng-template #loadingbig>
+  <span class="skeleton-loader skeleton-loader-big" ></span>
 </ng-template>
 
 <ng-template #emptyBlock>
@@ -160,19 +168,19 @@
     <div class="item">
       <h5 *ngIf="!mempoolInfoData.value || mempoolInfoData.value.memPoolInfo.mempoolminfee === 0.00001 else purgingText" class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Minimum fee</h5>
       <ng-template #purgingText><h5 class="card-title" i18n="dashboard.purging|Purgin below fee">Purging</h5></ng-template>
-      <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
+      <p class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loading">
         <ng-template [ngIf]="mempoolInfoData.value.memPoolInfo.mempoolminfee > 0.00001">&lt; </ng-template>{{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | number : '1.1-1' }} <span><ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container></span>
       </p>
     </div>
     <div class="item">
       <h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
-      <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
+      <p class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loading">
         {{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
       </p>
     </div>
     <div class="item bar">
       <h5 class="card-title" i18n="dashboard.memory-usage|Memory usage">Memory usage</h5>
-      <div class="card-text" *ngIf="mempoolInfoData.value; else loadingsmall">
+      <div class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loadingbig">
         <div class="progress">
           <div class="progress-bar {{ mempoolInfoData.value.mempoolSizeProgress }}" role="progressbar" [ngStyle]="{'width': (mempoolInfoData.value.memPoolInfo.usage / mempoolInfoData.value.memPoolInfo.maxmempool * 100) + '%' }">&nbsp;</div>
           <div class="progress-text"><span [innerHTML]="mempoolInfoData.value.memPoolInfo.usage | bytes"></span> / <span [innerHTML]="mempoolInfoData.value.memPoolInfo.maxmempool | bytes"></span></div>
@@ -184,7 +192,7 @@
 
 <ng-template #txPerSecond let-mempoolInfoData>
   <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming transactions</h5>
-  <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
+  <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value" [ngIfElse]="loadingTransactions">
     <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
       &nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>
     </span>
@@ -198,14 +206,79 @@
 </ng-template>
 
 <ng-template #difficultyEpoch>
-  <div class="card">
-    <div class="card-body more-padding">
-      <h5 class="card-title" i18n="dashboard.difficulty-adjustment">Difficulty adjustment</h5>
-      <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
-        <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
-        <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
-        <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
-        <div class="progress-text"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
+  <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+  <div class="card-wrapper">
+    <div class="card">
+      <div class="card-body more-padding">
+        <div class="difficulty-adjustment-container" *ngIf="(isLoadingWebSocket$ | async) === false && (difficultyEpoch$ | async) as epochData; else loadingDifficulty">
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
+            <div class="card-text">
+              <ng-container *ngTemplateOutlet="epochData.remainingBlocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.remainingBlocks }"></ng-container>
+              <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 class="symbol"><app-time-until [time]="epochData.remainingTime" [fastRender]="true"></app-time-until></div>
+          </div>
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
+            <div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">
+              <span *ngIf="epochData.change > 0; else arrowDownDifficulty" >
+                <fa-icon class="retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
+              </span>
+              <ng-template #arrowDownDifficulty >
+                <fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
+              </ng-template>
+              {{ epochData.change | absolute | number: '1.2-2' }} 
+              <span class="symbol">%</span>
+            </div>
+            <div class="symbol">
+              <span i18n="difficulty-box.previous">Previous</span>: 
+              <span [ngStyle]="{'color': epochData.colorPreviousAdjustments}">
+                <span *ngIf="epochData.previousRetarget > 0; else arrowDownPreviousDifficulty" >
+                  <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
+                </span>
+                <ng-template #arrowDownPreviousDifficulty >
+                  <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
+                </ng-template>
+                {{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %
+            </div>
+          </div>
+          <div class="item">
+            <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
+            <div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
+            <div class="progress small-bar">
+              <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
+
+<ng-template #loadingDifficulty>
+  <div class="difficulty-skeleton loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
       </div>
     </div>
   </div>

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

@@ -31,6 +31,7 @@
   width: 100%;
   background-color: #2d3348;
   height: 1.1rem;
+  max-width: 180px;
 }
 
 .bg-warning {
@@ -42,7 +43,7 @@
 }
 
 .more-padding {
-  padding: 1.25rem 2rem 1.25rem 2rem;
+  padding: 18px;
 }
 
 .graph-card {
@@ -53,6 +54,7 @@
 }
 
 .mempool-info-data {
+  min-height: 56px;
   display: block;
   @media (min-width: 485px) {
     display: flex;
@@ -115,21 +117,31 @@
       margin: 0px auto 0px;
     }
   }
+  .skeleton-loader {
+    width: 100%;
+    max-width: 100px;
+    display: block;
+    margin: 18px auto 0;
+  }
+  .skeleton-loader-big {
+    max-width: 180px;
+  }
 }
 
 .latest-transactions {
   width: 100%;
   text-align: left;
+  table-layout:fixed; 
   tr, td, th {
     border: 0px;
   }
-  .table-cell-txid {
-    width: 20%;
+  td {
+    overflow:hidden;
+    width: 25%;
   }
   .table-cell-satoshis {
     display: none;
     text-align: right;
-    width: 30%;
     @media (min-width: 576px) {
       display: table-cell;
     }
@@ -143,7 +155,6 @@
   .table-cell-fiat {
     display: none;
     text-align: right;
-    width: 30%;
     @media (min-width: 485px) {
       display: table-cell;
     }
@@ -155,10 +166,16 @@
     }
   }
   .table-cell-fees {
-    width: 25%;
     text-align: right;
   }
 }
+.skeleton-loader-transactions {
+  max-width: 250px;
+  position: relative;
+  top: 2px;
+  margin-bottom: -3px;
+  height: 18px;
+}
 
 .lastest-blocks-table {
   width: 100%;
@@ -213,4 +230,129 @@
 
 .terms-of-service {
   margin-top: 1rem;
+}
+
+.small-bar {
+  height: 8px;
+  top: -4px;
+  max-width: 120px;
+}
+
+.difficulty-adjustment-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 76px;
+  .shared-block {
+    color: #ffffff66;
+    font-size: 12px;
+  }
+  .item {    
+    padding: 0 5px;
+    width: 100%;
+    &:nth-child(1) {
+      display: none;
+      @media (min-width: 485px) {
+        display: table-cell;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: table-cell;
+      }
+    }
+  }
+  .card-text {
+    font-size: 22px;
+    margin-top: -9px;
+    position: relative;
+  }
+}
+
+
+.difficulty-skeleton {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }    
+    &:first-child{
+      display: none;
+      @media (min-width: 485px) {
+        display: block;
+      }    
+      @media (min-width: 768px) {
+        display: none;
+      }    
+      @media (min-width: 992px) {
+        display: block;
+      }    
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .card-text {
+    .skeleton-loader {
+      width: 100%;
+      display: block;
+      &:first-child {
+        margin: 14px auto 0;
+        max-width: 80px;
+      }
+      &:last-child {
+        margin: 10px auto 0;
+        max-width: 120px;
+      }
+    }
+  }
+}
+
+.loading-container {
+  min-height: 76px;
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 22px 20px;
+  }
+}
+
+.retarget-sign {
+  margin-right: -3px;
+  font-size: 14px;
+  top: -2px;
+  position: relative;
+}
+
+.previous-retarget-sign {
+  margin-right: -2px;
+  font-size: 10px;
 }

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
-import { combineLatest, merge, Observable, of } from 'rxjs';
+import { combineLatest, merge, Observable, of, timer } from 'rxjs';
 import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
 import { Block } from '../interfaces/electrs.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
@@ -19,9 +19,15 @@ interface MempoolBlocksData {
 
 interface EpochProgress {
   base: string;
-  green: string;
-  red: string;
   change: number;
+  progress: string;
+  remainingBlocks: number;
+  newDifficultyHeight: number;
+  colorAdjustments: string;
+  colorPreviousAdjustments: string;
+  timeAvg: string;
+  remainingTime: number;
+  previousRetarget: number;
 }
 
 interface MempoolInfoData {
@@ -56,6 +62,7 @@ export class DashboardComponent implements OnInit {
   mempoolTransactionsWeightPerSecondData: any;
   mempoolStats$: Observable<MempoolStatsData>;
   transactionsWeightPerSecondOptions: any;
+  isLoadingWebSocket$: Observable<boolean>;
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
@@ -67,6 +74,8 @@ export class DashboardComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+
+    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
     this.seoService.resetTitle();
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
     this.network$ = merge(of(''), this.stateService.networkChanged$);
@@ -107,39 +116,88 @@ export class DashboardComponent implements OnInit {
         };
       })
     );
+    
+    this.difficultyEpoch$ = timer(0, 1000)
+      .pipe(
+        switchMap(() => combineLatest([
+          this.stateService.blocks$.pipe(map(([block]) => block)),
+          this.stateService.lastDifficultyAdjustment$,
+          this.stateService.previousRetarget$
+        ])),
+        map(([block, DATime, previousRetarget]) => {
+          const now = new Date().getTime() / 1000;
+          const diff = now - DATime;
+          const blocksInEpoch = block.height % 2016;
+          const estimatedBlocks = Math.round(diff / 60 / 10);
+          let difficultyChange = 0;
+          if (blocksInEpoch > 0) {
+            difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+          }
 
-    this.difficultyEpoch$ = combineLatest([
-      this.stateService.blocks$.pipe(map(([block]) => block)),
-      this.stateService.lastDifficultyAdjustment$
-    ])
-    .pipe(
-      map(([block, DATime]) => {
-        const now = new Date().getTime() / 1000;
-        const diff = now - DATime;
-        const blocksInEpoch = block.height % 2016;
-        const estimatedBlocks = Math.round(diff / 60 / 10);
-        const difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+          let base = 0;
 
-        let base = 0;
-        let green = 0;
-        let red = 0;
+          if (blocksInEpoch >= estimatedBlocks) {
+            base = estimatedBlocks / 2016 * 100;
+          } else {
+            base = blocksInEpoch / 2016 * 100;
+          }
 
-        if (blocksInEpoch >= estimatedBlocks) {
-          base = estimatedBlocks / 2016 * 100;
-          green = (blocksInEpoch - estimatedBlocks) / 2016 * 100;
-        } else {
-          base = blocksInEpoch / 2016 * 100;
-          red = Math.min((estimatedBlocks - blocksInEpoch) / 2016 * 100, 100 - base);
-        }
+          let colorAdjustments = '#dc3545';
+          if (difficultyChange >= 0) {
+            colorAdjustments = '#3bcc49';
+          }
+
+          let colorPreviousAdjustments = '#dc3545';
+          if(previousRetarget){
+            if (previousRetarget >= 0) {
+              colorPreviousAdjustments = '#3bcc49';
+            }
+            if (previousRetarget === 0) {
+              colorPreviousAdjustments = '#ffffff66';
+            }
+          }else{
+            colorPreviousAdjustments = '#ffffff66';
+          }
+
+
+          const timeAvgDiff = difficultyChange * 0.1;
+
+          let timeAvgMins = 10;
+          if(timeAvgDiff > timeAvgDiff){
+            if (timeAvgDiff > 0){
+              timeAvgMins -= Math.abs(timeAvgDiff);
+            } else {
+              timeAvgMins += Math.abs(timeAvgDiff);
+            }
+          }
+          const remainingBlocks = 2016 - blocksInEpoch;
+          const nowMilliseconds = now * 1000;
+          const timeAvgMilliseconds = timeAvgMins * 60 * 1000;
+          const remainingBlocsMilliseconds = remainingBlocks * timeAvgMilliseconds;
+
+          if(difficultyChange > 300) {
+            difficultyChange = 300;
+          }
+          if(difficultyChange < -75){
+            difficultyChange = -75;
+          }
+
+          return {
+            base: base + '%',
+            change: difficultyChange,
+            progress: base.toFixed(2),
+            remainingBlocks,
+            timeAvg: timeAvgMins.toFixed(0),
+            colorAdjustments,
+            colorPreviousAdjustments,
+            blocksInEpoch,
+            newDifficultyHeight: block.height + remainingBlocks,
+            remainingTime: remainingBlocsMilliseconds + nowMilliseconds,
+            previousRetarget: previousRetarget ? previousRetarget : 0
+          };
+        })
+      );
 
-        return {
-          base: base + '%',
-          green: green + '%',
-          red: red + '%',
-          change: difficultyChange,
-        };
-      })
-    );
 
     this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
       .pipe(

frontend/src/app/interfaces/electrs.interface.ts

@@ -17,6 +17,8 @@ export interface Transaction {
   bestDescendant?: BestDescendant | null;
   cpfpChecked?: boolean;
   deleteAfter?: number;
+  _unblinded?: any;
+  _deduced?: boolean;
 }
 
 interface Ancestor {

frontend/src/app/interfaces/node-api.interface.ts

@@ -25,3 +25,12 @@ export interface CpfpInfo {
   ancestors: Ancestor[];
   bestDescendant: BestDescendant | null;
 }
+
+export interface DifficultyAdjustment {
+  difficultyChange: number;
+  estimatedRetargetDate: number;
+  previousRetarget: number;
+  progressPercent: number;
+  remainingBlocks: number;
+  remainingTime: number;
+}

frontend/src/app/interfaces/websocket.interface.ts

@@ -10,6 +10,7 @@ export interface WebsocketResponse {
   mempoolInfo?: MempoolInfo;
   vBytesPerSecond?: number;
   lastDifficultyAdjustment?: number;
+  previousRetarget?: number;
   action?: string;
   data?: string[];
   tx?: Transaction;