Bump version number for v2.2.2 release

Merge pull request #769 from mempool/wiz/fix-api-docs-fees-path
Fix api-docs incorrect API path for fees related methods
2021-09-09 07:23:36 +09:00 · 2021-09-08 07:29:36 +09:00 · 2021-09-08 07:13:23 +09:00 · 2021-09-08 06:37:24 +09:00 · 2021-09-08 06:36:42 +09:00 · 2021-09-07 13:13:29 +04:00
314 changed files with 125190 additions and 65539 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ['https://mempool.space/about'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: ['https://mempool.space/sponsor'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -0,0 +1,77 @@
+name: Cypress Tests
+
+on: [push, pull_request]
+
+jobs:
+  cypress:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2, 3, 4, 5]
+        os: ["ubuntu-latest"]
+        browser: [chrome]
+    name: E2E tests on ${{ matrix.browser }} - ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: ${{ matrix.browser }} browser tests (Mempool)
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: frontend
+          build: npm run config:defaults:mempool
+          start: npm run start:local-prod
+          wait-on: 'http://localhost:4200'
+          wait-on-timeout: 120
+          record: true
+          parallel: true
+          env: BASE_MODULE=mempool
+          group: Tests on ${{ matrix.browser }} (Mempool)
+          browser: ${{ matrix.browser }}
+          ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+
+      - name: ${{ matrix.browser }} browser tests (Liquid)
+        uses: cypress-io/github-action@v2
+        if: always()
+        with:
+          working-directory: frontend
+          build: npm run config:defaults:liquid
+          start: npm run start:local-prod
+          wait-on: 'http://localhost:4200'
+          wait-on-timeout: 120
+          record: true
+          parallel: true
+          spec: cypress/integration/liquid/liquid.spec.ts
+          env: BASE_MODULE=liquid
+          group: Tests on ${{ matrix.browser }} (Liquid)
+          browser: ${{ matrix.browser }}
+          ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+
+      - name: ${{ matrix.browser }} browser tests (Bisq)
+        uses: cypress-io/github-action@v2
+        if: always()
+        with:
+          working-directory: frontend
+          build: npm run config:defaults:bisq
+          start: npm run start:local-prod
+          wait-on: 'http://localhost:4200'
+          wait-on-timeout: 120
+          record: true
+          parallel: true
+          spec: cypress/integration/bisq/bisq.spec.ts
+          env: BASE_MODULE=bisq
+          group: Tests on ${{ matrix.browser }} (Bisq)
+          browser: ${{ matrix.browser }}
+          ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
--- a/.github/workflows/on-tag.yml
+++ b/.github/workflows/on-tag.yml
@@ -27,6 +27,9 @@ jobs:
      - name: Show set environment variables
        run: |
          printf "      TAG: %s\n"  "$TAG"
+      
+      - name: Add SHORT_SHA env property with commit short sha
+        run: echo "SHORT_SHA=`echo ${GITHUB_SHA} | cut -c1-8`" >> $GITHUB_ENV

      - name: Login to Docker for building
        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
@@ -64,14 +67,6 @@ jobs:
          --cache-to "type=local,dest=/tmp/.buildx-cache" \
          --platform linux/amd64,linux/arm64,linux/arm/v7 \
          --tag ${{ secrets.DOCKER_HUB_USER }}/${{ matrix.service }}:$TAG \
-          --output "type=registry" ./${{ matrix.service }}/
-
-      - name: Run Docker buildx for ${{ matrix.service }} against latest
-        run: |
-          docker buildx build \
-          --cache-from "type=local,src=/tmp/.buildx-cache" \
-          --cache-to "type=local,dest=/tmp/.buildx-cache" \
-          --platform linux/amd64,linux/arm64,linux/arm/v7 \
          --tag ${{ secrets.DOCKER_HUB_USER }}/${{ matrix.service }}:latest \
-          --output "type=registry" ./${{ matrix.service }}/
-
+          --output "type=registry" ./${{ matrix.service }}/ \
+          --build-arg commitHash=$SHORT_SHA
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.tabSize": 2,
+  "typescript.tsdk": "./backend/node_modules/typescript/lib"
+}
--- a/9
+++ b/9
@@ -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
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@

 Mempool is the fully featured visualizer, explorer, and API service running on [mempool.space](https://mempool.space/), an open source project developed and operated for the benefit of the Bitcoin community, with a focus on the emerging transaction fee market to help our transition into a multi-layer ecosystem.

-![mempool](https://mempool.space/resources/screenshots/v2.1.0-dashboard.png)
+![mempool](https://mempool.space/resources/screenshots/v2.2.0-dashboard.png)

 ## Installation Methods

@@ -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
--- a/backend/.vscode/settings.json
+++ b/backend/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.tabSize": 2,
+  "typescript.tsdk": "../backend/node_modules/typescript/lib"
+}
--- a/backend/mempool-config.sample.json
+++ b/backend/mempool-config.sample.json
@@ -8,7 +8,11 @@
    "POLL_RATE_MS": 2000,
    "CACHE_DIR": "./cache",
    "CLEAR_PROTECTION_MINUTES": 20,
-    "RECOMMENDED_FEE_PERCENTILE": 50
+    "RECOMMENDED_FEE_PERCENTILE": 50,
+    "BLOCK_WEIGHT_UNITS": 4000000,
+    "INITIAL_BLOCKS_AMOUNT": 8,
+    "MEMPOOL_BLOCKS_AMOUNT": 8,
+    "PRICE_FEED_UPDATE_INTERVAL": 3600
  },
  "CORE_RPC": {
    "HOST": "127.0.0.1",
@@ -50,11 +54,7 @@
    "ENABLED": true,
    "TX_PER_SECOND_SAMPLE_PERIOD": 150
  },
-  "BISQ_BLOCKS": {
-    "ENABLED": false,
-    "DATA_PATH": "/bisq/statsnode-data/btc_mainnet/db/json"
-  },
-  "BISQ_MARKETS": {
+  "BISQ": {
    "ENABLED": false,
    "DATA_PATH": "/bisq/statsnode-data/btc_mainnet/db"
  }
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "mempool-backend",
-  "version": "2.0.0",
+  "version": "2.2.2",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "mempool-backend",
-      "version": "2.0.0",
+      "version": "2.2.2",
      "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",
@@ -18,15 +18,15 @@
        "locutus": "^2.0.12",
        "mysql2": "2.2.5",
        "node-worker-threads-pool": "^1.4.3",
-        "ws": "^7.4.4"
+        "ws": "^7.4.6"
      },
      "devDependencies": {
        "@types/compression": "^1.0.1",
        "@types/express": "^4.17.2",
        "@types/locutus": "^0.0.6",
-        "@types/ws": "^6.0.4",
+        "@types/ws": "^7.4.4",
        "tslint": "^6.1.0",
-        "typescript": "^4.1.5"
+        "typescript": "4.4.2"
      }
    },
    "node_modules/@babel/code-frame": {
@@ -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"
      }
@@ -163,10 +163,11 @@
      }
    },
    "node_modules/@types/ws": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-6.0.4.tgz",
-      "integrity": "sha512-PpPrX7SZW9re6+Ha8ojZG4Se8AZXgf0GK6zmfqEuCsY49LFDNXO3SByp44X3dFEqtB73lkCDAdUazhAjVPiNwg==",
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.4.tgz",
+      "integrity": "sha512-d/7W23JAXPodQNbOZNXvl2K+bqAQrCMwlh/nuQsPSQk6Fq0opHoPrUw43aHsvSbIiQPr8Of2hkFbnz1XBFVyZQ==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "@types/node": "*"
      }
@@ -548,17 +549,17 @@
      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
    },
    "node_modules/elliptic": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
      "dependencies": {
-        "bn.js": "^4.4.0",
-        "brorand": "^1.0.1",
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.0"
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
      }
    },
    "node_modules/encodeurl": {
@@ -569,11 +570,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
-    },
    "node_modules/escape-html": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -895,14 +891,11 @@
      }
    },
    "node_modules/locutus": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/locutus/-/locutus-2.0.14.tgz",
-      "integrity": "sha512-0H1o1iHNEp3kJ5rW57bT/CAP5g6Qm0Zd817Wcx2+rOMTYyIJoc482Ja1v9dB6IUjwvWKcBNdYi7x2lRXtlJ3bA==",
-      "dependencies": {
-        "es6-promise": "^4.2.5"
-      },
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/locutus/-/locutus-2.0.15.tgz",
+      "integrity": "sha512-2xWC4RkoAoCVXEb/stzEgG1TNgd+mrkLBj6TuEDNyUoKeQ2XzDTyJUC23sMiqbL6zJmJSP3w59OZo+zc4IBOmA==",
      "engines": {
-        "node": ">= 0.12.0"
+        "node": ">= 10"
      }
    },
    "node_modules/long": {
@@ -1480,10 +1473,11 @@
      "integrity": "sha512-7uc1O8h1M1g0rArakJdf0uLRSSgFcYexrVoKo+bzJd32gd4gDy2L/Z+8/FjPnU9ydY3pEnVPtr9FyscYY60K1g=="
    },
    "node_modules/typescript": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz",
-      "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz",
+      "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==",
      "dev": true,
+      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -1544,9 +1538,9 @@
      "dev": true
    },
    "node_modules/ws": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.4.tgz",
-      "integrity": "sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw==",
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
      "engines": {
        "node": ">=8.3.0"
      },
@@ -1597,9 +1591,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",
@@ -1698,9 +1692,9 @@
      }
    },
    "@types/ws": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-6.0.4.tgz",
-      "integrity": "sha512-PpPrX7SZW9re6+Ha8ojZG4Se8AZXgf0GK6zmfqEuCsY49LFDNXO3SByp44X3dFEqtB73lkCDAdUazhAjVPiNwg==",
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.4.tgz",
+      "integrity": "sha512-d/7W23JAXPodQNbOZNXvl2K+bqAQrCMwlh/nuQsPSQk6Fq0opHoPrUw43aHsvSbIiQPr8Of2hkFbnz1XBFVyZQ==",
      "dev": true,
      "requires": {
        "@types/node": "*"
@@ -2042,17 +2036,17 @@
      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
    },
    "elliptic": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
      "requires": {
-        "bn.js": "^4.4.0",
-        "brorand": "^1.0.1",
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.0"
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
      }
    },
    "encodeurl": {
@@ -2060,11 +2054,6 @@
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
    },
-    "es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
-    },
    "escape-html": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -2321,12 +2310,9 @@
      }
    },
    "locutus": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/locutus/-/locutus-2.0.14.tgz",
-      "integrity": "sha512-0H1o1iHNEp3kJ5rW57bT/CAP5g6Qm0Zd817Wcx2+rOMTYyIJoc482Ja1v9dB6IUjwvWKcBNdYi7x2lRXtlJ3bA==",
-      "requires": {
-        "es6-promise": "^4.2.5"
-      }
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/locutus/-/locutus-2.0.15.tgz",
+      "integrity": "sha512-2xWC4RkoAoCVXEb/stzEgG1TNgd+mrkLBj6TuEDNyUoKeQ2XzDTyJUC23sMiqbL6zJmJSP3w59OZo+zc4IBOmA=="
    },
    "long": {
      "version": "4.0.0",
@@ -2785,9 +2771,9 @@
      "integrity": "sha512-7uc1O8h1M1g0rArakJdf0uLRSSgFcYexrVoKo+bzJd32gd4gDy2L/Z+8/FjPnU9ydY3pEnVPtr9FyscYY60K1g=="
    },
    "typescript": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz",
-      "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz",
+      "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==",
      "dev": true
    },
    "unpipe": {
@@ -2833,9 +2819,9 @@
      "dev": true
    },
    "ws": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.4.tgz",
-      "integrity": "sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw==",
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
      "requires": {}
    },
    "yallist": {
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mempool-backend",
-  "version": "2.2.0-dev",
+  "version": "2.2.2",
  "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",
@@ -37,14 +37,14 @@
    "locutus": "^2.0.12",
    "mysql2": "2.2.5",
    "node-worker-threads-pool": "^1.4.3",
-    "ws": "^7.4.4"
+    "ws": "^7.4.6"
  },
  "devDependencies": {
    "@types/compression": "^1.0.1",
    "@types/express": "^4.17.2",
    "@types/locutus": "^0.0.6",
-    "@types/ws": "^6.0.4",
+    "@types/ws": "^7.4.4",
    "tslint": "^6.1.0",
-    "typescript": "^4.1.5"
+    "typescript": "4.4.2"
  }
 }
--- a/backend/src/api/backend-info.ts
+++ b/backend/src/api/backend-info.ts
@@ -30,7 +30,7 @@ class BackendInfo {
    try {
      this.gitCommitHash = fs.readFileSync('../.git/refs/heads/master').toString().trim();
    } catch (e) {
-      logger.err('Could not load git commit info: ' + e.message || e);
+      logger.err('Could not load git commit info: ' + (e instanceof Error ? e.message : e));
    }
  }

@@ -39,7 +39,7 @@ class BackendInfo {
      const packageJson = fs.readFileSync('package.json').toString();
      this.version = JSON.parse(packageJson).version;
    } catch (e) {
-      throw new Error(e);
+      throw new Error(e instanceof Error ? e.message : 'Error');
    }
  }
 }
--- a/backend/src/api/bisq/bisq.ts
+++ b/backend/src/api/bisq/bisq.ts
@@ -8,9 +8,10 @@ import { StaticPool } from 'node-worker-threads-pool';
 import logger from '../../logger';

 class Bisq {
-  private static BLOCKS_JSON_FILE_PATH = config.BISQ_BLOCKS.DATA_PATH + '/all/blocks.json';
+  private static BLOCKS_JSON_FILE_PATH = config.BISQ.DATA_PATH + '/json/all/blocks.json';
  private latestBlockHeight = 0;
  private blocks: BisqBlock[] = [];
+  private allBlocks: BisqBlock[] = [];
  private transactions: BisqTransaction[] = [];
  private transactionIndex: { [txId: string]: BisqTransaction } = {};
  private blockIndex: { [hash: string]: BisqBlock } = {};
@@ -98,7 +99,7 @@ class Bisq {
      this.topDirectoryWatcher.close();
    }
    let fsWait: NodeJS.Timeout | null = null;
-    this.topDirectoryWatcher = fs.watch(config.BISQ_BLOCKS.DATA_PATH, () => {
+    this.topDirectoryWatcher = fs.watch(config.BISQ.DATA_PATH + '/json', () => {
      if (fsWait) {
        clearTimeout(fsWait);
      }
@@ -126,7 +127,7 @@ class Bisq {
      return;
    }
    let fsWait: NodeJS.Timeout | null = null;
-    this.subdirectoryWatcher = fs.watch(config.BISQ_BLOCKS.DATA_PATH + '/all', () => {
+    this.subdirectoryWatcher = fs.watch(config.BISQ.DATA_PATH + '/json/all', () => {
      if (fsWait) {
        clearTimeout(fsWait);
      }
@@ -161,7 +162,7 @@ class Bisq {
      this.buildIndex();
      this.calculateStats();
    } catch (e) {
-      logger.err('loadBisqDumpFile() error.' + e.message || e);
+      logger.info('loadBisqDumpFile() error.' + (e instanceof Error ? e.message : e));
    }
  }

@@ -171,7 +172,7 @@ class Bisq {
    this.transactionIndex = {};
    this.addressIndex = {};

-    this.blocks.forEach((block) => {
+    this.allBlocks.forEach((block) => {
      /* Build block index */
      if (!this.blockIndex[block.hash]) {
        this.blockIndex[block.hash] = block;
@@ -245,9 +246,10 @@ class Bisq {
    if (cacheData && cacheData.length !== 0) {
      logger.debug('Processing Bisq data dump...');
      const data: BisqBlocks = await this.jsonParsePool.exec(cacheData);
-      if (data.blocks && data.blocks.length !== this.blocks.length) {
-        this.blocks = data.blocks.filter((block) => block.txs.length > 0);
-        this.blocks.reverse();
+      if (data.blocks && data.blocks.length !== this.allBlocks.length) {
+        this.allBlocks = data.blocks;
+        this.allBlocks.reverse();
+        this.blocks = this.allBlocks.filter((block) => block.txs.length > 0);
        this.latestBlockHeight = data.chainHeight;
        const time = new Date().getTime() - start;
        logger.debug('Bisq dump processed in ' + time + ' ms (worker thread)');
--- a/backend/src/api/bisq/markets-api.ts
+++ b/backend/src/api/bisq/markets-api.ts
@@ -457,6 +457,30 @@ class BisqMarketsApi {
    }
  }

+  getVolumesByTime(time: number): MarketVolume[] {
+    const timestamp_from = new Date().getTime() / 1000 - time;
+    const timestamp_to = new Date().getTime() / 1000;
+
+    const trades = this.getTradesByCriteria(undefined, timestamp_to, timestamp_from,
+      undefined, undefined, undefined, 'asc', Number.MAX_SAFE_INTEGER);
+
+    const markets: any = {};
+
+    for (const trade of trades) {
+      if (!markets[trade._market]) {
+        markets[trade._market] = {
+          'volume': 0,
+          'num_trades': 0,
+        };
+      }
+
+      markets[trade._market]['volume'] += this.fiatCurrenciesIndexed[trade.currency] ? trade._tradeAmount : trade._tradeVolume;
+      markets[trade._market]['num_trades']++;
+    }
+
+    return markets;
+  }
+
  private getTradesSummarized(trades: TradesData[], timestamp_from: number, interval?: string): SummarizedIntervals {
    const intervals: any = {};
    const intervals_prices: any = {};
--- a/backend/src/api/bisq/markets.ts
+++ b/backend/src/api/bisq/markets.ts
@@ -6,7 +6,7 @@ import logger from '../../logger';

 class Bisq {
  private static FOLDER_WATCH_CHANGE_DETECTION_DEBOUNCE = 4000;
-  private static MARKET_JSON_PATH = config.BISQ_MARKETS.DATA_PATH;
+  private static MARKET_JSON_PATH = config.BISQ.DATA_PATH;
  private static MARKET_JSON_FILE_PATHS = {
    activeCryptoCurrency: '/active_crypto_currency_list.json',
    activeFiatCurrency: '/active_fiat_currency_list.json',
@@ -102,7 +102,7 @@ class Bisq {
        logger.debug('Bisq market data updated in ' + time + ' ms');
      }
    } catch (e) {
-      logger.err('loadBisqMarketDataDumpFile() error.' + e.message || e);
+      logger.err('loadBisqMarketDataDumpFile() error.' + (e instanceof Error ? e.message : e));
    }
  }

--- a/backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts
+++ b/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[]>;
--- a/backend/src/api/bitcoin/bitcoin-api.interface.ts
+++ b/backend/src/api/bitcoin/bitcoin-api.interface.ts
@@ -98,12 +98,15 @@ export namespace IBitcoinApi {

  export interface AddressInformation {
    isvalid: boolean;                //  (boolean) If the address is valid or not. If not, this is the only property returned.
+    isvalid_parent?: boolean;        //  (boolean) Elements only
    address: string;                 //  (string) The bitcoin address validated
    scriptPubKey: string;            //  (string) The hex-encoded scriptPubKey generated by the address
    isscript: boolean;               //  (boolean) If the key is a script
    iswitness: boolean;              //  (boolean) If the address is a witness
    witness_version?: boolean;       //  (numeric, optional) The version number of the witness program
    witness_program: string;         //  (string, optional) The hex value of the witness program
+    confidential_key?: string;       //  (string) Elements only
+    unconfidential?: string;         //  (string) Elements only
  }

  export interface ChainTips {
@@ -113,4 +116,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 
+    }
+  }
+
 }
--- a/backend/src/api/bitcoin/bitcoin-api.ts
+++ b/backend/src/api/bitcoin/bitcoin-api.ts
@@ -56,10 +56,18 @@ 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) {
@@ -147,6 +155,9 @@ class BitcoinApi implements AbstractBitcoinApi {
      esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction, addPrevout);
    } else {
      esploraTransaction = await this.$appendMempoolFeeData(esploraTransaction);
+      if (addPrevout) {
+        esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction, addPrevout);
+      }
    }

    return esploraTransaction;
@@ -226,10 +237,6 @@ class BitcoinApi implements AbstractBitcoinApi {
      });
  }

-  protected $validateAddress(address: string): Promise<IBitcoinApi.AddressInformation> {
-    return this.bitcoindClient.validateAddress(address);
-  }
-
  private $getMempoolEntry(txid: string): Promise<IBitcoinApi.MempoolEntry> {
    return this.bitcoindClient.getMempoolEntry(txid);
  }
--- a/backend/src/api/bitcoin/bitcoin-base.api.ts
+++ b/backend/src/api/bitcoin/bitcoin-base.api.ts
@@ -40,6 +40,14 @@ class BitcoinBaseApi {
    }
    return this.bitcoindClient.getMempoolInfo();
  }
+
+  $getBlockchainInfo(): Promise<IBitcoinApi.BlockchainInfo> {
+    return this.bitcoindClient.getBlockchainInfo();
+  }
+
+  $validateAddress(address: string): Promise<IBitcoinApi.AddressInformation> {
+    return this.bitcoindClient.validateAddress(address);
+  }
 }

 export default new BitcoinBaseApi();
--- a/backend/src/api/bitcoin/electrum-api.ts
+++ b/backend/src/api/bitcoin/electrum-api.ts
@@ -11,6 +11,7 @@ import * as sha256 from 'crypto-js/sha256';
 import * as hexEnc from 'crypto-js/enc-hex';
 import loadingIndicators from '../loading-indicators';
 import memoryCache from '../memory-cache';
+import bitcoinBaseApi from './bitcoin-base.api';

 class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
  private electrumClient: any;
@@ -44,7 +45,7 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
  }

  async $getAddress(address: string): Promise<IEsploraApi.Address> {
-    const addressInfo = await this.$validateAddress(address);
+    const addressInfo = await bitcoinBaseApi.$validateAddress(address);
    if (!addressInfo || !addressInfo.isvalid) {
      return ({
        'address': address,
@@ -93,12 +94,12 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
      if (e === 'failed to get confirmed status') {
        e = 'The number of transactions on this address exceeds the Electrum server limit';
      }
-      throw new Error(e);
+      throw new Error(typeof e === 'string' ? e : 'Error');
    }
  }

  async $getAddressTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]> {
-    const addressInfo = await this.$validateAddress(address);
+    const addressInfo = await bitcoinBaseApi.$validateAddress(address);
    if (!addressInfo || !addressInfo.isvalid) {
     return [];
    }
@@ -131,7 +132,7 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
      if (e === 'failed to get confirmed status') {
        e = 'The number of transactions on this address exceeds the Electrum server limit';
      }
-      throw new Error(e);
+      throw new Error(typeof e === 'string' ? e : 'Error');
    }
  }

--- a/backend/src/api/bitcoin/esplora-api.interface.ts
+++ b/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 {
--- a/backend/src/api/bitcoin/esplora-api.ts
+++ b/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);
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@@ -6,12 +6,14 @@ import { BlockExtended, TransactionExtended } from '../mempool.interfaces';
 import { Common } from './common';
 import diskCache from './disk-cache';
 import transactionUtils from './transaction-utils';
+import bitcoinBaseApi from './bitcoin/bitcoin-base.api';

 class Blocks {
-  private static INITIAL_BLOCK_AMOUNT = 8;
  private blocks: BlockExtended[] = [];
  private currentBlockHeight = 0;
+  private currentDifficulty = 0;
  private lastDifficultyAdjustmentTime = 0;
+  private previousDifficultyRetarget = 0;
  private newBlockCallbacks: ((block: BlockExtended, txIds: string[], transactions: TransactionExtended[]) => void)[] = [];

  constructor() { }
@@ -32,21 +34,32 @@ class Blocks {
    const blockHeightTip = await bitcoinApi.$getBlockHeightTip();

    if (this.blocks.length === 0) {
-      this.currentBlockHeight = blockHeightTip - Blocks.INITIAL_BLOCK_AMOUNT;
+      this.currentBlockHeight = blockHeightTip - config.MEMPOOL.INITIAL_BLOCKS_AMOUNT;
    } else {
      this.currentBlockHeight = this.blocks[this.blocks.length - 1].height;
    }

-    if (blockHeightTip - this.currentBlockHeight > Blocks.INITIAL_BLOCK_AMOUNT * 2) {
-      logger.info(`${blockHeightTip - this.currentBlockHeight} blocks since tip. Fast forwarding to the ${Blocks.INITIAL_BLOCK_AMOUNT} recent blocks`);
-      this.currentBlockHeight = blockHeightTip - Blocks.INITIAL_BLOCK_AMOUNT;
+    if (blockHeightTip - this.currentBlockHeight > config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 2) {
+      logger.info(`${blockHeightTip - this.currentBlockHeight} blocks since tip. Fast forwarding to the ${config.MEMPOOL.INITIAL_BLOCKS_AMOUNT} recent blocks`);
+      this.currentBlockHeight = blockHeightTip - config.MEMPOOL.INITIAL_BLOCKS_AMOUNT;
    }

    if (!this.lastDifficultyAdjustmentTime) {
-      const heightDiff = blockHeightTip % 2016;
-      const blockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff);
-      const block = await bitcoinApi.$getBlock(blockHash);
-      this.lastDifficultyAdjustmentTime = block.timestamp;
+      const blockchainInfo = await bitcoinBaseApi.$getBlockchainInfo();
+      if (blockchainInfo.blocks === blockchainInfo.headers) {
+        const heightDiff = blockHeightTip % 2016;
+        const blockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff);
+        const block = await bitcoinApi.$getBlock(blockHash);
+        this.lastDifficultyAdjustmentTime = block.timestamp;
+        this.currentDifficulty = block.difficulty;
+
+        const previousPeriodBlockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff - 2016);
+        const previousPeriodBlock = await bitcoinApi.$getBlock(previousPeriodBlockHash);
+        this.previousDifficultyRetarget = (block.difficulty - previousPeriodBlock.difficulty) / previousPeriodBlock.difficulty * 100;
+        logger.debug(`Initial difficulty adjustment data set.`);
+      } else {
+        logger.debug(`Blockchain headers (${blockchainInfo.headers}) and blocks (${blockchainInfo.blocks}) not in sync. Waiting...`);
+      }
    }

    while (this.currentBlockHeight < blockHeightTip) {
@@ -76,7 +89,7 @@ class Blocks {
            const tx = await transactionUtils.$getTransactionExtended(txIds[i]);
            transactions.push(tx);
          } catch (e) {
-            logger.debug('Error fetching block tx: ' + e.message || e);
+            logger.debug('Error fetching block tx: ' + (e instanceof Error ? e.message : e));
            if (i === 0) {
              throw new Error('Failed to fetch Coinbase transaction: ' + txIds[i]);
            }
@@ -97,16 +110,18 @@ class Blocks {
      blockExtended.coinbaseTx = transactionUtils.stripCoinbaseTransaction(transactions[0]);
      transactions.shift();
      transactions.sort((a, b) => b.effectiveFeePerVsize - a.effectiveFeePerVsize);
-      blockExtended.medianFee = transactions.length > 1 ? Common.median(transactions.map((tx) => tx.effectiveFeePerVsize)) : 0;
-      blockExtended.feeRange = transactions.length > 1 ? Common.getFeesInRange(transactions, 8) : [0, 0];
+      blockExtended.medianFee = transactions.length > 0 ? Common.median(transactions.map((tx) => tx.effectiveFeePerVsize)) : 0;
+      blockExtended.feeRange = transactions.length > 0 ? Common.getFeesInRange(transactions, 8) : [0, 0];

      if (block.height % 2016 === 0) {
+        this.previousDifficultyRetarget = (block.difficulty - this.currentDifficulty) / this.currentDifficulty * 100;
        this.lastDifficultyAdjustmentTime = block.timestamp;
+        this.currentDifficulty = block.difficulty;
      }

      this.blocks.push(blockExtended);
-      if (this.blocks.length > Blocks.INITIAL_BLOCK_AMOUNT * 4) {
-        this.blocks = this.blocks.slice(-Blocks.INITIAL_BLOCK_AMOUNT * 4);
+      if (this.blocks.length > config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 4) {
+        this.blocks = this.blocks.slice(-config.MEMPOOL.INITIAL_BLOCKS_AMOUNT * 4);
      }

      if (this.newBlockCallbacks.length) {
@@ -122,6 +137,10 @@ class Blocks {
    return this.lastDifficultyAdjustmentTime;
  }

+  public getPreviousDifficultyRetarget(): number {
+    return this.previousDifficultyRetarget;
+  }
+
  public getCurrentBlockHeight(): number {
    return this.currentBlockHeight;
  }
--- a/backend/src/api/common.ts
+++ b/backend/src/api/common.ts
@@ -1,5 +1,5 @@
 import { CpfpInfo, TransactionExtended, TransactionStripped } from '../mempool.interfaces';
-
+import config from '../config';
 export class Common {
  static median(numbers: number[]) {
    let medianNr = 0;
@@ -105,7 +105,7 @@ export class Common {
      totalFees += tx.bestDescendant.fee;
    }

-    tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+    tx.effectiveFeePerVsize = Math.max(config.MEMPOOL.NETWORK === 'liquid' ? 0.1 : 1, totalFees / (totalWeight / 4));
    tx.cpfpChecked = true;

    return {
--- a/backend/src/api/disk-cache.ts
+++ b/backend/src/api/disk-cache.ts
@@ -52,7 +52,7 @@ class DiskCache {
      logger.debug('Mempool and blocks data saved to disk cache');
      this.isWritingCache = false;
    } catch (e) {
-      logger.warn('Error writing to cache file: ' + e.message || e);
+      logger.warn('Error writing to cache file: ' + (e instanceof Error ? e.message : e));
      this.isWritingCache = false;
    }
  }
--- a/backend/src/api/fee-api.ts
+++ b/backend/src/api/fee-api.ts
@@ -43,7 +43,7 @@ class FeeApi {
      const multiplier = (pBlock.blockVSize - 500000) / 500000;
      return Math.max(Math.round(useFee * multiplier), this.defaultFee);
    }
-    return Math.round(useFee);
+    return Math.ceil(useFee);
  }
 }

--- a/backend/src/api/fiat-conversion.ts
+++ b/backend/src/api/fiat-conversion.ts
@@ -1,6 +1,7 @@
 import logger from '../logger';
 import axios from 'axios';
 import { IConversionRates } from '../mempool.interfaces';
+import config from '../config';

 class FiatConversion {
  private conversionRates: IConversionRates = {
@@ -16,7 +17,7 @@ class FiatConversion {

  public startService() {
    logger.info('Starting currency rates service');
-    setInterval(this.updateCurrency.bind(this), 1000 * 60 * 60);
+    setInterval(this.updateCurrency.bind(this), 1000 * config.MEMPOOL.PRICE_FEED_UPDATE_INTERVAL);
    this.updateCurrency();
  }

@@ -35,7 +36,7 @@ class FiatConversion {
        this.ratesChangedCallback(this.conversionRates);
      }
    } catch (e) {
-      logger.err('Error updating fiat conversion rates: ' + e);
+      logger.err('Error updating fiat conversion rates: ' + (e instanceof Error ? e.message : e));
    }
  }
 }
--- a/backend/src/api/mempool-blocks.ts
+++ b/backend/src/api/mempool-blocks.ts
@@ -4,7 +4,6 @@ import { Common } from './common';
 import config from '../config';

 class MempoolBlocks {
-  private static DEFAULT_PROJECTED_BLOCKS_AMOUNT = 8;
  private mempoolBlocks: MempoolBlockWithTransactions[] = [];

  constructor() {}
@@ -72,29 +71,29 @@ class MempoolBlocks {

  private calculateMempoolBlocks(transactionsSorted: TransactionExtended[]): MempoolBlockWithTransactions[] {
    const mempoolBlocks: MempoolBlockWithTransactions[] = [];
-    let blockVSize = 0;
+    let blockWeight = 0;
    let blockSize = 0;
    let transactions: TransactionExtended[] = [];
    transactionsSorted.forEach((tx) => {
-      if (blockVSize + tx.vsize <= 1000000 || mempoolBlocks.length === MempoolBlocks.DEFAULT_PROJECTED_BLOCKS_AMOUNT - 1) {
-        blockVSize += tx.vsize;
+      if (blockWeight + tx.weight <= config.MEMPOOL.BLOCK_WEIGHT_UNITS || mempoolBlocks.length === config.MEMPOOL.MEMPOOL_BLOCKS_AMOUNT) {
+        blockWeight += tx.weight;
        blockSize += tx.size;
        transactions.push(tx);
      } else {
-        mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockVSize, mempoolBlocks.length));
-        blockVSize = tx.vsize;
+        mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockWeight, mempoolBlocks.length));
+        blockWeight = tx.weight;
        blockSize = tx.size;
        transactions = [tx];
      }
    });
    if (transactions.length) {
-      mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockVSize, mempoolBlocks.length));
+      mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockWeight, mempoolBlocks.length));
    }
    return mempoolBlocks;
  }

  private dataToMempoolBlocks(transactions: TransactionExtended[],
-    blockSize: number, blockVSize: number, blocksIndex: number): MempoolBlockWithTransactions {
+    blockSize: number, blockWeight: number, blocksIndex: number): MempoolBlockWithTransactions {
    let rangeLength = 4;
    if (blocksIndex === 0) {
      rangeLength = 8;
@@ -106,7 +105,7 @@ class MempoolBlocks {
    }
    return {
      blockSize: blockSize,
-      blockVSize: blockVSize,
+      blockVSize: blockWeight / 4,
      nTx: transactions.length,
      totalFees: transactions.reduce((acc, cur) => acc + cur.fee, 0),
      medianFee: Common.percentile(transactions.map((tx) => tx.effectiveFeePerVsize), config.MEMPOOL.RECOMMENDED_FEE_PERCENTILE),
--- a/backend/src/api/mempool.ts
+++ b/backend/src/api/mempool.ts
@@ -124,7 +124,7 @@ class Mempool {
          }
          newTransactions.push(transaction);
        } catch (e) {
-          logger.debug('Error finding transaction in mempool: ' + e.message || e);
+          logger.debug('Error finding transaction in mempool: ' + (e instanceof Error ? e.message : e));
        }
      }

--- a/backend/src/api/statistics.ts
+++ b/backend/src/api/statistics.ts
@@ -255,7 +255,7 @@ class Statistics {
      connection.release();
      return result.insertId;
    } catch (e) {
-      logger.err('$create() error' + e.message || e);
+      logger.err('$create() error' + (e instanceof Error ? e.message : e));
    }
  }

@@ -313,7 +313,7 @@ class Statistics {
        return this.mapStatisticToOptimizedStatistic([rows[0]])[0];
      }
    } catch (e) {
-      logger.err('$list2H() error' + e.message || e);
+      logger.err('$list2H() error' + (e instanceof Error ? e.message : e));
    }
  }

@@ -325,7 +325,7 @@ class Statistics {
      connection.release();
      return this.mapStatisticToOptimizedStatistic(rows);
    } catch (e) {
-      logger.err('$list2H() error' + e.message || e);
+      logger.err('$list2H() error' + (e instanceof Error ? e.message : e));
      return [];
    }
  }
@@ -338,7 +338,7 @@ class Statistics {
      connection.release();
      return this.mapStatisticToOptimizedStatistic(rows);
    } catch (e) {
-      logger.err('$list24h() error' + e.message || e);
+      logger.err('$list24h() error' + (e instanceof Error ? e.message : e));
      return [];
    }
  }
@@ -351,7 +351,7 @@ class Statistics {
      connection.release();
      return this.mapStatisticToOptimizedStatistic(rows);
    } catch (e) {
-      logger.err('$list1W() error' + e);
+      logger.err('$list1W() error' + (e instanceof Error ? e.message : e));
      return [];
    }
  }
@@ -364,7 +364,7 @@ class Statistics {
      connection.release();
      return this.mapStatisticToOptimizedStatistic(rows);
    } catch (e) {
-      logger.err('$list1M() error' + e);
+      logger.err('$list1M() error' + (e instanceof Error ? e.message : e));
      return [];
    }
  }
@@ -377,7 +377,7 @@ class Statistics {
      connection.release();
      return this.mapStatisticToOptimizedStatistic(rows);
    } catch (e) {
-      logger.err('$list3M() error' + e);
+      logger.err('$list3M() error' + (e instanceof Error ? e.message : e));
      return [];
    }
  }
@@ -390,7 +390,7 @@ class Statistics {
      connection.release();
      return this.mapStatisticToOptimizedStatistic(rows);
    } catch (e) {
-      logger.err('$list6M() error' + e);
+      logger.err('$list6M() error' + (e instanceof Error ? e.message : e));
      return [];
    }
  }
@@ -403,7 +403,7 @@ class Statistics {
      connection.release();
      return this.mapStatisticToOptimizedStatistic(rows);
    } catch (e) {
-      logger.err('$list6M() error' + e);
+      logger.err('$list6M() error' + (e instanceof Error ? e.message : e));
      return [];
    }
  }
--- a/backend/src/api/transaction-utils.ts
+++ b/backend/src/api/transaction-utils.ts
@@ -1,7 +1,7 @@
 import bitcoinApi from './bitcoin/bitcoin-api-factory';
-import logger from '../logger';
 import { TransactionExtended, TransactionMinerInfo } from '../mempool.interfaces';
 import { IEsploraApi } from './bitcoin/esplora-api.interface';
+import config from '../config';

 class TransactionUtils {
  constructor() { }
@@ -31,7 +31,7 @@ class TransactionUtils {
      // @ts-ignore
      return transaction;
    }
-    const feePerVbytes = Math.max(1, (transaction.fee || 0) / (transaction.weight / 4));
+    const feePerVbytes = Math.max(config.MEMPOOL.NETWORK === 'liquid' ? 0.1 : 1, (transaction.fee || 0) / (transaction.weight / 4));
    const transactionExtended: TransactionExtended = Object.assign({
      vsize: Math.round(transaction.weight / 4),
      feePerVsize: feePerVbytes,
--- a/backend/src/api/websocket-handler.ts
+++ b/backend/src/api/websocket-handler.ts
@@ -34,7 +34,7 @@ class WebsocketHandler {

    this.wss.on('connection', (client: WebSocket) => {
      client.on('error', logger.info);
-      client.on('message', (message: string) => {
+      client.on('message', async (message: string) => {
        try {
          const parsedMessage: WebsocketResponse = JSON.parse(message);
          const response = {};
@@ -53,9 +53,25 @@ class WebsocketHandler {
              if (parsedMessage['watch-mempool']) {
                const tx = memPool.getMempool()[client['track-tx']];
                if (tx) {
-                  response['tx'] = tx;
+                  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: ' + (e instanceof Error ? e.message : e));
+                    }
+                  }
                } 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 instanceof Error ? e.message : e));
+                    client['track-mempool-tx'] = parsedMessage['track-tx'];
+                  }
                }
              }
            } else {
@@ -64,9 +80,13 @@ class WebsocketHandler {
          }

          if (parsedMessage && parsedMessage['track-address']) {
-            if (/^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,87})$/
+            if (/^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100})$/
              .test(parsedMessage['track-address'])) {
-              client['track-address'] = parsedMessage['track-address'];
+              let matchedAddress = parsedMessage['track-address'];
+              if (/^[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100}$/.test(parsedMessage['track-address'])) {
+                matchedAddress = matchedAddress.toLowerCase();
+              }
+              client['track-address'] = matchedAddress;
            } else {
              client['track-address'] = null;
            }
@@ -81,7 +101,7 @@ class WebsocketHandler {
          }

          if (parsedMessage.action === 'init') {
-            const _blocks = blocks.getBlocks().slice(-8);
+            const _blocks = blocks.getBlocks().slice(-config.MEMPOOL.INITIAL_BLOCKS_AMOUNT);
            if (!_blocks) {
              return;
            }
@@ -96,11 +116,19 @@ class WebsocketHandler {
            client['track-donation'] = parsedMessage['track-donation'];
          }

+          if (parsedMessage['track-bisq-market']) {
+            if (/^[a-z]{3}_[a-z]{3}$/.test(parsedMessage['track-bisq-market'])) {
+              client['track-bisq-market'] = parsedMessage['track-bisq-market'];
+            } else {
+              client['track-bisq-market'] = null;
+            }
+          }
+
          if (Object.keys(response).length) {
            client.send(JSON.stringify(response));
          }
        } catch (e) {
-          logger.debug('Error parsing websocket message: ' + e.message || e);
+          logger.debug('Error parsing websocket message: ' + (e instanceof Error ? e.message : e));
        }
      });
    });
@@ -149,12 +177,13 @@ class WebsocketHandler {

  getInitData(_blocks?: BlockExtended[]) {
    if (!_blocks) {
-      _blocks = blocks.getBlocks().slice(-8);
+      _blocks = blocks.getBlocks().slice(-config.MEMPOOL.INITIAL_BLOCKS_AMOUNT);
    }
    return {
      'mempoolInfo': memPool.getMempoolInfo(),
      'vBytesPerSecond': memPool.getVBytesPerSecond(),
      'lastDifficultyAdjustment': blocks.getLastDifficultyAdjustmentTime(),
+      'previousRetarget': blocks.getPreviousDifficultyRetarget(),
      'blocks': _blocks,
      'conversions': fiatConversion.getConversionRates(),
      'mempool-blocks': mempoolBlocks.getMempoolBlocks(),
@@ -227,7 +256,7 @@ class WebsocketHandler {
              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 in mempool: ' + (e instanceof Error ? e.message : e));
            }
          } else {
            response['tx'] = tx;
@@ -247,7 +276,7 @@ class WebsocketHandler {
                const fullTx = await transactionUtils.$getTransactionExtended(tx.txid, true);
                foundTransactions.push(fullTx);
              } catch (e) {
-                logger.debug('Error finding transaction in mempool: ' + e.message || e);
+                logger.debug('Error finding transaction in mempool: ' + (e instanceof Error ? e.message : e));
              }
            } else {
              foundTransactions.push(tx);
@@ -261,7 +290,7 @@ class WebsocketHandler {
                const fullTx = await transactionUtils.$getTransactionExtended(tx.txid, true);
                foundTransactions.push(fullTx);
              } catch (e) {
-                logger.debug('Error finding transaction in mempool: ' + e.message || e);
+                logger.debug('Error finding transaction in mempool: ' + (e instanceof Error ? e.message : e));
              }
            } else {
              foundTransactions.push(tx);
@@ -312,7 +341,7 @@ class WebsocketHandler {
                const fullTx = await transactionUtils.$getTransactionExtended(rbfTransaction, true);
                response['rbfTransaction'] = fullTx;
              } catch (e) {
-                logger.debug('Error finding transaction in mempool: ' + e.message || e);
+                logger.debug('Error finding transaction in mempool: ' + (e instanceof Error ? e.message : e));
              }
            } else {
              response['rbfTransaction'] = rbfTx;
@@ -367,6 +396,7 @@ class WebsocketHandler {
        'block': block,
        'mempoolInfo': memPool.getMempoolInfo(),
        'lastDifficultyAdjustment': blocks.getLastDifficultyAdjustmentTime(),
+        'previousRetarget': blocks.getPreviousDifficultyRetarget(),
      };

      if (mBlocks && client['want-mempool-blocks']) {
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -11,6 +11,10 @@ interface IConfig {
    CACHE_DIR: string;
    CLEAR_PROTECTION_MINUTES: number;
    RECOMMENDED_FEE_PERCENTILE: number;
+    BLOCK_WEIGHT_UNITS: number;
+    INITIAL_BLOCKS_AMOUNT: number;
+    MEMPOOL_BLOCKS_AMOUNT: number;
+    PRICE_FEED_UPDATE_INTERVAL: number;
  };
  ESPLORA: {
    REST_API_URL: string;
@@ -52,11 +56,7 @@ interface IConfig {
    ENABLED: boolean;
    TX_PER_SECOND_SAMPLE_PERIOD: number;
  };
-  BISQ_BLOCKS: {
-    ENABLED: boolean;
-    DATA_PATH: string;
-  };
-  BISQ_MARKETS: {
+  BISQ: {
    ENABLED: boolean;
    DATA_PATH: string;
  };
@@ -73,6 +73,10 @@ const defaults: IConfig = {
    'CACHE_DIR': './cache',
    'CLEAR_PROTECTION_MINUTES': 20,
    'RECOMMENDED_FEE_PERCENTILE': 50,
+    'BLOCK_WEIGHT_UNITS': 4000000,
+    'INITIAL_BLOCKS_AMOUNT': 8,
+    'MEMPOOL_BLOCKS_AMOUNT': 8,
+    'PRICE_FEED_UPDATE_INTERVAL': 3600,
  },
  'ESPLORA': {
    'REST_API_URL': 'http://127.0.0.1:3000',
@@ -114,11 +118,7 @@ const defaults: IConfig = {
    'ENABLED': true,
    'TX_PER_SECOND_SAMPLE_PERIOD': 150
  },
-  'BISQ_BLOCKS': {
-    'ENABLED': false,
-    'DATA_PATH': '/bisq/statsnode-data/btc_mainnet/db/json'
-  },
-  'BISQ_MARKETS': {
+  'BISQ': {
    'ENABLED': false,
    'DATA_PATH': '/bisq/statsnode-data/btc_mainnet/db'
  },
@@ -133,8 +133,7 @@ class Config implements IConfig {
  DATABASE: IConfig['DATABASE'];
  SYSLOG: IConfig['SYSLOG'];
  STATISTICS: IConfig['STATISTICS'];
-  BISQ_BLOCKS: IConfig['BISQ_BLOCKS'];
-  BISQ_MARKETS: IConfig['BISQ_MARKETS'];
+  BISQ: IConfig['BISQ'];

  constructor() {
    const configs = this.merge(configFile, defaults);
@@ -146,8 +145,7 @@ class Config implements IConfig {
    this.DATABASE = configs.DATABASE;
    this.SYSLOG = configs.SYSLOG;
    this.STATISTICS = configs.STATISTICS;
-    this.BISQ_BLOCKS = configs.BISQ_BLOCKS;
-    this.BISQ_MARKETS = configs.BISQ_MARKETS;
+    this.BISQ = configs.BISQ;
  }

  merge = (...objects: object[]): IConfig => {
--- a/backend/src/database.ts
+++ b/backend/src/database.ts
@@ -20,7 +20,7 @@ export async function checkDbConnection() {
    logger.info('Database connection established.');
    connection.release();
  } catch (e) {
-    logger.err('Could not connect to database: ' + e.message || e);
+    logger.err('Could not connect to database: ' + (e instanceof Error ? e.message : e));
    process.exit(1);
  }
 }
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -81,7 +81,7 @@ class Server {
      await checkDbConnection();
    }

-    if (config.STATISTICS.ENABLED && config.DATABASE.ENABLED) {
+    if (config.STATISTICS.ENABLED && config.DATABASE.ENABLED && cluster.isMaster) {
      statistics.startStatistics();
    }

@@ -90,13 +90,10 @@ class Server {
    this.setUpHttpApiRoutes();
    this.runMainUpdateLoop();

-    if (config.BISQ_BLOCKS.ENABLED) {
+    if (config.BISQ.ENABLED) {
      bisq.startBisqService();
      bisq.setPriceCallbackFunction((price) => websocketHandler.setExtraInitProperties('bsq-price', price));
      blocks.setNewBlockCallback(bisq.handleNewBitcoinBlock.bind(bisq));
-    }
-
-    if (config.BISQ_MARKETS.ENABLED) {
      bisqMarkets.startBisqService();
    }

@@ -114,7 +111,7 @@ class Server {
      try {
        await memPool.$updateMemPoolInfo();
      } catch (e) {
-        const msg = `updateMempoolInfo: ${(e.message || e)}`;
+        const msg = `updateMempoolInfo: ${(e instanceof Error ? e.message : e)}`;
        if (config.CORE_RPC_MINFEE.ENABLED) {
          logger.warn(msg);
        } else {
@@ -126,7 +123,7 @@ class Server {
      setTimeout(this.runMainUpdateLoop.bind(this), config.MEMPOOL.POLL_RATE_MS);
      this.currentBackendRetryInterval = 5;
    } catch (e) {
-      const loggerMsg = `runMainLoop error: ${(e.message || e)}. Retrying in ${this.currentBackendRetryInterval} sec.`;
+      const loggerMsg = `runMainLoop error: ${(e instanceof Error ? e.message : e)}. Retrying in ${this.currentBackendRetryInterval} sec.`;
      if (this.currentBackendRetryInterval > 5) {
        logger.warn(loggerMsg);
        mempool.setOutOfSync();
@@ -156,10 +153,12 @@ 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)
      .get(config.MEMPOOL.API_URL_PREFIX + 'init-data', routes.getInitData)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'validate-address/:address', routes.validateAddress)
      .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
        try {
          const response = await axios.get('https://mempool.space/api/v1/donations', { responseType: 'stream', timeout: 10000 });
@@ -210,7 +209,7 @@ class Server {
        ;
    }

-    if (config.BISQ_BLOCKS.ENABLED) {
+    if (config.BISQ.ENABLED) {
      this.app
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/stats', routes.getBisqStats)
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/tx/:txId', routes.getBisqTransaction)
@@ -219,11 +218,6 @@ class Server {
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/blocks/:index/:length', routes.getBisqBlocks)
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/address/:address', routes.getBisqAddress)
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/txs/:index/:length', routes.getBisqTransactions)
-      ;
-    }
-
-    if (config.BISQ_MARKETS.ENABLED) {
-      this.app
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/currencies', routes.getBisqMarketCurrencies.bind(routes))
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/depth', routes.getBisqMarketDepth.bind(routes))
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/hloc', routes.getBisqMarketHloc.bind(routes))
@@ -232,6 +226,7 @@ class Server {
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/ticker', routes.getBisqMarketTicker.bind(routes))
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/trades', routes.getBisqMarketTrades.bind(routes))
        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/volumes', routes.getBisqMarketVolumes.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/volumes/7d', routes.getBisqMarketVolumes7d.bind(routes))
        ;
    }

@@ -241,9 +236,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)
--- a/backend/src/logger.ts
+++ b/backend/src/logger.ts
@@ -73,7 +73,7 @@ class Logger {
  }

  private getNetwork(): string {
-    if (config.BISQ_BLOCKS.ENABLED) {
+    if (config.BISQ.ENABLED) {
      return 'bisq';
    }
    if (config.MEMPOOL.NETWORK && config.MEMPOOL.NETWORK !== 'mainnet') {
--- a/backend/src/mempool.interfaces.ts
+++ b/backend/src/mempool.interfaces.ts
@@ -144,6 +144,7 @@ export interface WebsocketResponse {
  'track-tx': string;
  'track-address': string;
  'watch-mempool': boolean;
+  'track-bisq-market': string;
 }

 export interface VbytesPerSecond {
--- a/backend/src/routes.ts
+++ b/backend/src/routes.ts
@@ -17,6 +17,7 @@ import transactionUtils from './api/transaction-utils';
 import blocks from './api/blocks';
 import loadingIndicators from './api/loading-indicators';
 import { Common } from './api/common';
+import bitcoinBaseApi from './api/bitcoin/bitcoin-base.api';

 class Routes {
  constructor() {}
@@ -55,7 +56,7 @@ class Routes {
      const result = websocketHandler.getInitData();
      res.json(result);
    } catch (e) {
-      res.status(500).send(e.message);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -74,7 +75,7 @@ class Routes {
      const result = mempoolBlocks.getMempoolBlocks();
      res.json(result);
    } catch (e) {
-      res.status(500).send(e.message);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -426,6 +427,15 @@ class Routes {
    }
  }

+  public getBisqMarketVolumes7d(req: Request, res: Response) {
+    const result = bisqMarket.getVolumesByTime(604800);
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketVolumes7d error'));
+    }
+  }
+
  private parseRequestParameters(requestParams: object, params: RequiredSpec): { [name: string]: any; } {
    const final = {};
    for (const i in params) {
@@ -468,10 +478,24 @@ class Routes {
      res.json(transaction);
    } catch (e) {
      let statusCode = 500;
-      if (e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
+      if (e instanceof Error && e instanceof Error && e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
        statusCode = 404;
      }
-      res.status(statusCode).send(e.message || e);
+      res.status(statusCode).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  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 instanceof Error && e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
+        statusCode = 404;
+      }
+      res.status(statusCode).send(e instanceof Error ? e.message : e);
    }
  }

@@ -481,10 +505,10 @@ class Routes {
      res.json(transaction.status);
    } catch (e) {
      let statusCode = 500;
-      if (e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
+      if (e instanceof Error && e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
        statusCode = 404;
      }
-      res.status(statusCode).send(e.message || e);
+      res.status(statusCode).send(e instanceof Error ? e.message : e);
    }
  }

@@ -493,7 +517,17 @@ class Routes {
      const result = await bitcoinApi.$getBlock(req.params.hash);
      res.json(result);
    } catch (e) {
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  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 instanceof Error ? e.message : e);
    }
  }

@@ -530,7 +564,7 @@ class Routes {
      res.json(returnBlocks);
    } catch (e) {
      loadingIndicators.setProgress('blocks', 100);
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -549,13 +583,13 @@ class Routes {
          transactions.push(transaction);
          loadingIndicators.setProgress('blocktxs-' + req.params.hash, (i + 1) / endIndex * 100);
        } catch (e) {
-          logger.debug('getBlockTransactions error: ' + e.message || e);
+          logger.debug('getBlockTransactions error: ' + (e instanceof Error ? e.message : e));
        }
      }
      res.json(transactions);
    } catch (e) {
      loadingIndicators.setProgress('blocktxs-' + req.params.hash, 100);
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -564,7 +598,7 @@ class Routes {
      const blockHash = await bitcoinApi.$getBlockHash(parseInt(req.params.height, 10));
      res.send(blockHash);
    } catch (e) {
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -578,10 +612,10 @@ class Routes {
      const addressData = await bitcoinApi.$getAddress(req.params.address);
      res.json(addressData);
    } catch (e) {
-      if (e.message && e.message.indexOf('exceeds') > 0) {
-        return res.status(413).send(e.message);
+      if (e instanceof Error && e.message && e.message.indexOf('exceeds') > 0) {
+        return res.status(413).send(e instanceof Error ? e.message : e);
      }
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -595,10 +629,10 @@ class Routes {
      const transactions = await bitcoinApi.$getAddressTransactions(req.params.address, req.params.txId);
      res.json(transactions);
    } catch (e) {
-      if (e.message && e.message.indexOf('exceeds') > 0) {
-        return res.status(413).send(e.message);
+      if (e instanceof Error && e.message && e.message.indexOf('exceeds') > 0) {
+        return res.status(413).send(e instanceof Error ? e.message : e);
      }
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -611,7 +645,7 @@ class Routes {
      const blockHash = await bitcoinApi.$getAddressPrefix(req.params.prefix);
      res.send(blockHash);
    } catch (e) {
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -632,7 +666,7 @@ class Routes {
      const rawMempool = await bitcoinApi.$getRawMempool();
      res.send(rawMempool);
    } catch (e) {
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -641,7 +675,7 @@ class Routes {
      const result = await bitcoinApi.$getBlockHeightTip();
      res.json(result);
    } catch (e) {
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

@@ -650,13 +684,76 @@ class Routes {
      const result = await bitcoinApi.$getTxIdsForBlock(req.params.hash);
      res.json(result);
    } catch (e) {
-      res.status(500).send(e.message || e);
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  public async validateAddress(req: Request, res: Response) {
+    try {
+      const result = await bitcoinBaseApi.$validateAddress(req.params.address);
+      res.json(result);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
    }
  }

  public getTransactionOutspends(req: Request, res: Response) {
    res.status(501).send('Not implemented');
  }
+
+  public getDifficultyChange(req: Request, res: Response) {
+    try {
+      const DATime = blocks.getLastDifficultyAdjustmentTime();
+      const previousRetarget = blocks.getPreviousDifficultyRetarget();
+      const blockHeight = blocks.getCurrentBlockHeight();
+
+      const now = new Date().getTime() / 1000;
+      const diff = now - DATime;
+      const blocksInEpoch = blockHeight % 2016;
+      const progressPercent = (blocksInEpoch >= 0) ? blocksInEpoch / 2016 * 100 : 100;
+      const remainingBlocks = 2016 - blocksInEpoch;
+      const nextRetargetHeight = blockHeight + remainingBlocks;
+
+      let difficultyChange = 0;
+      if (blocksInEpoch > 0) {
+        difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
+      }
+      if (difficultyChange > 300) {
+        difficultyChange = 300;
+      }
+      if (difficultyChange < -75) {
+        difficultyChange = -75;
+      }
+
+      const timeAvgDiff = difficultyChange * 0.1;
+
+      let timeAvgMins = 10;
+      if (timeAvgDiff > 0) {
+        timeAvgMins -= Math.abs(timeAvgDiff);
+      } else {
+        timeAvgMins += Math.abs(timeAvgDiff);
+      }
+
+      const timeAvg = timeAvgMins * 60;
+      const remainingTime =  remainingBlocks * timeAvg;
+      const estimatedRetargetDate = remainingTime + now;
+
+      const result = {
+        progressPercent,
+        difficultyChange,
+        estimatedRetargetDate,
+        remainingBlocks,
+        remainingTime,
+        previousRetarget,
+        nextRetargetHeight,
+        timeAvg,
+      };
+      res.json(result);
+
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
 }

 export default new Routes();
--- a/docker/backend/Dockerfile
+++ b/docker/backend/Dockerfile
@@ -5,8 +5,7 @@ COPY . .

 RUN apt-get update
 RUN apt-get install -y build-essential python3 pkg-config
-RUN npm ci --production
-RUN npm i typescript
+RUN npm install
 RUN npm run build

 FROM node:12-buster-slim
--- a/docker/frontend/Dockerfile
+++ b/docker/frontend/Dockerfile
@@ -1,5 +1,9 @@
 FROM node:12-buster-slim AS builder

+ARG commitHash
+ENV DOCKER_COMMIT_HASH=${commitHash}
+ENV CYPRESS_INSTALL_BINARY=0
+
 WORKDIR /build
 COPY . .
 RUN apt-get update
--- a/docker/scripts/get_image_digest.sh
+++ b/docker/scripts/get_image_digest.sh
@@ -0,0 +1,18 @@
+#!/bin/sh
+
+VERSION=$1
+IMAGE=""
+
+if [ -z "${VERSION}" ]; then
+    echo "no version provided (i.e, v2.2.0), using latest tag"
+    VERSION="latest"
+fi
+
+for package in frontend backend; do
+  PACKAGE=mempool/"$package"
+  IMAGE="$PACKAGE":"$VERSION"
+  HASH=`docker pull $IMAGE > /dev/null && docker inspect $IMAGE | sed -n '/RepoDigests/{n;p;}' | grep -o '[0-9a-f]\{64\}'`
+  if [ -n "${HASH}" ]; then
+    echo "$IMAGE"@sha256:"$HASH"
+  fi
+done 
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -54,3 +54,11 @@ src/resources/pools.json
 # environment config
 mempool-frontend-config.json
 generated-config.js
+
+# e2e results
+cypress/videos
+cypress/screenshots
+
+# Base index
+src/index.html
+
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -22,6 +22,7 @@ https://www.transifex.com/mempool/mempool/dashboard/
 * Dutch @m__btc
 * Japanese @wiz @japananon
 * Norwegian @T82771355
+* Polish @maciejsoltysiak
 * Portugese @jgcastro1985
 * Slovenian @thepkbadger
 * Finnish @bio_bitcoin
@@ -30,3 +31,4 @@ https://www.transifex.com/mempool/mempool/dashboard/
 * Ukrainian @volbil
 * Vietnamese @bitcoin_vietnam
 * Chinese @wdljt
+* Russian @TonyCrusoe @Bitconan
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -1,5 +1,8 @@
 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
@@ -15,14 +18,18 @@
      "prefix": "app",
      "i18n": {
        "sourceLocale": {
-          "code":"en-US",
-          "baseHref":"/"
+          "code": "en-US",
+          "baseHref": "/"
        },
        "locales": {
          "ar": {
            "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/"
@@ -71,6 +78,10 @@
            "translation": "src/locale/messages.nb.xlf",
            "baseHref": "/nb/"
          },
+          "pl": {
+            "translation": "src/locale/messages.pl.xlf",
+            "baseHref": "/pl/"
+          },
          "pt": {
            "translation": "src/locale/messages.pt.xlf",
            "baseHref": "/pt/"
@@ -106,6 +117,14 @@
          "zh": {
            "translation": "src/locale/messages.zh.xlf",
            "baseHref": "/zh/"
+          },
+          "ru": {
+            "translation": "src/locale/messages.ru.xlf",
+            "baseHref": "/ru/"
+          },
+          "hi": {
+            "translation": "src/locale/messages.hi.xlf",
+            "baseHref": "/hi/"
          }
        }
      },
@@ -169,6 +188,22 @@
          "configurations": {
            "production": {
              "browserTarget": "mempool:build:production"
+            },
+            "local": {
+              "proxyConfig": "proxy.conf.json",
+              "verbose": true
+            },
+            "staging": {
+              "proxyConfig": "proxy.stg.conf.json",
+              "disableHostCheck": true,
+              "host": "0.0.0.0",
+              "verbose": true
+            },
+            "local-prod": {
+              "proxyConfig": "proxy.conf.js",
+              "disableHostCheck": true,
+              "host": "0.0.0.0",
+              "verbose": false
            }
          }
        },
@@ -201,8 +236,8 @@
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
-              "e2e/tsconfig.json",
-              "tsconfig.server.json"
+              "tsconfig.server.json",
+              "cypress/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
@@ -210,10 +245,11 @@
          }
        },
        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
+          "builder": "@cypress/schematic:cypress",
          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "mempool:serve"
+            "devServerTarget": "mempool:serve:local-prod",
+            "watch": true,
+            "headless": false
          },
          "configurations": {
            "production": {
@@ -268,8 +304,27 @@
          "configurations": {
            "production": {}
          }
+        },
+        "cypress-run": {
+          "builder": "@cypress/schematic:cypress",
+          "options": {
+            "devServerTarget": "mempool:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "mempool:serve:production"
+            }
+          }
+        },
+        "cypress-open": {
+          "builder": "@cypress/schematic:cypress",
+          "options": {
+            "watch": true,
+            "headless": false
+          }
        }
      }
-    }},
+    }
+  },
  "defaultProject": "mempool"
 }
--- a/frontend/cypress.json
+++ b/frontend/cypress.json
@@ -0,0 +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",
+  "video": false,
+  "retries": {
+    "runMode": 3,
+    "openMode": 0
+  }
+}
--- a/frontend/cypress/fixtures/assets.json
+++ b/frontend/cypress/fixtures/assets.json
@@ -0,0 +1,119 @@
+{
+    "f59c5f3e8141f322276daa63ed5f307085808aea6d4ef9ba61e28154533fdec7": {
+      "asset_id": "f59c5f3e8141f322276daa63ed5f307085808aea6d4ef9ba61e28154533fdec7",
+      "contract": {
+        "entity": {
+          "domain": "listedreserve.com"
+        },
+        "issuer_pubkey": "031cc579d142a03b33cdd745922112821c16e5e8b74e3bd57f16f7fda872b6f1d0",
+        "name": "Liquid AUD",
+        "precision": 2,
+        "ticker": "AUDL",
+        "version": 0
+      },
+      "issuance_txin": {
+        "txid": "e5c5144ba3dc48259ae29023fe9f7775dec1fc049f456dd3d1f7178e31901fb5",
+        "vin": 0
+      },
+      "issuance_prevout": {
+        "txid": "ed48be2e035ffa425d2c6faaa82b6a7b648aed1246b6ac76c72e0408db8cf057",
+        "vout": 1
+      },
+      "name": "Liquid AUD",
+      "ticker": "AUDL",
+      "precision": 2,
+      "entity": {
+        "domain": "listedreserve.com"
+      },
+      "version": 0,
+      "issuer_pubkey": "031cc579d142a03b33cdd745922112821c16e5e8b74e3bd57f16f7fda872b6f1d0"
+    },
+    "0e99c1a6da379d1f4151fb9df90449d40d0608f6cb33a5bcbfc8c265f42bab0a": {
+      "asset_id": "0e99c1a6da379d1f4151fb9df90449d40d0608f6cb33a5bcbfc8c265f42bab0a",
+      "contract": {
+        "entity": {
+          "domain": "lcad.bullbitcoin.com"
+        },
+        "issuer_pubkey": "027fa34026195b05f3aa217335416811dca4f5b579d00271a1bb6304c0152458a8",
+        "name": "Liquid CAD",
+        "precision": 8,
+        "ticker": "LCAD",
+        "version": 0
+      },
+      "issuance_txin": {
+        "txid": "238badf029cadcf546d90ce23c7eafc2fa2082585c9bd62dc26f1aa11c7bd850",
+        "vin": 0
+      },
+      "issuance_prevout": {
+        "txid": "a87f13917c08c7ccd8eddb1830c5c9a2bcd59c7d167e9d528659ba40808a6b76",
+        "vout": 0
+      },
+      "name": "Liquid CAD",
+      "ticker": "LCAD",
+      "precision": 8,
+      "entity": {
+        "domain": "lcad.bullbitcoin.com"
+      },
+      "version": 0,
+      "issuer_pubkey": "027fa34026195b05f3aa217335416811dca4f5b579d00271a1bb6304c0152458a8"
+    },
+    "3438ecb49fc45c08e687de4749ed628c511e326460ea4336794e1cf02741329e": {
+      "asset_id": "3438ecb49fc45c08e687de4749ed628c511e326460ea4336794e1cf02741329e",
+      "contract": {
+        "entity": {
+          "domain": "settlenet.io"
+        },
+        "issuer_pubkey": "037b09d542bf7cea6a19fa624b4441790c1a6e44823597bf190e981a846a196541",
+        "name": "SETTLENET JPY Stablecoin by Crypto Garage",
+        "precision": 0,
+        "ticker": "JPYS",
+        "version": 0
+      },
+      "issuance_txin": {
+        "txid": "e33ad5ce8879297d8bfa7daa193920b94abd3fb12f4e8dade9543dbb292387cb",
+        "vin": 0
+      },
+      "issuance_prevout": {
+        "txid": "328c4fadd817ea75e634e3648eb4be0bf7e669539b8da921c0f77af3bc148894",
+        "vout": 1
+      },
+      "name": "SETTLENET JPY Stablecoin by Crypto Garage",
+      "ticker": "JPYS",
+      "precision": 0,
+      "entity": {
+        "domain": "settlenet.io"
+      },
+      "version": 0,
+      "issuer_pubkey": "037b09d542bf7cea6a19fa624b4441790c1a6e44823597bf190e981a846a196541"
+    },
+    "ce091c998b83c78bb71a632313ba3760f1763d9cfcffae02258ffa9865a37bd2": {
+      "asset_id": "ce091c998b83c78bb71a632313ba3760f1763d9cfcffae02258ffa9865a37bd2",
+      "contract": {
+        "entity": {
+          "domain": "tether.to"
+        },
+        "issuer_pubkey": "0337cceec0beea0232ebe14cba0197a9fbd45fcf2ec946749de920e71434c2b904",
+        "name": "Tether USD",
+        "precision": 8,
+        "ticker": "USDt",
+        "version": 0
+      },
+      "issuance_txin": {
+        "txid": "abb4080d91849e933ee2ed65da6b436f7c385cf363fb4aa08399f1e27c58ff3d",
+        "vin": 0
+      },
+      "issuance_prevout": {
+        "txid": "9596d259270ef5bac0020435e6d859aea633409483ba64e232b8ba04ce288668",
+        "vout": 0
+      },
+      "name": "Tether USD",
+      "ticker": "USDt",
+      "precision": 8,
+      "entity": {
+        "domain": "tether.to"
+      },
+      "version": 0,
+      "issuer_pubkey": "0337cceec0beea0232ebe14cba0197a9fbd45fcf2ec946749de920e71434c2b904"
+    }
+  }
+  
--- a/frontend/cypress/fixtures/assets.minimal.json
+++ b/frontend/cypress/fixtures/assets.minimal.json
@@ -0,0 +1,33 @@
+{
+    "f59c5f3e8141f322276daa63ed5f307085808aea6d4ef9ba61e28154533fdec7": [
+      "listedreserve.com",
+      "AUDL",
+      "Liquid AUD",
+      2
+    ],
+    "0e99c1a6da379d1f4151fb9df90449d40d0608f6cb33a5bcbfc8c265f42bab0a": [
+      "lcad.bullbitcoin.com",
+      "LCAD",
+      "Liquid CAD",
+      8
+    ],
+    "6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d": [
+      null,
+      "L-BTC",
+      "Liquid Bitcoin",
+      8
+    ],
+    "ce091c998b83c78bb71a632313ba3760f1763d9cfcffae02258ffa9865a37bd2": [
+      "tether.to",
+      "USDt",
+      "Tether USD",
+      8
+    ],
+    "3438ecb49fc45c08e687de4749ed628c511e326460ea4336794e1cf02741329e": [
+      "settlenet.io",
+      "JPYS",
+      "SETTLENET JPY Stablecoin by Crypto Garage",
+      0
+    ]
+  }
+  
--- a/frontend/cypress/fixtures/mainnet_live2hchart.json
+++ b/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]}}
--- a/frontend/cypress/fixtures/mainnet_mempoolInfo.json
+++ b/frontend/cypress/fixtures/mainnet_mempoolInfo.json
--- a/frontend/cypress/fixtures/pools.json
+++ b/frontend/cypress/fixtures/pools.json
--- a/frontend/cypress/integration/bisq/bisq.spec.ts
+++ b/frontend/cypress/integration/bisq/bisq.spec.ts
@@ -0,0 +1,88 @@
+describe('Bisq', () => {
+    let baseModule;
+    beforeEach(() => {
+        baseModule = (Cypress.env('BASE_MODULE') && Cypress.env('BASE_MODULE') === 'bisq') ? '' : '/bisq';
+
+        cy.intercept('/sockjs-node/info*').as('socket');
+        cy.intercept('/bisq/api/markets/hloc?market=btc_usd&interval=day').as('hloc');
+        cy.intercept('/bisq/api/markets/ticker').as('ticker');
+        cy.intercept('/bisq/api/markets/markets').as('markets');
+        cy.intercept('/bisq/api/markets/volumes/7d').as('7d');
+        cy.intercept('/bisq/api/markets/trades?market=all').as('trades');
+        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');
+          });
+    });
+
+    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") !== 'liquid') {
+
+        it('loads the dashboard', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+        });
+
+        it('loads the transactions screen', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(2) > a').click().then(() => {
+                cy.get('.table > tr').should('have.length', 50);
+            });
+        });
+
+        it('loads the blocks screen', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(3) > a').click().then(() => {
+                cy.wait('@blocks');
+                cy.get('tbody tr').should('have.length', 10);
+            });
+        });
+
+        it('loads the stats screen', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.wait('@stats');
+            });
+        });
+
+        it('loads the api screen', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(5) > a').click().then(() => {
+                cy.get('.card').should('have.length.at.least', 1);
+                cy.get('.card').first().click();
+                cy.get('.card-body');
+            });
+        });
+
+        it('shows blocks pagination with 5 pages (desktop)', () => {
+            cy.viewport(760, 800);
+            cy.visit(`${baseModule}/blocks`);
+            cy.waitForSkeletonGone();
+            cy.get('tbody tr').should('have.length', 10);
+            // 5 pages + 4 buttons = 9 buttons
+            cy.get('.pagination-container ul.pagination').first().children().should('have.length', 9);
+        });
+
+        it('shows blocks pagination with 3 pages (mobile)', () => {
+            cy.viewport(669, 800);
+            cy.visit(`${baseModule}/blocks`);
+            cy.waitForSkeletonGone();
+            cy.get('tbody tr').should('have.length', 10);
+            // 3 pages + 4 buttons = 7 buttons
+            cy.get('.pagination-container ul.pagination').first().children().should('have.length', 7);
+        });
+    } else {
+        it.skip("Tests cannot be run on the selected BASE_MODULE");
+    }
+  });
--- a/frontend/cypress/integration/liquid/liquid.spec.ts
+++ b/frontend/cypress/integration/liquid/liquid.spec.ts
@@ -0,0 +1,147 @@
+describe('Liquid', () => {
+    let baseModule;
+    beforeEach(() => {
+        baseModule = (Cypress.env('BASE_MODULE') && Cypress.env('BASE_MODULE') === 'liquid') ? '' : '/liquid';
+
+        cy.intercept('/liquid/api/block/**').as('block');
+        cy.intercept('/liquid/api/blocks/').as('blocks');
+        cy.intercept('/liquid/api/tx/**/outspends').as('outspends');
+        cy.intercept('/liquid/api/block/**/txs/**').as('block-txs');
+        cy.intercept('/resources/pools.json').as('pools');
+
+        Cypress.Commands.add('waitForBlockData', () => {
+            cy.wait('@socket');
+            cy.wait('@block');
+            cy.wait('@outspends');
+          });
+    });
+
+    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") !== 'bisq') {
+
+        it('loads the dashboard', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+        });
+
+        it('loads the blocks page', () => {
+            cy.visit(`${baseModule}/blocks`);
+            cy.waitForSkeletonGone();
+        });
+
+        it('loads a specific block page', () => {
+            cy.visit(`${baseModule}/block/7e1369a23a5ab861e7bdede2aadcccae4ea873ffd9caf11c7c5541eb5bcdff54`);
+            cy.waitForSkeletonGone();
+        });
+
+        it('loads the graphs page', () => {
+            cy.visit(`${baseModule}/graphs`);
+            cy.waitForSkeletonGone();
+        });
+
+        it('loads the tv page - desktop', () => {
+            cy.visit(`${baseModule}`);
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(3) > a').click().then(() => {
+                cy.wait(1000);
+            });
+        });
+
+        it('loads the graphs page - mobile', () => {
+            cy.visit(`${baseModule}`)
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(3) > a').click().then(() => {
+                cy.viewport('iphone-6');
+                cy.wait(1000);
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+
+        describe('assets', () => {
+            it('shows the assets screen', () => {
+                cy.visit(`${baseModule}/assets`);
+                cy.waitForSkeletonGone();
+                cy.get('table tr').should('have.length.at.least', 5);
+            });
+
+            it('allows searching assets', () => {
+                cy.visit(`${baseModule}/assets`);
+                cy.waitForSkeletonGone();
+                cy.get('.container-xl input').click().type('Liquid Bitcoin').then(() => {
+                    cy.get('table tr').should('have.length', 1);
+                });
+            });
+
+            it('shows a specific asset ID', () => {
+                cy.visit(`${baseModule}/assets`);
+                cy.waitForSkeletonGone();
+                cy.get('.container-xl input').click().type('Liquid AUD').then(() => {
+                    cy.get('table tr td:nth-of-type(1) a').click();
+                });
+            });
+        });
+
+
+        describe('unblinded TX', () => {
+
+            it('should not show an unblinding error message for regular txs', () => {
+                cy.visit(`${baseModule}/tx/82a479043ec3841e0d3f829afc8df4f0e2bbd675a13f013ea611b2fde0027d45`);
+                cy.waitForSkeletonGone();
+                cy.get('.error-unblinded' ).should('not.exist');
+            });
+
+            it('show unblinded TX', () => {
+                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc,2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3a`);
+                cy.waitForSkeletonGone();
+                cy.get('#table-tx-vin tr').should('have.class', 'assetBox');
+                cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
+            });
+
+            it('show empty unblinded TX', () => {
+                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=`);
+                cy.waitForSkeletonGone();
+                cy.get('#table-tx-vin tr').should('have.class', '');
+                cy.get('#table-tx-vout tr').should('have.class', '');
+            });
+
+            it('show invalid unblinded TX hex', () => {
+                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=123`);
+                cy.waitForSkeletonGone();
+                cy.get('#table-tx-vin tr').should('have.class', '');
+                cy.get('#table-tx-vout tr').should('have.class', '');
+                cy.get('.error-unblinded' ).contains('Error: Invalid blinding data (invalid hex)');
+            });
+
+            it('show first unblinded vout', () => {
+                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc`);
+                cy.waitForSkeletonGone();
+                cy.get('#table-tx-vout tr:first-child()').should('have.class', 'assetBox');
+            });
+
+            it('show second unblinded vout', () => {
+                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3a`);
+                cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
+            });
+
+            it('show invalid error unblinded TX', () => {
+                cy.visit(`${baseModule}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc,2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3c`);
+                cy.waitForSkeletonGone();
+                cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
+                cy.get('.error-unblinded' ).contains('Error: Invalid blinding data.');
+            });
+
+            it('shows asset peg in/out and burn transactions', () => {
+                cy.visit(`${baseModule}/asset/6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`);
+                cy.waitForSkeletonGone();
+                cy.get('#table-tx-vout tr').not('.assetBox');
+                cy.get('#table-tx-vin tr').not('.assetBox');
+            });
+
+            it('prevents regressing issue #644', () => {
+                cy.visit(`${baseModule}/tx/393b890966f305e7c440fcfb12a13f51a7a9011cc59ff5f14f6f93214261bd82`);
+                cy.waitForSkeletonGone();
+            });
+        });
+    } else {
+        it.skip("Tests cannot be run on the selected BASE_MODULE");
+    }
+});
--- a/frontend/cypress/integration/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts
@@ -0,0 +1,368 @@
+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');
+
+        // Search Auto Complete
+        cy.intercept('/api/address-prefix/1wiz').as('search-1wiz');
+        cy.intercept('/api/address-prefix/1wizS').as('search-1wizS');
+        cy.intercept('/api/address-prefix/1wizSA').as('search-1wizSA');
+
+        Cypress.Commands.add('waitForBlockData', () => {
+            cy.wait('@tx-outspends');
+            cy.wait('@pools');
+        });
+    });
+
+    if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+
+        it('loads the status screen', () => {
+            cy.visit('/status');
+            cy.get('#mempool-block-0').should('be.visible');
+            cy.get('[id^="bitcoin-block-"]').should('have.length', 8);
+            cy.get('.footer').should('be.visible');
+            cy.get('.row > :nth-child(1)').invoke('text').then((text) => {
+                expect(text).to.match(/Tx vBytes per second:.* vB\/s/);
+            });
+            cy.get('.row > :nth-child(2)').invoke('text').then((text) => {
+                expect(text).to.match(/Unconfirmed:(.*)/);
+            });
+            cy.get('.row > :nth-child(3)').invoke('text').then((text) => {
+                expect(text).to.match(/Mempool size:(.*) (kB|MB) \((\d+) (block|blocks)\)/);
+            });
+        });
+
+        it('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.waitForSkeletonGone();
+        });
+
+        describe('search', () => {
+            it('allows searching for partial Bitcoin addresses', () => {
+                cy.visit('/');
+                cy.get('.search-box-container > .form-control').type('1wiz').then(() => {
+                    cy.wait('@search-1wiz');
+                    cy.get('ngb-typeahead-window button.dropdown-item').should('have.length', 10);
+                });
+
+                cy.get('.search-box-container > .form-control').type('S').then(() => {
+                    cy.wait('@search-1wizS');
+                    cy.get('ngb-typeahead-window button.dropdown-item').should('have.length', 5);
+                });
+
+                cy.get('.search-box-container > .form-control').type('A').then(() => {
+                    cy.wait('@search-1wizSA');
+                    cy.get('ngb-typeahead-window button.dropdown-item').should('have.length', 1)
+                });
+
+                cy.get('ngb-typeahead-window button.dropdown-item.active').click().then(() => {
+                    cy.url().should('include', '/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC');
+                    cy.waitForSkeletonGone();
+                    cy.get('.text-center').should('not.have.text', 'Invalid Bitcoin address');
+                });
+            });
+
+            ['BC1PQYQSZQ', 'bc1PqYqSzQ'].forEach((searchTerm) => {
+                it(`allows searching for partial case insensitive bc1 addresses: ${searchTerm}`, () => {
+                    cy.visit('/');
+                    cy.get('.search-box-container > .form-control').type(searchTerm).then(() => {
+                        cy.get('ngb-typeahead-window button.dropdown-item').should('have.length', 1);
+                        cy.get('ngb-typeahead-window button.dropdown-item.active').click().then(() => {
+                            cy.url().should('include', '/address/bc1pqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqszqgpqyqs3wf0qm');
+                            cy.waitForSkeletonGone();
+                            cy.get('.text-center').should('not.have.text', 'Invalid Bitcoin address');
+                        });
+                    });
+                });
+            });
+        });
+
+        describe('blocks navigation', () => {
+
+            describe('keyboard events', () => {
+                it('loads first blockchain blocks visible and keypress arrow right', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/');
+                    cy.waitForSkeletonGone();
+                    cy.get('.blockchain-blocks-0 > a').click().then(() => {
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.waitForPageIdle();
+                        cy.document().right();
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    });
+                });
+
+                it('loads first blockchain blocks visible and keypress arrow left', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/');
+                    cy.waitForSkeletonGone();
+                    cy.get('.blockchain-blocks-0 > a').click().then(() => {
+                        cy.waitForPageIdle();
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.document().left();
+                        cy.get('.title-block h1').invoke('text').should('equal', 'Next block');
+                    });
+                });
+
+                it('loads last blockchain blocks and keypress arrow right', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/');
+                    cy.waitForSkeletonGone();
+                    cy.get('.blockchain-blocks-4 > a').click().then(() => {
+                        cy.waitForPageIdle();
+
+                        // block 6
+                        cy.document().right();
+                        cy.wait(5000);
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+
+                        // block 7
+                        cy.document().right();
+                        cy.wait(5000);
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+
+                        // block 8 - last visible block
+                        cy.document().right();
+                        cy.wait(5000);
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+
+                        // block 9 - not visible at the blochchain blocks visible block
+                        cy.document().right();
+                        cy.wait(5000);
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+
+                    });
+                });
+
+                it('loads genesis block and keypress arrow right', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/block/0');
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+
+                    cy.document().right();
+                    cy.wait(5000);
+                    cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                });
+
+                it('loads genesis block and keypress arrow left', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/block/0');
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+
+                    cy.document().left();
+                    cy.wait(5000);
+                    cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                });
+            });
+            describe('mouse events', () => {
+                it('loads first blockchain blocks visible and click on the arrow right', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/');
+                    cy.waitForSkeletonGone();
+                    cy.get('.blockchain-blocks-0 > a').click().then(() => {
+                        cy.waitForPageIdle();
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').click().then(() => {
+                            cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                            cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        });
+                    });
+                });
+
+                it('loads genesis block and click on the arrow left', () => {
+                    cy.viewport('macbook-16');
+                    cy.visit('/block/0');
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+                    cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
+                    cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').click().then(() => {
+                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                    });
+                });
+            });
+        });
+
+
+        it('loads skeleton when changes between networks', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+
+            cy.changeNetwork("testnet");
+            cy.changeNetwork("signet");
+            cy.changeNetwork("liquid");
+            cy.changeNetwork("mainnet");
+            cy.changeNetwork("bisq");
+        });
+
+        it('loads the dashboard with the skeleton blocks', () => {
+            cy.mockMempoolSocket();
+            cy.visit("/");
+            cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
+            cy.get(':nth-child(2) > #bitcoin-block-0').should('be.visible');
+            cy.get(':nth-child(3) > #bitcoin-block-0').should('be.visible');
+            cy.get('#mempool-block-0').should('be.visible');
+            cy.get('#mempool-block-1').should('be.visible');
+            cy.get('#mempool-block-2').should('be.visible');
+
+            emitMempoolInfo({
+                'params': {
+                loaded: true
+                }
+            });
+
+            cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
+            cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
+            cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');
+        });
+
+        it('loads the blocks screen', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(2) > a').click().then(() => {
+                cy.waitForPageIdle();
+            });
+        });
+
+        it('loads the graphs screen', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(3) > a').click().then(() => {
+                cy.wait(1000);
+            });
+        });
+
+        it('loads the tv screen - desktop', () => {
+            cy.viewport('macbook-16');
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.viewport('macbook-16');
+                cy.get('.chart-holder');
+                cy.get('.blockchain-wrapper').should('be.visible');
+                cy.get('#mempool-block-0').should('be.visible');
+            });
+        });
+
+        it('loads the tv screen - mobile', () => {
+            cy.viewport('iphone-6');
+            cy.visit('/tv');
+            cy.waitForSkeletonGone();
+            cy.get('.chart-holder');
+            cy.get('.blockchain-wrapper').should('be.visible');
+        });
+
+        it('loads the api screen', () => {
+            cy.visit('/');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(5) > a').click().then(() => {
+                cy.wait(1000);
+            });
+        });
+
+        describe('blocks', () => {
+            it('shows empty blocks properly', () => {
+                cy.visit('/block/0000000000000000000bd14f744ef2e006e61c32214670de7eb891a5732ee775');
+                cy.waitForSkeletonGone();
+                cy.waitForPageIdle();
+                cy.get('h2').invoke('text').should('equal', '1 transaction');
+            });
+
+            it('expands and collapses the block details', () => {
+                cy.visit('/block/0');
+                cy.waitForSkeletonGone();
+                cy.waitForPageIdle();
+                cy.get('.btn.btn-outline-info').click().then(() => {
+                    cy.get('#details').should('be.visible');
+                });
+
+                cy.get('.btn.btn-outline-info').click().then(() => {
+                    cy.get('#details').should('not.be.visible');
+                });
+            });
+            it('shows blocks with no pagination', () => {
+                cy.visit('/block/00000000000000000001ba40caf1ad4cec0ceb77692662315c151953bfd7c4c4');
+                cy.waitForSkeletonGone();
+                cy.waitForPageIdle();
+                cy.get('.block-tx-title h2').invoke('text').should('equal', '19 transactions');
+                cy.get('.pagination-container ul.pagination').first().children().should('have.length', 5);
+            });
+
+            it('supports pagination on the block screen', () => {
+                // 41 txs
+                cy.visit('/block/00000000000000000009f9b7b0f63ad50053ad12ec3b7f5ca951332f134f83d8');
+                cy.waitForSkeletonGone();
+                cy.get('.pagination-container a').invoke('text').then((text1) => {
+                    cy.get('.active + li').first().click().then(() => {
+                        cy.waitForSkeletonGone();
+                        cy.waitForPageIdle();
+                        cy.get('.header-bg.box > a').invoke('text').then((text2) => {
+                            expect(text1).not.to.eq(text2);
+                        });
+                    });
+                });
+            });
+
+            it('shows blocks pagination with 5 pages (desktop)', () => {
+                cy.viewport(760, 800);
+                cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3').then(() => {
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+                });
+
+                // 5 pages + 4 buttons = 9 buttons
+                cy.get('.pagination-container ul.pagination').first().children().should('have.length', 9);
+            });
+
+            it('shows blocks pagination with 3 pages (mobile)', () => {
+                cy.viewport(669, 800);
+                cy.visit('/block/000000000000000000049281946d26fcba7d99fdabc1feac524bc3a7003d69b3').then(() => {
+                    cy.waitForSkeletonGone();
+                    cy.waitForPageIdle();
+                });
+
+                // 3 pages + 4 buttons = 7 buttons
+                cy.get('.pagination-container ul.pagination').first().children().should('have.length', 7);
+            });
+        });
+    } else {
+        it.skip("Tests cannot be run on the selected BASE_MODULE");
+    }
+});
--- a/frontend/cypress/integration/signet/signet.spec.ts
+++ b/frontend/cypress/integration/signet/signet.spec.ts
@@ -0,0 +1,131 @@
+import { emitMempoolInfo } from "../../support/websocket";
+
+describe('Signet', () => {
+  beforeEach(() => {
+    cy.intercept('/api/block-height/*').as('block-height');
+    cy.intercept('/api/block/*').as('block');
+    cy.intercept('/api/block/*/txs/0').as('block-txs');
+    cy.intercept('/api/tx/*/outspends').as('tx-outspends');
+  });
+
+
+  if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+    it('loads the dashboard', () => {
+        cy.visit('/signet');
+        cy.waitForSkeletonGone();
+    });
+
+    it('loads the dashboard with the skeleton blocks', () => {
+        cy.mockMempoolSocket();
+        cy.visit("/signet");
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('be.visible');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('be.visible');
+        cy.get('#mempool-block-0').should('be.visible');
+        cy.get('#mempool-block-1').should('be.visible');
+        cy.get('#mempool-block-2').should('be.visible');
+
+        emitMempoolInfo({
+            'params': {
+            "network": "signet"
+            }
+        });
+
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');
+    });
+
+    it('loads the blocks screen', () => {
+        cy.visit('/signet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(2) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    it('loads the graphs screen', () => {
+        cy.visit('/signet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(3) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    describe('tv mode', () => {
+        it('loads the tv screen - desktop', () => {
+            cy.viewport('macbook-16');
+            cy.visit('/signet');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.get('.chart-holder').should('be.visible');
+                cy.get('#mempool-block-0').should('be.visible');
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+
+        it('loads the tv screen - mobile', () => {
+            cy.visit('/signet');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.viewport('iphone-8');
+                cy.get('.chart-holder').should('be.visible');
+                //TODO: Remove comment when the bug is fixed
+                //cy.get('#mempool-block-0').should('be.visible');
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+    });
+
+
+    it('loads the api screen', () => {
+        cy.visit('/signet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(5) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    describe('blocks', () => {
+        it('shows empty blocks properly', () => {
+            cy.visit('/signet/block/00000133d54e4589f6436703b067ec23209e0a21b8a9b12f57d0592fd85f7a42');
+            cy.waitForSkeletonGone();
+            cy.get('h2').invoke('text').should('equal', '1 transaction');
+        });
+
+        it('expands and collapses the block details', () => {
+            cy.visit('/signet/block/0');
+            cy.waitForSkeletonGone();
+            cy.get('.btn.btn-outline-info').click().then(() => {
+                cy.get('#details').should('be.visible');
+            });
+
+            cy.get('.btn.btn-outline-info').click().then(() => {
+                cy.get('#details').should('not.be.visible');
+            });
+        });
+
+        it('shows blocks with no pagination', () => {
+            cy.visit('/signet/block/00000078f920a96a69089877b934ce7fd009ab55e3170920a021262cb258e7cc');
+            cy.waitForSkeletonGone();
+            cy.get('h2').invoke('text').should('equal', '13 transactions');
+            cy.get('ul.pagination').first().children().should('have.length', 5);
+        });
+
+        it('supports pagination on the block screen', () => {
+            // 43 txs
+            cy.visit('/signet/block/00000094bd52f73bdbfc4bece3a94c21fec2dc968cd54210496e69e4059d66a6');
+            cy.waitForSkeletonGone();
+            cy.get('.header-bg.box > a').invoke('text').then((text1) => {
+                cy.get('.active + li').first().click().then(() => {
+                    cy.get('.header-bg.box > a').invoke('text').then((text2) => {
+                        expect(text1).not.to.eq(text2);
+                    });
+                });
+            });
+        });
+    });
+    } else {
+        it.skip("Tests cannot be run on the selected BASE_MODULE");
+    }
+  });
--- a/frontend/cypress/integration/testnet/testnet.spec.ts
+++ b/frontend/cypress/integration/testnet/testnet.spec.ts
@@ -0,0 +1,128 @@
+import { confirmAddress, emitMempoolInfo, sendWsMock, showNewTx, startTrackingAddress } from "../../support/websocket";
+
+describe('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');
+  });
+
+  if (Cypress.env("BASE_MODULE") === '' || Cypress.env("BASE_MODULE") === 'mempool') {
+
+    it('loads the dashboard', () => {
+        cy.visit('/testnet');
+        cy.waitForSkeletonGone();
+    });
+
+    it('loads the dashboard with the skeleton blocks', () => {
+        cy.mockMempoolSocket();
+        cy.visit("/testnet");
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('be.visible');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('be.visible');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('be.visible');
+        cy.get('#mempool-block-0').should('be.visible');
+        cy.get('#mempool-block-1').should('be.visible');
+        cy.get('#mempool-block-2').should('be.visible');
+
+        emitMempoolInfo({
+            'params': {
+            loaded: true
+            }
+        });
+
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');
+    });
+
+    it('loads the blocks screen', () => {
+        cy.visit('/testnet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(2) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    it('loads the graphs screen', () => {
+        cy.visit('/testnet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(3) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    describe('tv mode', () => {
+        it('loads the tv screen - desktop', () => {
+            cy.viewport('macbook-16');
+            cy.visit('/testnet');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.wait(1000);
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+
+        it('loads the tv screen - mobile', () => {
+            cy.visit('/testnet');
+            cy.waitForSkeletonGone();
+            cy.get('li:nth-of-type(4) > a').click().then(() => {
+                cy.viewport('iphone-6');
+                cy.wait(1000);
+                cy.get('.tv-only').should('not.exist');
+            });
+        });
+    });
+
+
+    it('loads the api screen', () => {
+        cy.visit('/testnet');
+        cy.waitForSkeletonGone();
+        cy.get('li:nth-of-type(5) > a').click().then(() => {
+            cy.wait(1000);
+        });
+    });
+
+    describe('blocks', () => {
+        it('shows empty blocks properly', () => {
+            cy.visit('/testnet/block/0');
+            cy.waitForSkeletonGone();
+            cy.get('h2').invoke('text').should('equal', '1 transaction');
+        });
+
+        it('expands and collapses the block details', () => {
+            cy.visit('/testnet/block/0');
+            cy.waitForSkeletonGone();
+            cy.get('.btn.btn-outline-info').click().then(() => {
+                cy.get('#details').should('be.visible');
+            });
+
+            cy.get('.btn.btn-outline-info').click().then(() => {
+                cy.get('#details').should('not.be.visible');
+            });
+        });
+
+        it('shows blocks with no pagination', () => {
+            cy.visit('/testnet/block/000000000000002f8ce27716e74ecc7ad9f7b5101fed12d09e28bb721b9460ea');
+            cy.waitForSkeletonGone();
+            cy.get('h2').invoke('text').should('equal', '11 transactions');
+            cy.get('ul.pagination').first().children().should('have.length', 5);
+        });
+
+        it('supports pagination on the block screen', () => {
+            // 48 txs
+            cy.visit('/testnet/block/000000000000002ca3878ebd98b313a1c2d531f2e70a6575d232ca7564dea7a9');
+            cy.waitForSkeletonGone();
+            cy.get('.header-bg.box > a').invoke('text').then((text1) => {
+                cy.get('.active + li').first().click().then(() => {
+                    cy.get('.header-bg.box > a').invoke('text').then((text2) => {
+                        expect(text1).not.to.eq(text2);
+                    });
+                });
+            });
+        });
+    });
+    } else {
+        it.skip("Tests cannot be run on the selected BASE_MODULE");
+    }
+  });
--- a/frontend/cypress/plugins/index.js
+++ b/frontend/cypress/plugins/index.js
@@ -0,0 +1 @@
+module.exports = (on, config) => {}
--- a/frontend/cypress/support/PageIdleDetector.ts
+++ b/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;
+    }
+}
--- a/frontend/cypress/support/commands.ts
+++ b/frontend/cypress/support/commands.ts
@@ -0,0 +1,147 @@
+// ***********************************************
+// This example namespace declaration will help
+// with Intellisense and code completion in your
+// IDE or Text Editor.
+// ***********************************************
+// declare namespace Cypress {
+//   interface Chainable<Subject = any> {
+//     customCommand(param: any): typeof customCommand;
+//   }
+// }
+//
+// function customCommand(param: any): void {
+//   console.warn(param);
+// }
+//
+// NOTE: You can use it like so:
+// Cypress.Commands.add('customCommand', customCommand);
+//
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+'use strict'
+
+import 'cypress-wait-until';
+import { PageIdleDetector } from './PageIdleDetector';
+import { mockWebSocket } from './websocket';
+
+/* global Cypress */
+const codes = {
+    ArrowLeft: 37,
+    ArrowUp: 38,
+    ArrowRight: 39,
+    ArrowDown: 40
+}
+
+Cypress.Commands.add('waitForSkeletonGone', () => {
+    cy.waitUntil(() => {
+        return Cypress.$('.skeleton-loader').length === 0;
+    }, { verbose: true, description: "waitForSkeletonGone", errorMsg: "skeleton loaders never went away", timeout: 15000, interval: 50});
+});
+
+Cypress.Commands.add(
+    "waitForPageIdle",
+    () => {
+        console.warn("Waiting for page idle state");
+        const pageIdleDetector = new PageIdleDetector();
+        pageIdleDetector.WaitForPageToBeIdle();
+    }
+);
+
+Cypress.Commands.add('mockMempoolSocket', () => {
+  mockWebSocket();
+});
+
+Cypress.Commands.add('changeNetwork', (network: "testnet"|"signet"|"liquid"|"bisq"|"mainnet" ) => {
+    cy.get('.dropdown-toggle').click().then(() => {
+        cy.get(`.${network}`).click().then(() => {
+            cy.waitForPageIdle();
+            if(network !== 'bisq'){
+                cy.waitForSkeletonGone();
+            }
+        });
+    });
+});
+
+// https://github.com/bahmutov/cypress-arrows/blob/8f0303842a343550fbeaf01528d01d1ff213b70c/src/index.js
+function keydownCommand ($el, key) {
+    const message = `sending the "${key}" keydown event`
+    const log = Cypress.log({
+      name: `keydown: ${key}`,
+      message: message,
+      consoleProps: function () {
+        return {
+          Subject: $el
+        }
+      }
+    })
+  
+    const e = $el.createEvent('KeyboardEvent')
+  
+    Object.defineProperty(e, 'key', {
+      get: function () {
+        return key
+      }
+    })
+  
+    Object.defineProperty(e, 'keyCode', {
+      get: function () {
+        return this.keyCodeVal
+      }
+    })
+    Object.defineProperty(e, 'which', {
+      get: function () {
+        return this.keyCodeVal
+      }
+    })
+    var metaKey = false
+  
+    Object.defineProperty(e, 'metaKey', {
+      get: function () {
+        return metaKey
+      }
+    })
+  
+    Object.defineProperty(e, 'shiftKey', {
+      get: function () {
+        return false
+      }
+    })
+    e.keyCodeVal = codes[key]
+  
+    e.initKeyboardEvent('keydown', true, true,
+      $el.defaultView, false, false, false, false, e.keyCodeVal, e.keyCodeVal)
+  
+    $el.dispatchEvent(e)
+    log.snapshot().end()
+    return $el
+  }
+  
+  Cypress.Commands.add('keydown', { prevSubject: "dom" }, keydownCommand)
+  Cypress.Commands.add('left', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowLeft'))
+  Cypress.Commands.add('right', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowRight'))
+  Cypress.Commands.add('up', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowUp'))
+  Cypress.Commands.add('down', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowDown'))
--- a/frontend/cypress/support/index.d.ts
+++ b/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>
+    }
+}
--- a/frontend/cypress/support/index.ts
+++ b/frontend/cypress/support/index.ts
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// 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();
--- a/frontend/cypress/support/websocket.ts
+++ b/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);
+});
--- a/frontend/cypress/tsconfig.json
+++ b/frontend/cypress/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "types": ["cypress"],
+    "lib": ["es2015", "dom"],
+    "allowJs": true,
+    "noEmit": true,
+  }
+}
--- a/frontend/e2e/protractor.conf.js
+++ b/frontend/e2e/protractor.conf.js
@@ -1,32 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};
--- a/frontend/e2e/src/app.e2e-spec.ts
+++ b/frontend/e2e/src/app.e2e-spec.ts
@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to mempool!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});
--- a/frontend/e2e/src/app.po.ts
+++ b/frontend/e2e/src/app.po.ts
@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
-  }
-
-  getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
-  }
-}
--- a/frontend/e2e/tsconfig.json
+++ b/frontend/e2e/tsconfig.json
@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es2018",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
--- a/frontend/generate-config.js
+++ b/frontend/generate-config.js
@@ -1,4 +1,5 @@
 var fs = require('fs');
+const { spawnSync } = require('child_process');

 const CONFIG_FILE_NAME = 'mempool-frontend-config.json';
 const GENERATED_CONFIG_FILE_NAME = 'generated-config.js';
@@ -11,15 +12,29 @@ let packetJsonVersion = '';
 try {
  const rawConfig = fs.readFileSync(CONFIG_FILE_NAME);
  configContent = JSON.parse(rawConfig);
+  console.log(`${CONFIG_FILE_NAME} file found, using provided config`);
 } catch (e) {
  if (e.code !== 'ENOENT') {
    throw new Error(e);
+  } else {
+    console.log(`${CONFIG_FILE_NAME} file not found, using default config`);
  }
 }

+const indexFilePath = configContent.BASE_MODULE ? 'src/index.' + configContent.BASE_MODULE + '.html' : 'src/index.mempool.html';
+
+try {
+  fs.copyFileSync(indexFilePath, 'src/index.html');
+  console.log('Copied ' + indexFilePath + ' to src/index.html');
+} catch (e) {
+  console.log('Error copying the index file');
+  throw new Error(e);
+}
+
 try {
  const packageJson = fs.readFileSync('package.json');
  packetJsonVersion = JSON.parse(packageJson).version;
+  console.log(`mempool version ${packetJsonVersion}`);
 } catch (e) {
  throw new Error(e);
 }
@@ -31,23 +46,64 @@ for (setting in configContent) {
  });
 }

-try {
-  gitCommitHash = fs.readFileSync('../.git/refs/heads/master').toString().trim();
-} catch (e) {
-  console.log('Could not load git commit info: ' + e.message || e);
+if (process.env.DOCKER_COMMIT_HASH) {
+  gitCommitHash = process.env.DOCKER_COMMIT_HASH;
+} else {
+  try {
+    const gitRevParse = spawnSync('git', ['rev-parse', '--short', 'HEAD']);
+  
+    if (!gitRevParse.error) {
+      gitCommitHash = gitRevParse.stdout.toString('utf-8').replace(/[\n\r\s]+$/, '');
+      console.log(`mempool revision ${gitCommitHash}`);
+    } else if (gitRevParse.error.code === 'ENOENT') {
+      console.log('git not found, cannot parse git hash');
+      gitCommitHash = '?';
+    }
+  } catch (e) {
+    console.log('Could not load git commit info: ' + e.message);
+    gitCommitHash = '?';
+  }
 }

-const code = `(function (window) {
+const newConfig = `(function (window) {
  window.__env = window.__env || {};${settings.reduce((str, obj) => `${str}
    window.__env.${obj.key} = ${ typeof obj.value === 'string' ? `'${obj.value}'` : obj.value };`, '')}
    window.__env.GIT_COMMIT_HASH = '${gitCommitHash}';
    window.__env.PACKAGE_JSON_VERSION = '${packetJsonVersion}';
  }(global || this));`;

-try {
-  fs.writeFileSync(GENERATED_CONFIG_FILE_NAME, code, 'utf8');
-} catch (e) {
-  throw new Error(e);
+function readConfig(path) {
+  try {
+    const currentConfig = fs.readFileSync(path).toString().trim();
+    return currentConfig;
+  } catch (e) {
+    return false;
+  }
 }

-console.log('Config file generated');
+function writeConfig(path, config) {
+  try {
+    fs.writeFileSync(path, config, 'utf8');
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
+const currentConfig = readConfig(GENERATED_CONFIG_FILE_NAME);
+
+if (currentConfig && currentConfig === newConfig) {
+  console.log(`No configuration updates, skipping ${GENERATED_CONFIG_FILE_NAME} file update`);
+  return;
+} else if (!currentConfig) {
+  console.log(`${GENERATED_CONFIG_FILE_NAME} file not found, creating new config file`);
+  console.log('CONFIG: ', newConfig);
+  writeConfig(GENERATED_CONFIG_FILE_NAME, newConfig);
+  console.log(`${GENERATED_CONFIG_FILE_NAME} file saved`);
+  return;
+} else {
+  console.log(`Configuration changes detected, updating ${GENERATED_CONFIG_FILE_NAME} file`);
+  console.log('OLD CONFIG: ', currentConfig);
+  console.log('NEW CONFIG: ', newConfig);
+  writeConfig(GENERATED_CONFIG_FILE_NAME, newConfig);
+  console.log(`${GENERATED_CONFIG_FILE_NAME} file updated`);
+};
--- a/frontend/mempool-frontend-config.sample.json
+++ b/frontend/mempool-frontend-config.sample.json
@@ -8,5 +8,8 @@
  "KEEP_BLOCKS_AMOUNT": 8,
  "NGINX_PROTOCOL": "http",
  "NGINX_HOSTNAME": "127.0.0.1",
-  "NGINX_PORT": "80"
+  "NGINX_PORT": "80",
+  "MEMPOOL_BLOCKS_AMOUNT": 8,
+  "BLOCK_WEIGHT_UNITS": 4000000,
+  "BASE_MODULE": "mempool"
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mempool-frontend",
-  "version": "2.2.0-dev",
+  "version": "2.2.2",
  "description": "Bitcoin mempool visualizer and blockchain explorer backend",
  "license": "GNU Affero General Public License v3.0",
  "homepage": "https://mempool.space",
@@ -22,10 +22,14 @@
  "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": "ng serve --proxy-config proxy.conf.json",
-    "start": "npm run generate-config && npm run sync-assets-dev && ng serve --proxy-config proxy.conf.json",
+    "serve": "npm run generate-config && ng serve -c local",
+    "serve:stg": "npm run generate-config && ng serve -c staging",
+    "serve:local-prod": "npm run generate-config && ng serve -c local-prod",
+    "start": "npm run generate-config && npm run sync-assets-dev && ng serve -c local",
+    "start:stg": "npm run generate-config && npm run sync-assets-dev && ng serve -c staging",
+    "start:local-prod": "npm run generate-config && npm run sync-assets-dev && ng serve -c local-prod",
    "build": "npm run generate-config && ng build --prod --localize && npm run sync-assets && npm run build-mempool.js",
    "sync-assets": "node sync-assets.js && rsync -av ./dist/mempool/browser/en-US/resources ./dist/mempool/browser/resources",
    "sync-assets-dev": "node sync-assets.js dev",
@@ -33,11 +37,20 @@
    "build-mempool.js": "tsc | browserify -p tinyify ./node_modules/@mempool/mempool.js/lib/index.js --standalone mempoolJS > ./dist/mempool/browser/en-US/mempool.js",
    "test": "ng test",
    "lint": "ng lint",
-    "e2e": "ng e2e",
+    "e2e": "npm run generate-config && ng e2e",
+    "e2e:ci": "npm run cypress:run:ci",
+    "config:defaults:mempool": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=mempool && npm run generate-config",
+    "config:defaults:liquid": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=liquid && npm run generate-config",
+    "config:defaults:bisq": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=bisq && npm run generate-config",
    "dev:ssr": "npm run generate-config && ng run mempool:serve-ssr",
    "serve:ssr": "node server.run.js",
    "build:ssr": "npm run build && ng run mempool:server:production && ./node_modules/typescript/bin/tsc server.run.ts",
-    "prerender": "ng run mempool:prerender"
+    "prerender": "ng run mempool:prerender",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "cypress:run:record": "cypress run --record",
+    "cypress:open:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true 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",
@@ -55,7 +68,7 @@
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@mempool/chartist": "^0.11.4",
-    "@mempool/mempool.js": "^2.2.0",
+    "@mempool/mempool.js": "^2.2.4",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@nguniversal/express-engine": "11.2.1",
    "@types/qrcode": "^1.3.4",
@@ -64,6 +77,7 @@
    "clipboard": "^2.0.4",
    "domino": "^2.1.6",
    "express": "^4.17.1",
+    "lightweight-charts": "^3.3.0",
    "ngx-bootrap-multiselect": "^2.0.0",
    "ngx-infinite-scroll": "^10.0.1",
    "qrcode": "^1.4.4",
@@ -92,9 +106,16 @@
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
-    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
+  },
+  "optionalDependencies": {
+    "@cypress/schematic": "^1.3.0",
+    "cypress": "^8.3.1",
+    "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"
  }
 }
--- a/frontend/proxy.conf.js
+++ b/frontend/proxy.conf.js
@@ -0,0 +1,64 @@
+const fs = require('fs');
+
+let PROXY_CONFIG;
+let configContent;
+
+const CONFIG_FILE_NAME = 'mempool-frontend-config.json';
+
+try {
+    const rawConfig = fs.readFileSync(CONFIG_FILE_NAME);
+    configContent = JSON.parse(rawConfig);
+    console.log(`${CONFIG_FILE_NAME} file found, using provided config`);
+} catch (e) {
+    console.log(e);
+    if (e.code !== 'ENOENT') {
+      throw new Error(e);
+  } else {
+      console.log(`${CONFIG_FILE_NAME} file not found, using default config`);
+      
+  }
+}
+
+PROXY_CONFIG = [
+    {
+        context: ['*', 
+        '/api/**', '!/api/v1/ws', 
+        '!/bisq', '!/bisq/**', '!/bisq/',
+        '!/liquid', '!/liquid/**', '!/liquid/',
+        '/testnet/api/**', '/signet/api/**'
+        ],
+        target: "https://mempool.space",
+        ws: true,
+        secure: false,
+        changeOrigin: true
+    },
+    {
+        context: ['/api/v1/ws'],
+        target: "https://mempool.space",
+        ws: true,
+        secure: false,
+        changeOrigin: true,
+    },
+    {
+        context: ['/api/bisq**', '/bisq/api/**'],
+        target: "https://bisq.markets",
+        pathRewrite: {
+            "^/api/bisq/": "/bisq/api"
+        },
+        ws: true,
+        secure: false,
+        changeOrigin: true
+    },
+    {
+        context: ['/api/liquid**', '/liquid/api/**'],
+        target: "https://liquid.network",
+        pathRewrite: {
+            "^/api/liquid/": "/liquid/api"
+        },
+        ws: true,
+        secure: false,
+        changeOrigin: true
+    }
+];
+
+module.exports = PROXY_CONFIG;
--- a/frontend/proxy.conf.json
+++ b/frontend/proxy.conf.json
@@ -67,11 +67,18 @@
      "^/liquid/api": "/api/v1/ws"
    }
  },
-  "/liquid/api/": {
-    "target": "http://localhost:50001/",
+  "/liquid/api/v1/": {
+    "target": "http://localhost:8999/",
    "secure": false,
    "pathRewrite": {
-      "^/liquid/api/": ""
+      "^/liquid/api/": "/api/"
+    }
+  },
+  "/liquid/api/": {
+    "target": "http://localhost:8999/",
+    "secure": false,
+    "pathRewrite": {
+      "^/liquid/api/": "/api/v1/"
    }
  },
  "/bisq/api/": {
@@ -88,5 +95,20 @@
    "pathRewrite": {
      "^/bisq/api": "/api/v1/ws"
    }
+  },
+  "/resources/assets.minimal.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/resources/assets.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/resources/pools.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
  }
-}
+}
--- a/frontend/proxy.prod.conf.json
+++ b/frontend/proxy.prod.conf.json
@@ -0,0 +1,99 @@
+{
+  "/api/v1/ws": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "ws": true
+  },
+  "/api": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug",
+    "timeout": 3600000
+  },
+  "/testnet/api/v1/ws": {
+    "target": "https://mempool.space/testnet",
+    "secure": false,
+    "ws": true,
+    "loglevel": "debug",
+    "pathRewrite": {
+      "^/testnet/api": "/api/v1/ws"
+    }
+  },
+  "/testnet/api": {
+    "target": "https://mempool.space",
+    "secure": true,
+    "changeOrigin": true,
+    "loglevel": "debug",
+    "pathRewrite": {
+      "/testnet/api": "/testnet/api"
+    },
+    "timeout": 3600000
+  },
+  "/signet/api/v1/ws": {
+    "target": "https://mempool.space/signet",
+    "secure": false,
+    "ws": true,
+    "loglevel": "debug",
+    "pathRewrite": {
+      "^/signet/api": "/api/v1/ws"
+    }
+  },
+  "/signet/api": {
+    "target": "https://mempool.space",
+    "secure": true,
+    "changeOrigin": true,
+    "loglevel": "debug",
+    "pathRewrite": {
+      "/signet/api": "/signet/api"
+    },
+    "timeout": 3600000
+  },
+
+  "/bisq/api/v1/ws": {
+    "target": "https://mempool.space/bisq",
+    "secure": false,
+    "ws": true,
+    "pathRewrite": {
+      "^/bisq/api": "/api/v1/ws"
+    }
+  },
+  "/bisq/api": {
+    "target": "https://mempool.space/bisq",
+    "secure": false,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/bisq/api/": "/api/v1/bisq/"
+    },
+    "timeout": 3600000
+  },
+  "/liquid/api/v1/ws": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "ws": true
+  },
+  "/liquid/api": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/liquid/api/": "/liquid/api/"
+    },
+    "timeout": 3600000
+  },
+  "/resources/assets.minimal.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/resources/assets.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/resources/pools.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
+  }
+}
--- a/frontend/proxy.stg.conf.json
+++ b/frontend/proxy.stg.conf.json
@@ -0,0 +1,100 @@
+{
+  "/api/v1/ws": {
+    "target": "https://mempool.ninja",
+    "secure": false,
+    "ws": true
+  },
+  "/api/*": {
+    "target": "https://mempool.ninja",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug",
+    "pathRewrite": {
+      "^/api": "https://mempool.ninja/api"
+    },
+    "timeout": 3600000
+  },
+  "/testnet/api/v1/ws": {
+    "target": "https://mempool.ninja/testnet",
+    "secure": false,
+    "ws": true,
+    "pathRewrite": {
+      "^/testnet/api": "/api/v1/ws"
+    }
+  },
+  "/testnet/api/v1/*": {
+    "target": "https://mempool.ninja/testnet",
+    "secure": false,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/testnet/api/v1": "/api/v1"
+    },
+    "timeout": 3600000
+  },
+  "/signet/api/v1/ws": {
+    "target": "https://mempool.ninja/signet",
+    "secure": false,
+    "ws": true,
+    "pathRewrite": {
+      "^/signet/api": "/api/v1/ws"
+    }
+  },
+  "/signet/api/v1/*": {
+    "target": "https://mempool.ninja/signet",
+    "secure": false,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/signet/api/v1": "/api/v1"
+    },
+    "timeout": 3600000
+  },
+  "/bisq/api/v1/ws": {
+    "target": "https://mempool.ninja/bisq",
+    "secure": false,
+    "ws": true,
+    "pathRewrite": {
+      "^/bisq/api": "/api/v1/ws"
+    }
+  },
+  "/bisq/api/*": {
+    "target": "https://mempool.ninja/bisq",
+    "secure": false,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/bisq/api/": "/api/v1/bisq/"
+    },
+    "timeout": 3600000
+  },
+  "/liquid/api/v1/ws": {
+    "target": "https://mempool.ninja/liquid",
+    "secure": false,
+    "ws": true,
+    "pathRewrite": {
+      "^/liquid/api": "/api/v1/ws"
+    }
+  },
+  "/liquid/api/*": {
+    "target": "https://mempool.ninja/liquid",
+    "secure": false,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/liquid/api/": "/api/liquid/"
+    },
+    "timeout": 3600000
+  },
+  "/resources/assets.minimal.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/resources/assets.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/resources/pools.json": {
+    "target": "https://mempool.space",
+    "secure": false,
+    "changeOrigin": true
+  }
+}
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -16,8 +16,13 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
+import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
+import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
+import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
+import { SponsorComponent } from './components/sponsor/sponsor.component';
+import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';

-const routes: Routes = [
+let routes: Routes = [
  {
    path: '',
    component: MasterPageComponent,
@@ -64,11 +69,23 @@ const routes: Routes = [
        path: 'terms-of-service',
        component: TermsOfServiceComponent
      },
+      {
+        path: 'privacy-policy',
+        component: PrivacyPolicyComponent
+      },
+      {
+        path: 'trademark-policy',
+        component: TrademarkPolicyComponent
+      },
      {
        path: 'address/:id',
        children: [],
        component: AddressComponent
      },
+      {
+        path: 'sponsor',
+        component: SponsorComponent,
+      },
    ],
  },
  {
@@ -283,9 +300,110 @@ const routes: Routes = [
  },
 ];

+const browserWindow = window || {};
+// @ts-ignore
+const browserWindowEnv = browserWindow.__env || {};
+
+if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'bisq') {
+  routes = [{
+    path: '',
+    component: BisqMasterPageComponent,
+    loadChildren: () => import('./bisq/bisq.module').then(m => m.BisqModule)
+  }];
+}
+
+if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
+  routes = [{
+    path: '',
+    component: LiquidMasterPageComponent,
+    children: [
+      {
+        path: '',
+        component: StartComponent,
+        children: [
+          {
+            path: '',
+            component: DashboardComponent
+          },
+          {
+            path: 'tx/:id',
+            component: TransactionComponent
+          },
+          {
+            path: 'block/:id',
+            component: BlockComponent
+          },
+          {
+            path: 'mempool-block/:id',
+            component: MempoolBlockComponent
+          },
+        ],
+      },
+      {
+        path: 'blocks',
+        component: LatestBlocksComponent,
+      },
+      {
+        path: 'graphs',
+        component: StatisticsComponent,
+      },
+      {
+        path: 'address/:id',
+        component: AddressComponent
+      },
+      {
+        path: 'asset/:id',
+        component: AssetComponent
+      },
+      {
+        path: 'assets',
+        component: AssetsComponent,
+      },
+      {
+        path: 'api',
+        component: ApiDocsComponent,
+      },
+      {
+        path: 'about',
+        component: AboutComponent,
+      },
+      {
+        path: 'terms-of-service',
+        component: TermsOfServiceComponent
+      },
+      {
+        path: 'privacy-policy',
+        component: PrivacyPolicyComponent
+      },
+      {
+        path: 'trademark-policy',
+        component: TrademarkPolicyComponent
+      },
+      {
+        path: 'sponsor',
+        component: SponsorComponent,
+      },
+    ],
+  },
+  {
+    path: 'tv',
+    component: TelevisionComponent
+  },
+  {
+    path: 'status',
+    component: StatusViewComponent
+  },
+  {
+    path: '**',
+    redirectTo: ''
+  }];
+}
+
@NgModule({
  imports: [RouterModule.forRoot(routes, {
-    initialNavigation: 'enabled'
+    initialNavigation: 'enabled',
+    scrollPositionRestoration: 'enabled',
+    anchorScrolling: 'enabled'
 })],
  exports: [RouterModule]
 })
--- a/frontend/src/app/app.constants.ts
+++ b/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
@@ -71,11 +72,11 @@ export const languages: Language[] = [
   { code: 'ja', name: '日本語' },          // Japanese
   { code: 'nb', name: 'Norsk' },           // Norwegian Bokmål
 // { code: 'nn', name: 'Norsk Nynorsk' },   // Norwegian Nynorsk
-// { code: 'pl', name: 'Polski' },          // Polish
+   { code: 'pl', name: 'Polski' },          // Polish
   { code: 'pt', name: 'Português' },       // Portuguese
 // { code: 'pt-BR', name: 'Português (Brazil)' }, // Portuguese (Brazil)
 // { code: 'ro', name: 'Română' },          // Romanian
-// { code: 'ru', name: 'Русский' },         // Russian
+   { code: 'ru', name: 'Русский' },         // Russian
 // { code: 'sk', name: 'Slovenčina' },      // Slovak
   { code: 'sl', name: 'Slovenščina' },     // Slovenian
 // { code: 'sr', name: 'Српски / srpski' }, // Serbian
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -21,6 +21,8 @@ import { WebsocketService } from './services/websocket.service';
 import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
 import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
+import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
+import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
 import { AboutComponent } from './components/about/about.component';
 import { TelevisionComponent } from './components/television/television.component';
 import { StatisticsComponent } from './components/statistics/statistics.component';
@@ -31,7 +33,7 @@ import { FooterComponent } from './components/footer/footer.component';
 import { AudioService } from './services/audio.service';
 import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
 import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component';
-import { TimespanComponent } from './components/timespan/timespan.component';
+import { TimeSpanComponent } from './components/time-span/time-span.component';
 import { SeoService } from './services/seo.service';
 import { MempoolGraphComponent } from './components/mempool-graph/mempool-graph.component';
 import { AssetComponent } from './components/asset/asset.component';
@@ -43,18 +45,24 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
+  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
+import { CodeTemplateComponent } from './components/api-docs/code-template.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
+import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
+import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
+import { SponsorComponent } from './components/sponsor/sponsor.component';

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    MasterPageComponent,
+    BisqMasterPageComponent,
+    LiquidMasterPageComponent,
    TelevisionComponent,
    BlockchainComponent,
    StartComponent,
@@ -67,7 +75,7 @@ import { HttpCacheInterceptor } from './services/http-cache.interceptor';
    AmountComponent,
    LatestBlocksComponent,
    SearchFormComponent,
-    TimespanComponent,
+    TimeSpanComponent,
    AddressLabelsComponent,
    MempoolBlocksComponent,
    ChartistComponent,
@@ -82,7 +90,11 @@ import { HttpCacheInterceptor } from './services/http-cache.interceptor';
    FeesBoxComponent,
    DashboardComponent,
    ApiDocsComponent,
+    CodeTemplateComponent,
    TermsOfServiceComponent,
+    PrivacyPolicyComponent,
+    TrademarkPolicyComponent,
+    SponsorComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
@@ -127,5 +139,15 @@ export class AppModule {
    library.addIcons(faExchangeAlt);
    library.addIcons(faAngleDoubleUp);
    library.addIcons(faAngleDoubleDown);
+    library.addIcons(faChevronDown);
+    library.addIcons(faFileAlt);
+    library.addIcons(faRedoAlt);
+    library.addIcons(faArrowAltCircleRight);
+    library.addIcons(faExternalLinkAlt);
+    library.addIcons(faSortUp);
+    library.addIcons(faCaretUp);
+    library.addIcons(faCaretDown);
+    library.addIcons(faAngleRight);
+    library.addIcons(faAngleLeft);
  }
 }
--- a/frontend/src/app/assets/assets.component.html
+++ b/frontend/src/app/assets/assets.component.html
@@ -20,15 +20,13 @@
        <th i18n="Asset ticker header">Ticker</th>
        <th class="d-none d-md-block" i18n="Asset Issuer Domain header">Issuer domain</th>
        <th i18n="Asset ID header">Asset ID</th>
-        <th class="d-none d-lg-block" i18n="Asset issuance transaction header">Issuance TX</th>
      </thead>
      <tbody>
        <tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
-          <td class="td-name">{{ asset.name }}</td>
+          <td class="td-name"><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a></td>
          <td>{{ asset.ticker }}</td>
-          <td class="d-none d-md-block"><a *ngIf="asset.entity" target="_blank" href="{{ 'http://' + asset.entity.domain }}">{{ asset.entity.domain }}</a></td>
+          <td class="d-none d-md-block">{{ asset.entity && asset.entity.domain }}</td>
          <td><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
-          <td class="d-none d-lg-block"><ng-template [ngIf]="asset.issuance_txin"><a [routerLink]="['/tx/' | relativeUrl, asset.issuance_txin.txid]">{{ asset.issuance_txin.txid | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.issuance_txin.txid"></app-clipboard></ng-template></td>
        </tr> 
      </tbody>
    </table>
@@ -47,15 +45,13 @@
        <th i18n="Asset ticker header">Ticker</th>
        <th i18n="Asset Issuer Domain header">Issuer domain</th>
        <th i18n="Asset ID header">Asset ID</th>
-        <th i18n="Asset issuance transaction header">Issuance TX</th>
      </thead>
      <tbody>
-        <tr *ngFor="let dummy of [0,0,0]">
+        <tr *ngFor="let dummy of [0,0,0,0,0,0,0,0,0,0]">
          <td><span class="skeleton-loader"></span></td>
          <td><span class="skeleton-loader"></span></td>
          <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
          <td><span class="skeleton-loader"></span></td>
-          <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
        </tr> 
      </tbody>
    </table>
--- a/frontend/src/app/assets/assets.component.ts
+++ b/frontend/src/app/assets/assets.component.ts
@@ -107,7 +107,7 @@ export class AssetsComponent implements OnInit {
        const start = (this.page - 1) * this.itemsPerPage;
        if (searchText.length ) {
          const filteredAssets = this.assetsCache.filter((asset) => asset.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
-            || asset.ticker.toLowerCase().indexOf(searchText.toLowerCase()) > -1);
+            || (asset.ticker || '').toLowerCase().indexOf(searchText.toLowerCase()) > -1);
          this.assets = filteredAssets;
          return filteredAssets.slice(start, this.itemsPerPage + start);
        } else {
--- a/frontend/src/app/bisq/bisq-address/bisq-address.component.html
+++ b/frontend/src/app/bisq/bisq-address/bisq-address.component.html
@@ -1,10 +1,12 @@
 <div class="container-xl">
-  <h1 style="float: left;" i18n="shared.address">Address</h1>
-  <a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;">
-    <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
-    <span class="d-none d-lg-inline">{{ addressString }}</span>
-  </a>
-  <app-clipboard [text]="addressString"></app-clipboard>
+  <h1 i18n="shared.address">Address</h1>
+  <span class="address-link">
+    <a  [routerLink]="['/address/' | relativeUrl, addressString]">
+      <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
+      <span class="d-none d-lg-inline">{{ addressString }}</span>
+    </a>
+    <app-clipboard [text]="addressString"></app-clipboard>
+  </span>
  <br>

  <div class="clearfix"></div>
@@ -13,26 +15,26 @@
    <div class="box">

      <div class="row">
-        <div class="col">
+        <div class="col-md">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td i18n="address.total-received">Total received</td>
-                <td>{{ totalReceived / 100 | number: '1.2-2' }} BSQ</td>
+                <td>{{ totalReceived / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
              </tr>
              <tr>
                <td i18n="address.total-sent">Total sent</td>
-                <td>{{ totalSent / 100 | number: '1.2-2' }} BSQ</td>
+                <td>{{ totalSent / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
              </tr>
              <tr>
                <td i18n="address.balance">Balance</td>
-                <td>{{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="totalReceived - totalSent" [forceFiat]="true" [green]="true"></app-bsq-amount>)</td>
+                <td>{{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="totalReceived - totalSent" [forceFiat]="true" [green]="true"></app-bsq-amount></span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="w-100 d-block d-md-none"></div>
-        <div class="col qrcode-col">
+        <div class="col-md qrcode-col">
          <div class="qr-wrapper">
            <app-qrcode [data]="addressString"></app-qrcode>
          </div>
--- a/frontend/src/app/bisq/bisq-address/bisq-address.component.scss
+++ b/frontend/src/app/bisq/bisq-address/bisq-address.component.scss
@@ -3,21 +3,73 @@
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
-  margin-right: 25px;
 }

-@media (min-width: 576px) {
-  .qrcode-col {
-    text-align: right;
-  }
+.qrcode-col {
+  text-align: center;
 }
-@media (max-width: 575.98px) {
-  .qrcode-col {
+
+.qrcode-col > div {
+  margin: 20px auto 5px;
+  @media (min-width: 768px) {
    text-align: center;
+    margin: auto;
  }
+}

-  .qrcode-col > div {
-    margin-top: 20px;
-    margin-right: 0px;
+.fiat {
+  display: block;
+  font-size: 13px;
+  @media (min-width: 768px) {
+    display: inline-block;
+    font-size: 14px;
+    margin-left: 10px;
  }
+}
+.table {
+  tr td {
+    &:last-child {
+      text-align: right;
+      @media (min-width: 768px) {
+        text-align: left;
+      }
+    }
+  }
+}
+
+h1 {
+  margin: 0px;
+  padding: 0px;
+  @media (min-width: 576px) {
+    float: left;
+    margin-right: 10px;
+  }
+}
+
+.address-link {
+  line-height: 26px;
+  margin-left: 0px;
+  top: 14px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  @media (min-width: 768px) {
+    line-height: 38px;
+  }
+}
+
+.row{
+	flex-direction: column;
+	@media (min-width: 576px) {
+		flex-direction: row;
+	}
+}
+
+@media (max-width: 767.98px) {
+	.mobile-bottomcol {
+		margin-top: 15px;
+	}
+	.details-table td:first-child {
+		white-space: pre-wrap;
+	}
 }
--- a/frontend/src/app/bisq/bisq-address/bisq-address.component.ts
+++ b/frontend/src/app/bisq/bisq-address/bisq-address.component.ts
@@ -5,6 +5,7 @@ import { ParamMap, ActivatedRoute } from '@angular/router';
 import { Subscription, of } from 'rxjs';
 import { BisqTransaction } from '../bisq.interfaces';
 import { BisqApiService } from '../bisq-api.service';
+import { WebsocketService } from 'src/app/services/websocket.service';

@Component({
  selector: 'app-bisq-address',
@@ -22,12 +23,15 @@ export class BisqAddressComponent implements OnInit, OnDestroy {
  totalSent = 0;

  constructor(
+    private websocketService: WebsocketService,
    private route: ActivatedRoute,
    private seoService: SeoService,
    private bisqApiService: BisqApiService,
  ) { }

  ngOnInit() {
+    this.websocketService.want(['blocks']);
+
    this.mainSubscription = this.route.paramMap
      .pipe(
        switchMap((params: ParamMap) => {
--- a/frontend/src/app/bisq/bisq-api.service.ts
+++ b/frontend/src/app/bisq/bisq-api.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpResponse, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { BisqTransaction, BisqBlock, BisqStats } from './bisq.interfaces';
+import { BisqTransaction, BisqBlock, BisqStats, MarketVolume, Trade, Markets, Tickers, Offers, Currencies, HighLowOpenClose, SummarizedInterval } from './bisq.interfaces';

 const API_BASE_URL = '/bisq/api';

@@ -42,4 +42,37 @@ export class BisqApiService {
  getAddress$(address: string): Observable<BisqTransaction[]> {
    return this.httpClient.get<BisqTransaction[]>(API_BASE_URL + '/address/' + address);
  }
+
+  getMarkets$(): Observable<Markets> {
+    return this.httpClient.get<Markets>(API_BASE_URL + '/markets/markets');
+  }
+
+  getMarketsTicker$(): Observable<Tickers> {
+    return this.httpClient.get<Tickers>(API_BASE_URL + '/markets/ticker');
+  }
+
+  getMarketsCurrencies$(): Observable<Currencies> {
+    return this.httpClient.get<Currencies>(API_BASE_URL + '/markets/currencies');
+  }
+
+  getMarketsHloc$(market: string, interval: 'minute' | 'half_hour' | 'hour' | 'half_day' | 'day'
+  | 'week' | 'month' | 'year' | 'auto'): Observable<SummarizedInterval[]> {
+    return this.httpClient.get<SummarizedInterval[]>(API_BASE_URL + '/markets/hloc?market=' + market + '&interval=' + interval);
+  }
+
+  getMarketOffers$(market: string): Observable<Offers> {
+    return this.httpClient.get<Offers>(API_BASE_URL + '/markets/offers?market=' + market);
+  }
+
+  getMarketTrades$(market: string): Observable<Trade[]> {
+    return this.httpClient.get<Trade[]>(API_BASE_URL + '/markets/trades?market=' + market);
+  }
+
+  getMarketVolumesByTime$(period: string): Observable<HighLowOpenClose[]> {
+    return this.httpClient.get<HighLowOpenClose[]>(API_BASE_URL + '/markets/volumes/' + period);
+  }
+
+  getAllVolumesDay$(): Observable<MarketVolume[]> {
+    return this.httpClient.get<MarketVolume[]>(API_BASE_URL + '/markets/volumes?interval=week');
+  }
 }
--- a/frontend/src/app/bisq/bisq-block/bisq-block.component.html
+++ b/frontend/src/app/bisq/bisq-block/bisq-block.component.html
@@ -8,9 +8,9 @@

  <ng-template [ngIf]="!isLoading && !error">

-    <div class="box">
+    <div class="box block-container">
      <div class="row">
-        <div class="col-sm">
+        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
@@ -22,13 +22,13 @@
                <td>
                  {{ block.time | date:'yyyy-MM-dd HH:mm' }}
                  <div class="lg-inline">
-                    <i>(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since>)</i>
+                    <i class="symbol">(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since>)</i>
                  </div>
                </td>
              </tr>
          </table>
        </div>
-        <div class="col-sm">
+        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
@@ -73,7 +73,7 @@
  <ng-template [ngIf]="isLoading && !error">
    <div class="box">
      <div class="row">
-        <div class="col-sm">
+        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
@@ -86,7 +86,7 @@
              </tr>
          </table>
        </div>
-        <div class="col-sm">
+        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
--- a/frontend/src/app/bisq/bisq-block/bisq-block.component.scss
+++ b/frontend/src/app/bisq/bisq-block/bisq-block.component.scss
@@ -1,10 +1,44 @@
-
 .td-width {
-  width: 175px;
-}
-
-@media (max-width: 767.98px) {
-	.td-width {
-		width: 140px;
+	width: 140px;
+	@media (min-width: 768px) {
+		width: 175px;
 	}
 }
+
+h1 {
+	margin: 0px;
+	padding: 0px;
+	@media (min-width: 576px) {
+		float: left;
+		margin-right: 10px;
+	}
+}
+
+.row{
+	flex-direction: column;
+	@media (min-width: 768px) {
+		flex-direction: row;
+	}
+}
+
+.block-container {	
+	.table {
+		tr td {
+			&:last-child {
+				text-align: right;
+				@media (min-width: 992px) {
+					text-align: left;
+				}
+			}
+		}
+	}
+	.fiat {
+		display: block;
+		font-size: 13px;
+		@media (min-width: 992px) {
+			display: inline-block;
+			font-size: 14px;
+			margin-left: 10px;
+		}
+	}
+}
--- a/frontend/src/app/bisq/bisq-block/bisq-block.component.ts
+++ b/frontend/src/app/bisq/bisq-block/bisq-block.component.ts
@@ -8,6 +8,7 @@ import { switchMap, catchError } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { ElectrsApiService } from 'src/app/services/electrs-api.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { WebsocketService } from 'src/app/services/websocket.service';

@Component({
  selector: 'app-bisq-block',
@@ -23,6 +24,7 @@ export class BisqBlockComponent implements OnInit, OnDestroy {
  error: HttpErrorResponse | null;

  constructor(
+    private websocketService: WebsocketService,
    private bisqApiService: BisqApiService,
    private route: ActivatedRoute,
    private seoService: SeoService,
@@ -32,6 +34,8 @@ export class BisqBlockComponent implements OnInit, OnDestroy {
  ) { }

  ngOnInit(): void {
+    this.websocketService.want(['blocks']);
+
    this.subscription = this.route.paramMap
      .pipe(
        switchMap((params: ParamMap) => {
--- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
+++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
@@ -1,5 +1,5 @@
-<div class="container-xl">
-  <h1 style="float: left;" i18n="Bisq blocks header">Blocks</h1>
+<div class="container-xl" (window:resize)="onResize($event)">
+  <h1 style="float: left;" i18n="Bisq blocks header">BSQ Blocks</h1>
  <br>

  <div class="clearfix"></div>
@@ -18,7 +18,7 @@
        <tr *ngFor="let block of blocks.value[0]; trackBy: trackByFn">
          <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
          <td><app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since></td>
-          <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span></td>
+          <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
          <td class="d-none d-md-block">{{ block.txs.length }}</td>
        </tr> 
      </tbody>
@@ -26,9 +26,7 @@
  </div>

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

--- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss
+++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss
@@ -0,0 +1,11 @@
+.pagination-container {
+  float: none;
+  margin-bottom: 200px;
+  @media(min-width: 400px){
+    float: right;
+  }
+}
+
+.container-xl {
+    padding-bottom: 110px;
+}
--- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts
+++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts
@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
 import { SeoService } from 'src/app/services/seo.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { WebsocketService } from 'src/app/services/websocket.service';

@Component({
  selector: 'app-bisq-blocks',
@@ -22,9 +23,10 @@ export class BisqBlocksComponent implements OnInit {
  isLoading = true;
  // @ts-ignore
  paginationSize: 'sm' | 'lg' = 'md';
-  paginationMaxSize = 10;
+  paginationMaxSize = 5;

  constructor(
+    private websocketService: WebsocketService,
    private bisqApiService: BisqApiService,
    private seoService: SeoService,
    private route: ActivatedRoute,
@@ -32,10 +34,11 @@ export class BisqBlocksComponent implements OnInit {
  ) { }

  ngOnInit(): void {
+    this.websocketService.want(['blocks']);
    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;
    }
@@ -80,4 +83,8 @@ export class BisqBlocksComponent implements OnInit {
      queryParamsHandling: 'merge',
    });
  }
+
+  onResize(event: any) {
+    this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
+  }
 }
--- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
+++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
@@ -0,0 +1,63 @@
+<div class="container-xl">
+
+  <h1 i18n="Bisq markets title">Bisq Trading Volume</h1>
+
+  <div id="volumeHolder">
+    <ng-template #loadingVolumes>
+      <div class="text-center loadingVolumes">
+        <div class="spinner-border text-light"></div>
+      </div>  
+    </ng-template>
+    <ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes">
+      <app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
+    </ng-container>
+  </div>
+
+  <br><br>
+
+  <div class="container-info">
+    <h1>
+      <ng-template [ngIf]="stateService.env.BASE_MODULE === 'bisq'" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
+      <ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
+    </h1>
+    <ng-container *ngIf="{ value: (tickers$ | async) } as tickers">
+      <div class="table-container">
+        <table class="table table-borderless table-striped">
+          <thead>
+            <th><ng-container i18n>Currency</ng-container> <button [disabled]="(sort$ | async) === 'name'" class="btn btn-link btn-sm" (click)="sort('name')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
+            <th i18n>Price</th>
+            <th><ng-container i18n="Trading volume 7D">Volume (7d)</ng-container> <button [disabled]="(sort$ | async) === 'volumes'" class="btn btn-link btn-sm" (click)="sort('volumes')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
+            <th><ng-container i18n="Trades amount 7D">Trades (7d)</ng-container> <button [disabled]="(sort$ | async) === 'trades'" class="btn btn-link btn-sm" (click)="sort('trades')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
+          </thead>
+          <tbody *ngIf="tickers.value; else loadingTmpl">
+            <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn;">
+              <td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.name }})</a></td>
+              <td>
+                <app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
+                <ng-template #fiat>
+                  <span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span>
+                </ng-template>
+              </td>
+              <td>
+                <app-fiat [value]="ticker.volume?.volume"></app-fiat>
+              </td>
+              <td>{{ ticker.volume?.num_trades ? ticker.volume?.num_trades : 0 }}</td>
+            </tr> 
+          </tbody>
+        </table>
+      </div>
+
+      <br><br>
+
+      <h2 i18n="Latest Trades header">Latest Trades</h2>
+      <app-bisq-trades [trades$]="trades$"></app-bisq-trades>
+
+    </ng-container>
+  </div>
+</div>
+
+<ng-template #loadingTmpl>
+  <tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
+    <td *ngFor="let j of [1, 2, 3, 4]"><span class="skeleton-loader"></span></td>
+  </tr>
+</ng-template>
--- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss
+++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss
@@ -0,0 +1,22 @@
+#volumeHolder {
+    height: 500px;
+    background-color: #000;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+}
+
+.table {
+    max-width: 100%;
+    overflow: scroll;
+}
+
+.loadingVolumes {
+    position: relative;
+    top: 45%;
+    z-index: 100;
+}
+
+.container-info{
+    overflow-x: scroll;
+}
--- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts
+++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts
@@ -0,0 +1,131 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Observable, combineLatest, BehaviorSubject, of } from 'rxjs';
+import { map, share, switchMap } from 'rxjs/operators';
+import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { BisqApiService } from '../bisq-api.service';
+import { Trade } from '../bisq.interfaces';
+
+@Component({
+  selector: 'app-bisq-dashboard',
+  templateUrl: './bisq-dashboard.component.html',
+  styleUrls: ['./bisq-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BisqDashboardComponent implements OnInit {
+  tickers$: Observable<any>;
+  volumes$: Observable<any>;
+  trades$: Observable<Trade[]>;
+  sort$ = new BehaviorSubject<string>('trades');
+
+  allowCryptoCoins = ['usdc', 'l-btc', 'bsq'];
+
+  constructor(
+    private websocketService: WebsocketService,
+    private bisqApiService: BisqApiService,
+    public stateService: StateService,
+    private seoService: SeoService,
+  ) { }
+
+  ngOnInit(): void {
+    this.seoService.setTitle(`Markets`);
+    this.websocketService.want(['blocks']);
+
+    this.volumes$ = this.bisqApiService.getAllVolumesDay$()
+      .pipe(
+        map((volumes) => {
+          const data = volumes.map((volume) => {
+            return {
+              time: volume.period_start,
+              value: volume.volume,
+            };
+          });
+
+          const linesData = volumes.map((volume) => {
+            return {
+              time: volume.period_start,
+              value: volume.num_trades,
+            };
+          });
+
+          return {
+            data: data,
+            linesData: linesData,
+          };
+        })
+      );
+
+    const getMarkets = this.bisqApiService.getMarkets$().pipe(share());
+
+    this.tickers$ = combineLatest([
+      this.bisqApiService.getMarketsTicker$(),
+      getMarkets,
+      this.bisqApiService.getMarketVolumesByTime$('7d'),
+    ])
+    .pipe(
+      map(([tickers, markets, volumes]) => {
+
+        const newTickers = [];
+        for (const t in tickers) {
+
+          if (this.stateService.env.BASE_MODULE !== 'bisq') {
+            const pair = t.split('_');
+            if (pair[1] === 'btc' && this.allowCryptoCoins.indexOf(pair[0]) === -1) {
+              continue;
+            }
+          }
+
+          const mappedTicker: any = tickers[t];
+
+          mappedTicker.pair_url = t;
+          mappedTicker.pair = t.replace('_', '/').toUpperCase();
+          mappedTicker.market = markets[t];
+          mappedTicker.volume = volumes[t];
+          mappedTicker.name = `${mappedTicker.market.rtype === 'crypto' ? mappedTicker.market.lname : mappedTicker.market.rname} (${mappedTicker.market.rtype === 'crypto' ? mappedTicker.market.lsymbol : mappedTicker.market.rsymbol}`;
+          newTickers.push(mappedTicker);
+        }
+        return newTickers;
+      }),
+      switchMap((tickers) => combineLatest([this.sort$, of(tickers)])),
+      map(([sort, tickers]) => {
+        if (sort === 'trades') {
+          tickers.sort((a, b) => (b.volume && b.volume.num_trades || 0) - (a.volume && a.volume.num_trades || 0));
+        } else if (sort === 'volumes') {
+          tickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0));
+        } else if (sort === 'name') {
+          tickers.sort((a, b) => a.name.localeCompare(b.name));
+        }
+        return tickers;
+      })
+    );
+
+    this.trades$ = combineLatest([
+      this.bisqApiService.getMarketTrades$('all'),
+      getMarkets,
+    ])
+    .pipe(
+      map(([trades, markets]) => {
+        if (this.stateService.env.BASE_MODULE !== 'bisq') {
+          trades = trades.filter((trade) => {
+            const pair = trade.market.split('_');
+            return !(pair[1] === 'btc' && this.allowCryptoCoins.indexOf(pair[0]) === -1);
+          });
+        }
+        return trades.map((trade => {
+          trade._market = markets[trade.market];
+          return trade;
+        }));
+      })
+    );
+  }
+
+  trackByFn(index: number) {
+    return index;
+  }
+
+  sort(by: string) {
+    this.sort$.next(by);
+  }
+
+}
--- a/frontend/src/app/bisq/bisq-explorer/bisq-explorer.component.html
+++ b/frontend/src/app/bisq/bisq-explorer/bisq-explorer.component.html
@@ -1 +0,0 @@
-<router-outlet></router-outlet>
--- a/frontend/src/app/bisq/bisq-explorer/bisq-explorer.component.ts
+++ b/frontend/src/app/bisq/bisq-explorer/bisq-explorer.component.ts
@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { WebsocketService } from 'src/app/services/websocket.service';
-
-@Component({
-  selector: 'app-bisq-explorer',
-  templateUrl: './bisq-explorer.component.html',
-  styleUrls: ['./bisq-explorer.component.scss']
-})
-export class BisqExplorerComponent implements OnInit {
-
-  constructor(
-    private websocketService: WebsocketService,
-  ) { }
-
-  ngOnInit(): void {
-    this.websocketService.want(['blocks']);
-  }
-}
--- a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html
+++ b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html
@@ -0,0 +1,130 @@
+<div class="container-xl">
+
+  <br>
+
+  <div class="row row-cols-1 row-cols-md-2">
+    <div class="col mb-4">
+      <div class="card text-center">
+        <div class="card-body">
+          <h5 class="card-title" i18n="bisq-dashboard.price-index-title">Bisq Price Index</h5>
+          <div class="big-fiat">
+            <span *ngIf="usdPrice$ | async as usdPrice; else loading">
+              <span [appColoredPrice]="usdPrice">{{ usdPrice | currency:'USD':'symbol':'1.2-2' }}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col mb-4">
+      <div class="card text-center">
+        <div class="card-body">
+          <h5 class="card-title" i18n="bisq-dashboard.market-price-title">Bisq Market Price</h5>
+          <div class="big-fiat">
+            <span class="green-color" *ngIf="bisqMarketPrice; else loading">
+              <span [appColoredPrice]="bisqMarketPrice">{{ bisqMarketPrice | currency:'USD':'symbol':'1.2-2' }}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row row-cols-1 row-cols-md-2">
+    <div class="col mb-4">
+      <div class="card text-center">
+        <div class="card-body">
+          <h5 class="card-title">US Dollar - BTC/USD</h5>
+          <div class="chart-container">
+            <ng-container *ngIf="hlocData$ | async as hlocData; else loadingSpinner">
+              <app-lightweight-charts [height]="300" [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="2"></app-lightweight-charts>      
+            </ng-container>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col mb-4">
+      <div class="card text-center">
+        <div class="card-body">
+          <h5 class="card-title" i18n="Bisq markets title">Bisq Trading Volume</h5>
+          <div class="chart-container">
+            <ng-container *ngIf="volumes$ | async as volumes; else loadingSpinner">
+              <app-lightweight-charts-area [height]="300" [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
+            </ng-container>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row row-cols-1 row-cols-md-2">
+    <ng-container *ngIf="{ value: (tickers$ | async) } as tickers">
+
+    <div class="col mb-4">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title text-center">
+            <ng-template [ngIf]="stateService.env.BASE_MODULE === 'bisq'" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
+            <ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
+          </h5>
+
+          <div class="table-container">
+            <table class="table table-borderless table-striped">
+              <thead>
+                <th><ng-container i18n>Currency</ng-container> <button [disabled]="(sort$ | async) === 'name'" class="btn btn-link btn-sm" (click)="sort('name')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
+                <th i18n>Price</th>
+                <th><ng-container i18n="Trades amount 7D">Trades (7d)</ng-container> <button [disabled]="(sort$ | async) === 'trades'" class="btn btn-link btn-sm" (click)="sort('trades')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
+              </thead>
+              <tbody *ngIf="tickers.value; else loadingTmpl">
+                <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn;">
+                  <td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.name }})</a></td>
+                  <td>
+                    <app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
+                    <ng-template #fiat>
+                      <span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span>
+                    </ng-template>
+                  </td>
+                  <td>{{ ticker.volume?.num_trades ? ticker.volume?.num_trades : 0 }}</td>
+                </tr> 
+              </tbody>
+            </table>
+          </div>
+
+          <div class="text-center"><a href="" [routerLink]="['/markets' | relativeUrl]" i18n="dashboard.view-all">View all &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+    <div class="col mb-4">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title text-center" i18n="Latest Trades header">Latest Trades</h5>
+          <app-bisq-trades [trades$]="trades$" view="small"></app-bisq-trades>
+          <div class="text-center"><a href="" [routerLink]="['/markets' | relativeUrl]" i18n="dashboard.view-all">View all &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+  </div>
+
+  <app-language-selector *ngIf="stateService.env.BASE_MODULE !== 'bisq'"></app-language-selector>
+
+  <div class="text-small text-center mt-3">
+    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+  </div>
+
+</div>
+
+<ng-template #loadingTmpl>
+  <tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
+    <td *ngFor="let j of [1, 2, 3]"><span class="skeleton-loader"></span></td>
+  </tr>
+</ng-template>
+
+<ng-template #loadingSpinner>
+  <div class="text-center loadingGraphs">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>
+
+<ng-template #loading>
+  <div class="skeleton-loader shorter"></div>
+</ng-template>
--- a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss
+++ b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss
@@ -0,0 +1,112 @@
+#volumeHolder {
+    height: 500px;
+    background-color: #000;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+}
+
+.table {
+    max-width: 100%;
+    overflow: scroll;
+}
+
+.loadingGraphs {
+    position: relative;
+    top: 45%;
+    z-index: 100;
+}
+
+.table-container {
+  overflow: scroll;
+  scrollbar-width: none;
+  font-size: 13px;
+  &::-webkit-scrollbar {
+      display: none;
+  }
+  @media(min-width: 576px){
+      font-size: 16px;
+  }
+  thead th{
+    text-align: right;
+    &:first-child {
+      text-align: left;
+    }
+    &:nth-child(3) {
+      display: none;
+      @media(min-width: 1100px){
+        display: table-cell;
+      }
+    }
+  }
+  tr {
+    td {
+      text-align: right;
+      &:first-child {
+        text-align: left;
+      }
+      &:nth-child(3) {
+        display: none;
+        @media(min-width: 1100px){
+          display: table-cell;
+        }
+      }
+    }
+  }
+}
+
+
+.chart-container {
+  height: 300px;
+}
+
+.big-fiat {
+  color: #3bcc49;
+  font-size: 26px;
+}
+
+
+  .card {
+    background-color: #1d1f31;
+    height: 100%;
+  }
+
+  .card-title {
+    color: #4a68b9;
+    font-size: 1rem;
+  }
+
+  .info-block {
+    float: left;
+    width: 350px;
+    line-height: 25px;
+  }
+
+  .progress {
+    display: inline-flex;
+    width: 100%;
+    background-color: #2d3348;
+    height: 1.1rem;
+  }
+
+  .bg-warning {
+    background-color: #b58800 !important;
+  }
+
+  .skeleton-loader {
+    max-width: 100%;
+    &.shorter {
+      max-width: 150px;
+    }
+  }
+
+  .more-padding {
+    padding: 1.25rem 2rem 1.25rem 2rem;
+  }
+
+  .graph-card {
+    height: 100%;
+    @media (min-width: 992px) {
+      height: 385px;
+    }
+  }
--- a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.ts
+++ b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.ts
@@ -0,0 +1,192 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Observable, combineLatest, BehaviorSubject, of } from 'rxjs';
+import { map, share, switchMap } from 'rxjs/operators';
+import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { BisqApiService } from '../bisq-api.service';
+import { Trade } from '../bisq.interfaces';
+
+@Component({
+  selector: 'app-main-bisq-dashboard',
+  templateUrl: './bisq-main-dashboard.component.html',
+  styleUrls: ['./bisq-main-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BisqMainDashboardComponent implements OnInit {
+  tickers$: Observable<any>;
+  volumes$: Observable<any>;
+  trades$: Observable<Trade[]>;
+  sort$ = new BehaviorSubject<string>('trades');
+  hlocData$: Observable<any>;
+  usdPrice$: Observable<number>;
+  isLoadingGraph = true;
+  bisqMarketPrice = 0;
+
+  allowCryptoCoins = ['usdc', 'l-btc', 'bsq'];
+
+  constructor(
+    private websocketService: WebsocketService,
+    private bisqApiService: BisqApiService,
+    public stateService: StateService,
+    private seoService: SeoService,
+  ) { }
+
+  ngOnInit(): void {
+    this.seoService.setTitle(`Markets`);
+    this.websocketService.want(['blocks']);
+
+    this.usdPrice$ = this.stateService.conversions$.asObservable().pipe(
+      map((conversions) => conversions.USD)
+    );
+
+    this.volumes$ = this.bisqApiService.getAllVolumesDay$()
+      .pipe(
+        map((volumes) => {
+          const data = volumes.map((volume) => {
+            return {
+              time: volume.period_start,
+              value: volume.volume,
+            };
+          });
+
+          const linesData = volumes.map((volume) => {
+            return {
+              time: volume.period_start,
+              value: volume.num_trades,
+            };
+          });
+
+          return {
+            data: data,
+            linesData: linesData,
+          };
+        })
+      );
+
+    const getMarkets = this.bisqApiService.getMarkets$().pipe(share());
+
+    this.tickers$ = combineLatest([
+      this.bisqApiService.getMarketsTicker$(),
+      getMarkets,
+      this.bisqApiService.getMarketVolumesByTime$('7d'),
+    ])
+    .pipe(
+      map(([tickers, markets, volumes]) => {
+
+        const newTickers = [];
+        for (const t in tickers) {
+
+          if (this.stateService.env.BASE_MODULE !== 'bisq') {
+            const pair = t.split('_');
+            if (pair[1] === 'btc' && this.allowCryptoCoins.indexOf(pair[0]) === -1) {
+              continue;
+            }
+          }
+
+          const mappedTicker: any = tickers[t];
+
+          mappedTicker.pair_url = t;
+          mappedTicker.pair = t.replace('_', '/').toUpperCase();
+          mappedTicker.market = markets[t];
+          mappedTicker.volume = volumes[t];
+          mappedTicker.name = `${mappedTicker.market.rtype === 'crypto' ? mappedTicker.market.lname : mappedTicker.market.rname} (${mappedTicker.market.rtype === 'crypto' ? mappedTicker.market.lsymbol : mappedTicker.market.rsymbol}`;
+          newTickers.push(mappedTicker);
+        }
+        return newTickers;
+      }),
+      switchMap((tickers) => combineLatest([this.sort$, of(tickers)])),
+      map(([sort, tickers]) => {
+        if (sort === 'trades') {
+          tickers.sort((a, b) => (b.volume && b.volume.num_trades || 0) - (a.volume && a.volume.num_trades || 0));
+        } else if (sort === 'volumes') {
+          tickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0));
+        } else if (sort === 'name') {
+          tickers.sort((a, b) => a.name.localeCompare(b.name));
+        }
+        return tickers.slice(0, 10);
+      })
+    );
+
+    this.trades$ = combineLatest([
+      this.bisqApiService.getMarketTrades$('all'),
+      getMarkets,
+    ])
+    .pipe(
+      map(([trades, markets]) => {
+        if (this.stateService.env.BASE_MODULE !== 'bisq') {
+          trades = trades.filter((trade) => {
+            const pair = trade.market.split('_');
+            return !(pair[1] === 'btc' && this.allowCryptoCoins.indexOf(pair[0]) === -1);
+          });
+        }
+        return trades.map((trade => {
+          trade._market = markets[trade.market];
+          return trade;
+        })).slice(0, 10);
+      })
+    );
+
+    this.hlocData$ = this.bisqApiService.getMarketsHloc$('btc_usd', 'day')
+      .pipe(
+      map((hlocData) => {
+        this.isLoadingGraph = false;
+
+        hlocData = hlocData.map((h) => {
+          h.time = h.period_start;
+          return h;
+        });
+
+        const hlocVolume = hlocData.map((h) => {
+          return {
+            time: h.time,
+            value: h.volume_right,
+            color: h.close > h.avg ? 'rgba(0, 41, 74, 0.7)' : 'rgba(0, 41, 74, 1)',
+          };
+        });
+
+        // Add whitespace
+        if (hlocData.length > 1) {
+          const newHloc = [];
+          newHloc.push(hlocData[0]);
+
+          const period = 86400;
+          let periods = 0;
+          const startingDate = hlocData[0].period_start;
+          let index = 1;
+          while (true) {
+            periods++;
+            if (hlocData[index].period_start > startingDate + period * periods) {
+              newHloc.push({
+                time: startingDate + period * periods,
+              });
+            } else {
+              newHloc.push(hlocData[index]);
+              index++;
+              if (!hlocData[index]) {
+                break;
+              }
+            }
+          }
+          hlocData = newHloc;
+        }
+
+        this.bisqMarketPrice = hlocData[hlocData.length - 1].close;
+
+        return {
+          hloc: hlocData,
+          volume: hlocVolume,
+        };
+      }),
+    );
+  }
+
+  trackByFn(index: number) {
+    return index;
+  }
+
+  sort(by: string) {
+    this.sort$.next(by);
+  }
+
+}
--- a/frontend/src/app/bisq/bisq-market/bisq-market.component.html
+++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.html
@@ -0,0 +1,112 @@
+<div class="container-xl">
+
+  <ng-container *ngIf="hlocData$ | async as hlocData; else loadingSpinner">
+
+    <ng-container *ngIf="currency$ | async as currency; else loadingSpinner">
+      <h1>{{ currency.market.rtype === 'crypto' ? currency.market.lname : currency.market.rname }} - {{ currency.pair }}</h1>
+      <div class="priceheader">
+          <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
+          <ng-template #headerPriceCrypto>{{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
+      </div>
+  
+      <form [formGroup]="radioGroupForm" class="mb-3 radio-form">
+        <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
+          <label ngbButtonLabel class="btn-primary btn-sm">
+            <input ngbButton type="radio" [value]="'half_hour'" (click)="setFragment('half_hour')"> 30M
+          </label>
+          <label ngbButtonLabel class="btn-primary btn-sm">
+            <input ngbButton type="radio" [value]="'hour'" (click)="setFragment('hour')"> 1H
+          </label>
+          <label ngbButtonLabel class="btn-primary btn-sm">
+            <input ngbButton type="radio" [value]="'half_day'" (click)="setFragment('half_day')"> 12H
+          </label>
+          <label ngbButtonLabel class="btn-primary btn-sm">
+            <input ngbButton type="radio" [value]="'day'" (click)="setFragment('day')"> 1D
+          </label>
+          <label ngbButtonLabel class="btn-primary btn-sm">
+            <input ngbButton type="radio" [value]="'week'" (click)="setFragment('week')"> 1W
+          </label>
+          <label ngbButtonLabel class="btn-primary btn-sm">
+            <input ngbButton type="radio" [value]="'month'" (click)="setFragment('month')"> 1M
+          </label>
+          <label ngbButtonLabel class="btn-primary btn-sm">
+            <input ngbButton type="radio" [value]="'year'" (click)="setFragment('year')"> 1Y
+          </label>
+        </div>
+      </form>
+
+      <div class="clearfix"></div>
+
+      <div id="graphHolder">
+        <div class="text-center loadingChart" [hidden]="!isLoadingGraph">
+          <div class="spinner-border text-light"></div>
+        </div>
+        <app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>      
+      </div>
+
+      <br>
+
+      <ng-container *ngIf="offers$ | async as offers; else loadingSpinner">
+        <div class="row row-cols-1 row-cols-md-2">
+          <ng-container *ngTemplateOutlet="offersList; context: { offers: offers.buys, direction: 'BUY', market: currency.market }"></ng-container>
+          <ng-container *ngTemplateOutlet="offersList; context: { offers: offers.sells, direction: 'SELL', market: currency.market }"></ng-container>
+        </div>
+      </ng-container>
+
+      <br><br>
+
+      <ng-container *ngIf="trades$ | async as trades; else loadingSpinner">
+        <h2 i18n="Latest Trades header">Latest Trades</h2>
+
+        <app-bisq-trades [trades$]="trades$" [market]="currency.market"></app-bisq-trades>
+      </ng-container>
+
+    </ng-container>
+  </ng-container>
+
+</div>
+
+
+<ng-template #offersList let-offers="offers" let-direction="direction", let-market="market">
+  <div class="col">
+    <h2>
+      <ng-template [ngIf]="direction === 'BUY'" [ngIfElse]="sellOffers" i18n="Bisq Buy Offers">Buy Offers</ng-template>
+      <ng-template #sellOffers i18n="Bisq Sell Offers">Sell Offers</ng-template>
+    </h2>
+    <div class="table-container">
+      <table class="table table-borderless table-striped">
+        <thead>
+          <th i18n>Price</th>
+          <th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol }"></ng-container></th>
+          <th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.rsymbol }"></ng-container></th>
+        </thead>
+        <tbody>
+          <tr *ngFor="let offer of offers">
+            <td>
+              <ng-container *ngIf="market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ offer.price | currency: market.rsymbol }}</span></ng-container>
+              <ng-template #priceCrypto>{{ offer.price | number: '1.2-' + market.rprecision }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
+            </td>
+            <td>
+              <ng-container *ngIf="market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ offer.amount | currency: market.rsymbol }}</span></ng-container>
+              <ng-template #amountCrypto>{{ offer.amount | number: '1.2-' + market.lprecision }} <span class="symbol">{{ market.lsymbol }}</span></ng-template>
+            </td>
+            <td>
+              <ng-container *ngIf="market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ offer.volume | currency: market.rsymbol }}</span></ng-container>
+              <ng-template #volumeCrypto>{{ offer.volume | number: '1.2-' + market.rprecision }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
+            </td>
+          </tr> 
+        </tbody>
+      </table>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #loadingSpinner>
+  <br>
+  <br>
+  <div class="text-center">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>
+
+<ng-template #amount let-i i18n="Trade amount (Symbol)">Amount ({{ i }})</ng-template>
--- a/frontend/src/app/bisq/bisq-market/bisq-market.component.scss
+++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.scss
@@ -0,0 +1,46 @@
+.priceheader {
+    font-size: 24px;
+    @media(min-width: 576px){
+        float: left;
+    }
+}
+
+.radio-form {
+    @media(min-width: 576px){
+        float: right;
+    }
+}
+
+.loadingChart {
+    z-index: 100;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}
+
+#graphHolder {
+    height: 550px;
+    overflow: hidden;
+}
+
+.col {
+    &:last-child{
+        margin-top: 50px;
+        @media(min-width: 576px){
+            margin-top: 0px;
+        }
+    }
+}
+
+.table-container {
+    overflow: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    font-size: 13px;
+    @media(min-width: 576px){
+        font-size: 16px;
+    }
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
--- a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts
+++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts
@@ -0,0 +1,158 @@
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { combineLatest, merge, Observable, of } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { SeoService } from 'src/app/services/seo.service';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { BisqApiService } from '../bisq-api.service';
+import { OffersMarket, Trade } from '../bisq.interfaces';
+
+@Component({
+  selector: 'app-bisq-market',
+  templateUrl: './bisq-market.component.html',
+  styleUrls: ['./bisq-market.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BisqMarketComponent implements OnInit, OnDestroy {
+  hlocData$: Observable<any>;
+  currency$: Observable<any>;
+  offers$: Observable<OffersMarket>;
+  trades$: Observable<Trade[]>;
+  radioGroupForm: FormGroup;
+  defaultInterval = 'day';
+
+  isLoadingGraph = false;
+
+  constructor(
+    private websocketService: WebsocketService,
+    private route: ActivatedRoute,
+    private bisqApiService: BisqApiService,
+    private formBuilder: FormBuilder,
+    private seoService: SeoService,
+    private router: Router,
+  ) { }
+
+  ngOnInit(): void {
+    this.radioGroupForm = this.formBuilder.group({
+      interval: [this.defaultInterval],
+    });
+
+    if (['half_hour', 'hour', 'half_day', 'day', 'week', 'month', 'year', 'auto'].indexOf(this.route.snapshot.fragment) > -1) {
+      this.radioGroupForm.controls.interval.setValue(this.route.snapshot.fragment, { emitEvent: false });
+    }
+
+    this.currency$ = this.bisqApiService.getMarkets$()
+      .pipe(
+        switchMap((markets) => combineLatest([of(markets), this.route.paramMap])),
+        map(([markets, routeParams]) => {
+          const pair = routeParams.get('pair');
+          const pairUpperCase = pair.replace('_', '/').toUpperCase();
+          this.seoService.setTitle(`Bisq market: ${pairUpperCase}`);
+
+          return {
+            pair: pairUpperCase,
+            market: markets[pair],
+          };
+        })
+      );
+
+    this.trades$ = this.route.paramMap
+      .pipe(
+        map(routeParams => routeParams.get('pair')),
+        switchMap((marketPair) => this.bisqApiService.getMarketTrades$(marketPair)),
+      );
+
+    this.offers$ = this.route.paramMap
+      .pipe(
+        map(routeParams => routeParams.get('pair')),
+        switchMap((marketPair) => this.bisqApiService.getMarketOffers$(marketPair)),
+        map((offers) => offers[Object.keys(offers)[0]])
+      );
+
+    this.hlocData$ = combineLatest([
+      this.route.paramMap,
+      merge(this.radioGroupForm.get('interval').valueChanges, of(this.radioGroupForm.get('interval').value)),
+    ])
+    .pipe(
+      switchMap(([routeParams, interval]) => {
+        this.isLoadingGraph = true;
+        const pair = routeParams.get('pair');
+        return this.bisqApiService.getMarketsHloc$(pair, interval);
+      }),
+      map((hlocData) => {
+        this.isLoadingGraph = false;
+
+        hlocData = hlocData.map((h) => {
+          h.time = h.period_start;
+          return h;
+        });
+
+        const hlocVolume = hlocData.map((h) => {
+          return {
+            time: h.time,
+            value: h.volume_right,
+            color: h.close > h.avg ? 'rgba(0, 41, 74, 0.7)' : 'rgba(0, 41, 74, 1)',
+          };
+        });
+
+        // Add whitespace
+        if (hlocData.length > 1) {
+          const newHloc = [];
+          newHloc.push(hlocData[0]);
+
+          const period = this.getUnixTimestampFromInterval(this.radioGroupForm.get('interval').value); // temp
+          let periods = 0;
+          const startingDate = hlocData[0].period_start;
+          let index = 1;
+          while (true) {
+            periods++;
+            if (hlocData[index].period_start > startingDate + period * periods) {
+              newHloc.push({
+                time: startingDate + period * periods,
+              });
+            } else {
+              newHloc.push(hlocData[index]);
+              index++;
+              if (!hlocData[index]) {
+                break;
+              }
+            }
+          }
+          hlocData = newHloc;
+        }
+
+        return {
+          hloc: hlocData,
+          volume: hlocVolume,
+        };
+      }),
+    );
+  }
+
+  setFragment(fragment: string) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+      fragment: fragment
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.websocketService.stopTrackingBisqMarket();
+  }
+
+  getUnixTimestampFromInterval(interval: string): number {
+    switch (interval) {
+      case 'minute': return 60;
+      case 'half_hour': return 1800;
+      case 'hour': return 3600;
+      case 'half_day': return 43200;
+      case 'day': return 86400;
+      case 'week': return 604800;
+      case 'month': return 2592000;
+      case 'year': return 31579200;
+    }
+  }
+
+}
--- a/frontend/src/app/bisq/bisq-stats/bisq-stats.component.html
+++ b/frontend/src/app/bisq/bisq-stats/bisq-stats.component.html
@@ -5,20 +5,20 @@
  <div class="clearfix"></div>

  <div class="row">
-    <div class="col-sm">
+    <div class="col-md">
      <table class="table table-borderless table-striped">
        <tbody *ngIf="!isLoading; else loadingTemplate">
          <tr>
            <td class="td-width" i18n="BSQ existing amount">Existing amount</td>
-            <td>{{ (stats.minted - stats.burnt) | number: '1.2-2' }} BSQ</td>
+            <td>{{ (stats.minted - stats.burnt) | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
          </tr>
          <tr>
            <td i18n="BSQ minted amount">Minted amount</td>
-            <td>{{ stats.minted | number: '1.2-2' }} BSQ</td>
+            <td>{{ stats.minted | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
          </tr>
          <tr>
            <td i18n="BSQ burnt amount">Burnt amount</td>
-            <td>{{ stats.burnt | number: '1.2-2' }} BSQ</td>
+            <td>{{ stats.burnt | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
          </tr>
          <tr>
            <td i18n="BSQ addresses">Addresses</td>
@@ -33,7 +33,7 @@
            <td>{{ stats.spent_txos | number }}</td>
          </tr>
          <tr>
-            <td i18n="BSQ token price">Price</td>
+            <td i18n>Price</td>
            <td><app-fiat [value]="price"></app-fiat></td>
          </tr>
          <tr>
@@ -44,7 +44,7 @@
      </table>

    </div>
-    <div class="col-sm"></div>
+    <div class="col-md"></div>
  </div>
 </div>

--- a/Show More
+++ b/Show More
				`@@ -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]}}`