Bump version number to v2.0.1

Also handle going from zero to initial graph data on dashboard.
fixes #273

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+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']

Dockerfile

@@ -1,62 +0,0 @@
-FROM alpine:latest
-
-RUN mkdir /mempool.space/
-COPY ./backend /mempool.space/backend/
-COPY ./frontend /mempool.space/frontend/
-COPY ./mariadb-structure.sql /mempool.space/mariadb-structure.sql
-#COPY ./nginx.conf /mempool.space/nginx.conf
-
-RUN apk add mariadb mariadb-client jq git nginx npm rsync
-
-RUN mysql_install_db --user=mysql --datadir=/var/lib/mysql/
-RUN /usr/bin/mysqld_safe --datadir='/var/lib/mysql/'& \
-    sleep 60 && \
-    mysql -e "create database mempool" && \
-    mysql -e "grant all privileges on mempool.* to 'mempool'@'localhost' identified by 'mempool'" && \
-    mysql mempool < /mempool.space/mariadb-structure.sql
-RUN sed -i "/^skip-networking/ c#skip-networking" /etc/my.cnf.d/mariadb-server.cnf
-
-RUN export NG_CLI_ANALYTICS=ci && \
-    npm install -g typescript && \
-    cd /mempool.space/frontend && \
-    npm install && \
-    cd /mempool.space/backend && \
-    npm install && \
-    tsc
-
-COPY ./nginx-nossl-docker.conf /etc/nginx/nginx.conf
-    
-ENV ENV dev
-ENV DB_HOST localhost
-ENV DB_PORT 3306
-ENV DB_USER mempool
-ENV DB_PASSWORD mempool
-ENV DB_DATABASE mempool
-ENV HTTP_PORT 80
-ENV API_ENDPOINT /api/v1/
-ENV CHAT_SSL_ENABLED false
-#ENV CHAT_SSL_PRIVKEY
-#ENV CHAT_SSL_CERT
-#ENV CHAT_SSL_CHAIN
-ENV MEMPOOL_REFRESH_RATE_MS 500
-ENV INITIAL_BLOCK_AMOUNT 8
-ENV DEFAULT_PROJECTED_BLOCKS_AMOUNT 8
-ENV KEEP_BLOCK_AMOUNT 24
-ENV BITCOIN_NODE_HOST bitcoinhost
-ENV BITCOIN_NODE_PORT 8332
-ENV BITCOIN_NODE_USER bitcoinuser
-ENV BITCOIN_NODE_PASS bitcoinpass
-ENV TX_PER_SECOND_SPAN_SECONDS 150
-
-#RUN echo "mysqld_safe& sleep 20 && cd /mempool.space/backend && rm -f mempool-config.json && rm -f cache.json && touch cache.json && jq -n env > mempool-config.json && node dist/index.js" > /entrypoint.sh
-
-RUN cd /mempool.space/frontend/ && \
-    npm run build && \
-    rsync -av --delete dist/mempool/ /var/www/html/
-
-EXPOSE 80
-
-COPY ./entrypoint.sh /mempool.space/entrypoint.sh
-RUN chmod +x /mempool.space/entrypoint.sh
-WORKDIR /mempool.space
-CMD ["/mempool.space/entrypoint.sh"]

LICENSE

@@ -1,11 +1,11 @@
-MIT License
+MIT License with Commons Clause License Condition v1.0
 
-Copyright (c) 2019 Simon Lindh
+Copyright (c) 2019-2020 The Mempool Open Source Project
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+to use, copy, modify, merge, publish, distribute, and/or sublicense
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
@@ -19,3 +19,17 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+Commons Clause License Condition v1.0
+
+Without limiting other conditions in the License, the grant of rights under
+the License will not include, and the License does not grant to you, the
+right to Sell the Software.
+
+For purposes of the foregoing, “Sell” means practicing any or all of the
+rights granted to you under the License to provide to third parties, for a
+fee or other consideration (including without limitation fees for hosting or
+consulting/ support services related to the Software), a product or service
+whose value derives, entirely or substantially, from the functionality of
+the Software. Any license notice or attribution required by the License must
+also include this Commons Cause License Condition notice.

README.md

@@ -1,92 +1,41 @@
-# mempool
-## a mempool visualizer and explorer for Bitcoin
+# The Mempool Open Source Project
 
-![mempool](https://pbs.twimg.com/media/EAETXWCU4AAv2v-?format=jpg&name=4096x4096)
-![blockchain](https://pbs.twimg.com/media/EAETXWAU8AAj4IP?format=jpg&name=4096x4096)
+Mempool is the fully featured mempool visualizer and block explorer website and API service running on [mempool.space](https://mempool.space/). The instructions below are for most users at home running on low-powered Raspberry Pi devices, but if you want to run a production website on a powerful server, see the [production setup guide](https://github.com/mempool/mempool/tree/master/production)
 
-## Pick the right version for your use case
+![mempool](https://pbs.twimg.com/media/Ei8p_flUcAEjfXE?format=jpg&name=4096x4096)
 
-Mempool V1 has basic explorer functionality and can run from a Bitcoin Core full node on a Raspberry Pi (no pruning, txindex=1).
-
-Mempool V2 is what runs on https://mempool.space and has advanced explorer functionality, but requires a fully synced electrs backend running on powerful server hardware.
-
-# Mempool V1 using Docker (easy)
-
-Install from Docker Hub, passing your Bitcoin Core RPC credentials as environment variables:
-
-```bash
-docker pull mempool/mempool:v1.0
-docker create -p 80:80 -e BITCOIN_NODE_HOST=192.168.1.102 -e BITCOIN_NODE_USER=foo -e BITCOIN_NODE_PASS=bar --name mempool mempool/mempool:v1.0
-docker start mempool
-docker logs mempool
-```
-
-You should see mempool starting up, which takes over an hour (needs 8 blocks). When it's ready, visit http://127.0.0.1/ to see your mempool.
-
-# Mempool V1 not using Docker (advanced)
+# Installation
 
 ## Dependencies
 
-* Bitcoin (full node required, no pruning, txindex=1)
+* Bitcoin Core (no pruning, txindex=1)
+* Electrum Server (romanz/electrs)
 * NodeJS (official stable LTS)
-* MySQL or MariaDB (default config)
-* Nginx (use supplied nginx.conf)
+* MariaDB (default config)
+* Nginx (use supplied nginx.conf and nginx-mempool.conf)
 
-## Checking out release tag
+## Mempool
+
+Clone the mempool repo, and checkout the latest release tag:
 ```bash
-  git clone https://github.com/mempool-space/mempool.space
-  cd mempool.space
-  git checkout v1.0.0 # put latest release tag here
+  git clone https://github.com/mempool/mempool
+  cd mempool
+  latestrelease=$(curl -s https://api.github.com/repos/mempool/mempool/releases/latest|grep tag_name|head -1|cut -d '"' -f4)
+  git checkout $latestrelease
 ```
 
 ## Bitcoin Core (bitcoind)
 
-Enable RPC and txindex in bitcoin.conf
-
+Enable RPC and txindex in `bitcoin.conf`:
 ```bash
   rpcuser=mempool
   rpcpassword=71b61986da5b03a5694d7c7d5165ece5
   txindex=1
 ```
 
-## NodeJS
-
-Install dependencies and build code:
-
-```bash
-  # Install TypeScript Globally
-  npm install -g typescript
-
-  # Frontend
-  cd frontend
-  npm install
-  npm run build
-
-  # Backend
-  cd ../backend/
-  npm install
-  npm run build
-```
-
-## Mempool Configuration
-In the `backend` folder, make a copy of the sample config and modify it to fit your settings.
-
-```bash
-  cp mempool-config.sample.json mempool-config.json
-```
-
-Edit `mempool-config.json` to add your Bitcoin Core node RPC credentials:
-```bash
-  "BITCOIN_NODE_HOST": "192.168.1.5",
-  "BITCOIN_NODE_PORT": 8332,
-  "BITCOIN_NODE_USER": "mempool",
-  "BITCOIN_NODE_PASS": "71b61986da5b03a5694d7c7d5165ece5",
-```
-
 ## MySQL
 
-Install MariaDB:
-
+Install MariaDB from OS package manager:
 ```bash
   # Linux
   apt-get install mariadb-server mariadb-client
@@ -108,47 +57,69 @@ Create database and grant privileges:
   Query OK, 0 rows affected (0.00 sec)
 ```
 
-From the root folder, initialize database structure:
-
+From the mempool repo's top-level folder, import the database structure:
 ```bash
   mysql -u mempool -p mempool < mariadb-structure.sql
 ```
 
-## Running (Backend)
-
-Create an initial empty cache and start the app:
+## Mempool Backend
+Install mempool dependencies from npm and build the backend:
 
 ```bash
-  touch cache.json
-  npm run start # node dist/index.js
+  # backend
+  cd ../backend/
+  npm install
+  npm run build
 ```
 
-After starting you should see:
+In the `backend` folder, make a copy of the sample config and modify it to fit your settings.
 
 ```bash
-  Server started on port 8999 :)
-  New block found (#586498)! 0 of 1986 found in mempool. 1985 not found.
-  New block found (#586499)! 0 of 1094 found in mempool. 1093 not found.
-  New block found (#586500)! 0 of 2735 found in mempool. 2734 not found.
-  New block found (#586501)! 0 of 2675 found in mempool. 2674 not found.
-  New block found (#586502)! 0 of 975 found in mempool. 974 not found.
-  New block found (#586503)! 0 of 2130 found in mempool. 2129 not found.
-  New block found (#586504)! 0 of 2770 found in mempool. 2769 not found.
-  New block found (#586505)! 0 of 2759 found in mempool. 2758 not found.
-  Updating mempool
-  Calculated fee for transaction 1 / 3257
-  Calculated fee for transaction 2 / 3257
-  Calculated fee for transaction 3 / 3257
-  Calculated fee for transaction 4 / 3257
-  Calculated fee for transaction 5 / 3257
-  Calculated fee for transaction 6 / 3257
-  Calculated fee for transaction 7 / 3257
-  Calculated fee for transaction 8 / 3257
-  Calculated fee for transaction 9 / 3257
+  cp mempool-config.sample.json mempool-config.json
 ```
-You need to wait for at least *8 blocks to be mined*, so please wait ~80 minutes.
-The backend also needs to index transactions, calculate fees, etc.
-When it's ready you will see output like this:
+
+Edit `mempool-config.json` to add your Bitcoin Core node RPC credentials:
+```bash
+{
+  "MEMPOOL": {
+    "NETWORK": "mainnet",
+    "BACKEND": "electrum",
+    "HTTP_PORT": 8999,
+    "API_URL_PREFIX": "/api/v1/",
+    "POLL_RATE_MS": 2000
+  },
+  "CORE_RPC": {
+    "USERNAME": "mempool",
+    "PASSWORD": "71b61986da5b03a5694d7c7d5165ece5"
+  },
+  "ELECTRUM": {
+    "HOST": "127.0.0.1",
+    "PORT": 50002,
+    "TLS_ENABLED": true,
+    "TX_LOOKUPS": false
+  },
+  "DATABASE": {
+    "ENABLED": true,
+    "HOST": "localhost",
+    "PORT": 3306,
+    "USERNAME": "mempool",
+    "PASSWORD": "mempool",
+    "DATABASE": "mempool"
+  },
+  "STATISTICS": {
+    "ENABLED": true,
+    "TX_PER_SECOND_SAMPLE_PERIOD": 150
+  }
+}
+```
+
+Start the backend:
+
+```bash
+  npm run start
+```
+
+When it's running you should see output like this:
 
 ```bash
   Mempool updated in 0.189 seconds
@@ -171,43 +142,38 @@ When it's ready you will see output like this:
   Updating mempool
 ```
 
-## nginx + CertBot (LetsEncrypt)
-Setup nginx using the supplied nginx.conf
+## Mempool Frontend
+
+Install mempool dependencies from npm and build the frontend static HTML/CSS/JS:
+
+```bash
+  # frontend
+  cd frontend
+  npm install
+  npm run build
+```
+
+Install the output into nginx webroot folder:
+
+```bash
+  sudo rsync -av --delete dist/mempool/ /var/www/html/
+```
+
+## nginx + certbot
+
+Install the supplied nginx.conf and nginx-mempool.conf in /etc/nginx
 
 ```bash
   # install nginx and certbot
   apt-get install -y nginx python-certbot-nginx
 
+  # install the mempool configuration for nginx
+  cp nginx.conf nginx-mempool.conf /etc/nginx/nginx.conf
+
   # replace example.com with your domain name
   certbot --nginx -d example.com
 
-  # install the mempool configuration for nginx
-  cp nginx.conf /etc/nginx/nginx.conf
-
-  # edit the installed nginx.conf, and replace all
-  # instances of example.com with your domain name
 ```
-Make sure you can access https://<your-domain-name>/ in browser before proceeding
-
-
-## Running (Frontend)
-
-Build the frontend static HTML/CSS/JS, rsync the output into nginx folder:
-
-```bash
-  cd frontend/
-  npm run build
-  sudo rsync -av --delete dist/mempool/ /var/www/html/
-```
-
-### Optional frontend configuration
-In the `frontend` folder, make a copy of the sample config and modify it to fit your settings.
-
-```bash
-  cp mempool-frontend-config.sample.json mempool-frontend-config.json
-```
-
-## Try It Out
 
 If everything went okay you should see the beautiful mempool :grin:
 

backend/.gitignore

@@ -43,3 +43,4 @@ testem.log
 Thumbs.db
 
 cache.json
+cache2.json

backend/mempool-config.sample.json

@@ -1,22 +1,52 @@
 {
-  "HTTP_PORT": 8999,
-  "DB_HOST": "localhost",
-  "DB_PORT": 3306,
-  "DB_USER": "mempool",
-  "DB_PASSWORD": "mempool",
-  "DB_DATABASE": "mempool",
-  "DB_DISABLED": false,
-  "API_ENDPOINT": "/api/v1/",
-  "ELECTRS_POLL_RATE_MS": 2000,
-  "MEMPOOL_REFRESH_RATE_MS": 2000,
-  "DEFAULT_PROJECTED_BLOCKS_AMOUNT": 8,
-  "KEEP_BLOCK_AMOUNT": 24,
-  "INITIAL_BLOCK_AMOUNT": 8,
-  "TX_PER_SECOND_SPAN_SECONDS": 150,
-  "ELECTRS_API_URL": "https://www.blockstream.info/testnet/api",
-  "BISQ_ENABLED": false,
-  "BSQ_BLOCKS_DATA_PATH": "/bisq/data",
-  "SSL": false,
-  "SSL_CERT_FILE_PATH": "/etc/letsencrypt/live/mysite/fullchain.pem",
-  "SSL_KEY_FILE_PATH": "/etc/letsencrypt/live/mysite/privkey.pem"
+  "MEMPOOL": {
+    "NETWORK": "mainnet",
+    "BACKEND": "electrum",
+    "HTTP_PORT": 8999,
+    "SPAWN_CLUSTER_PROCS": 0,
+    "API_URL_PREFIX": "/api/v1/",
+    "POLL_RATE_MS": 2000
+  },
+  "CORE_RPC": {
+    "HOST": "127.0.0.1",
+    "PORT": 8332,
+    "USERNAME": "mempool",
+    "PASSWORD": "mempool"
+  },
+  "ELECTRUM": {
+    "HOST": "127.0.0.1",
+    "PORT": 50002,
+    "TLS_ENABLED": true,
+    "TX_LOOKUPS": false
+  },
+  "ESPLORA": {
+    "REST_API_URL": "http://127.0.0.1:3000"
+  },
+  "DATABASE": {
+    "ENABLED": true,
+    "HOST": "127.0.0.1",
+    "PORT": 3306,
+    "DATABASE": "mempool",
+    "USERNAME": "mempool",
+    "PASSWORD": "mempool"
+  },
+  "STATISTICS": {
+    "ENABLED": true,
+    "TX_PER_SECOND_SAMPLE_PERIOD": 150
+  },
+  "BISQ_BLOCKS": {
+    "ENABLED": false,
+    "DATA_PATH": "/bisq/statsnode-data/btc_mainnet/db/json"
+  },
+  "BISQ_MARKETS": {
+    "ENABLED": false,
+    "DATA_PATH": "/bisq/statsnode-data/btc_mainnet/db"
+  },
+  "SPONSORS": {
+    "ENABLED": false,
+    "BTCPAY_URL": "",
+    "BTCPAY_AUTH": "",
+    "BTCPAY_WEBHOOK_URL": "",
+    "TWITTER_BEARER_AUTH": ""
+  }
 }

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-backend",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Bitcoin mempool visualizer and blockchain explorer backend",
   "license": "MIT",
   "homepage": "https://mempool.space",
@@ -20,21 +20,28 @@
   ],
   "main": "index.ts",
   "scripts": {
-    "build": "tsc",
-    "start": "npm run build && node dist/index.js",
+    "ng": "./node_modules/@angular/cli/bin/ng",
+    "tsc": "./node_modules/typescript/bin/tsc",
+    "build": "npm run tsc",
+    "start": "node --max-old-space-size=4096 dist/index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "compression": "^1.7.4",
+    "@mempool/bitcoin": "^3.0.2",
+    "@mempool/electrum-client": "^1.1.7",
+    "axios": "^0.21.1",
+    "bitcoinjs-lib": "^5.2.0",
+    "crypto-js": "^4.0.0",
     "express": "^4.17.1",
+    "locutus": "^2.0.12",
     "mysql2": "^1.6.1",
-    "request": "^2.88.2",
+    "node-worker-threads-pool": "^1.4.2",
     "ws": "^7.3.1"
   },
   "devDependencies": {
     "@types/compression": "^1.0.1",
     "@types/express": "^4.17.2",
-    "@types/request": "^2.48.2",
+    "@types/locutus": "^0.0.6",
     "@types/ws": "^6.0.4",
     "tslint": "~6.1.0",
     "typescript": "~3.9.7"

backend/src/api/backend-info.ts

@@ -1,5 +1,6 @@
 import * as fs from 'fs';
 import * as os from 'os';
+import logger from '../logger';
 
 class BackendInfo {
   gitCommitHash = '';
@@ -17,11 +18,15 @@ class BackendInfo {
     };
   }
 
+  public getShortCommitHash() {
+    return this.gitCommitHash.slice(0, 7);
+  }
+
   private setLatestCommitHash(): void {
     try {
       this.gitCommitHash = fs.readFileSync('../.git/refs/heads/master').toString().trim();
     } catch (e) {
-      console.log('Could not load git commit info, skipping.');
+      logger.err('Could not load git commit info: ' + e.message || e);
     }
   }
 }

backend/src/api/bisq/bisq.ts

@@ -1,11 +1,14 @@
-const config = require('../../mempool-config.json');
+import config from '../../config';
 import * as fs from 'fs';
-import * as request from 'request';
-import { BisqBlocks, BisqBlock, BisqTransaction, BisqStats, BisqTrade } from '../interfaces';
-import { Common } from './common';
+import axios from 'axios';
+import { BisqBlocks, BisqBlock, BisqTransaction, BisqStats, BisqTrade } from './interfaces';
+import { Common } from '../common';
+import { BlockExtended } from '../../mempool.interfaces';
+import { StaticPool } from 'node-worker-threads-pool';
+import logger from '../../logger';
 
 class Bisq {
-  private static BLOCKS_JSON_FILE_PATH = '/all/blocks.json';
+  private static BLOCKS_JSON_FILE_PATH = config.BISQ_BLOCKS.DATA_PATH + '/all/blocks.json';
   private latestBlockHeight = 0;
   private blocks: BisqBlock[] = [];
   private transactions: BisqTransaction[] = [];
@@ -23,6 +26,10 @@ class Bisq {
   private priceUpdateCallbackFunction: ((price: number) => void) | undefined;
   private topDirectoryWatcher: fs.FSWatcher | undefined;
   private subdirectoryWatcher: fs.FSWatcher | undefined;
+  private jsonParsePool = new StaticPool({
+    size: 4,
+    task: (blob: string) => JSON.parse(blob),
+  });
 
   constructor() {}
 
@@ -35,6 +42,14 @@ class Bisq {
     this.startSubDirectoryWatcher();
   }
 
+  handleNewBitcoinBlock(block: BlockExtended): void {
+    if (block.height - 2 > this.latestBlockHeight && this.latestBlockHeight !== 0) {
+      logger.warn(`Bitcoin block height (#${block.height}) has diverged from the latest Bisq block height (#${this.latestBlockHeight}). Restarting watchers...`);
+      this.startTopDirectoryWatcher();
+      this.startSubDirectoryWatcher();
+    }
+  }
+
   getTransaction(txId: string): BisqTransaction | undefined {
     return this.transactionIndex[txId];
   }
@@ -72,8 +87,8 @@ class Bisq {
   }
 
   private checkForBisqDataFolder() {
-    if (!fs.existsSync(config.BSQ_BLOCKS_DATA_PATH + Bisq.BLOCKS_JSON_FILE_PATH)) {
-      console.log(config.BSQ_BLOCKS_DATA_PATH + Bisq.BLOCKS_JSON_FILE_PATH + ` doesn't exist. Make sure Bisq is running and the config is correct before starting the server.`);
+    if (!fs.existsSync(Bisq.BLOCKS_JSON_FILE_PATH)) {
+      logger.warn(Bisq.BLOCKS_JSON_FILE_PATH + ` doesn't exist. Make sure Bisq is running and the config is correct before starting the server.`);
       return process.exit(1);
     }
   }
@@ -83,7 +98,7 @@ class Bisq {
       this.topDirectoryWatcher.close();
     }
     let fsWait: NodeJS.Timeout | null = null;
-    this.topDirectoryWatcher = fs.watch(config.BSQ_BLOCKS_DATA_PATH, () => {
+    this.topDirectoryWatcher = fs.watch(config.BISQ_BLOCKS.DATA_PATH, () => {
       if (fsWait) {
         clearTimeout(fsWait);
       }
@@ -91,7 +106,7 @@ class Bisq {
         this.subdirectoryWatcher.close();
       }
       fsWait = setTimeout(() => {
-        console.log(`Bisq restart detected. Resetting both watchers in 3 minutes.`);
+        logger.debug(`Bisq restart detected. Resetting both watchers in 3 minutes.`);
         setTimeout(() => {
           this.startTopDirectoryWatcher();
           this.startSubDirectoryWatcher();
@@ -105,36 +120,37 @@ class Bisq {
     if (this.subdirectoryWatcher) {
       this.subdirectoryWatcher.close();
     }
-    if (!fs.existsSync(config.BSQ_BLOCKS_DATA_PATH + Bisq.BLOCKS_JSON_FILE_PATH)) {
-      console.log(config.BSQ_BLOCKS_DATA_PATH + Bisq.BLOCKS_JSON_FILE_PATH + ` doesn't exist. Trying to restart sub directory watcher again in 3 minutes.`);
+    if (!fs.existsSync(Bisq.BLOCKS_JSON_FILE_PATH)) {
+      logger.warn(Bisq.BLOCKS_JSON_FILE_PATH + ` doesn't exist. Trying to restart sub directory watcher again in 3 minutes.`);
       setTimeout(() => this.startSubDirectoryWatcher(), 180000);
       return;
     }
     let fsWait: NodeJS.Timeout | null = null;
-    this.subdirectoryWatcher = fs.watch(config.BSQ_BLOCKS_DATA_PATH + '/all', () => {
+    this.subdirectoryWatcher = fs.watch(config.BISQ_BLOCKS.DATA_PATH + '/all', () => {
       if (fsWait) {
         clearTimeout(fsWait);
       }
       fsWait = setTimeout(() => {
-        console.log(`Change detected in the Bisq data folder.`);
+        logger.debug(`Change detected in the Bisq data folder.`);
         this.loadBisqDumpFile();
       }, 2000);
     });
   }
 
   private updatePrice() {
-    request('https://markets.bisq.network/api/trades/?market=bsq_btc', { json: true }, (err, res, trades: BisqTrade[]) => {
-      if (err) { return console.log(err); }
-
-      const prices: number[] = [];
-      trades.forEach((trade) => {
-        prices.push(parseFloat(trade.price) * 100000000);
-      });
-      prices.sort((a, b) => a - b);
-      this.price = Common.median(prices);
-      if (this.priceUpdateCallbackFunction) {
-        this.priceUpdateCallbackFunction(this.price);
-      }
+    axios.get<BisqTrade[]>('https://bisq.markets/api/trades/?market=bsq_btc')
+      .then((response) => {
+        const prices: number[] = [];
+        response.data.forEach((trade) => {
+          prices.push(parseFloat(trade.price) * 100000000);
+        });
+        prices.sort((a, b) => a - b);
+        this.price = Common.median(prices);
+        if (this.priceUpdateCallbackFunction) {
+          this.priceUpdateCallbackFunction(this.price);
+        }
+    }).catch((err) => {
+      logger.err('Error updating Bisq market price: ' + err);
     });
   }
 
@@ -145,7 +161,7 @@ class Bisq {
       this.buildIndex();
       this.calculateStats();
     } catch (e) {
-      console.log('loadBisqDumpFile() error.', e.message);
+      logger.err('loadBisqDumpFile() error.' + e.message || e);
     }
   }
 
@@ -189,7 +205,7 @@ class Bisq {
     });
 
     const time = new Date().getTime() - start;
-    console.log('Bisq data index rebuilt in ' + time + ' ms');
+    logger.debug('Bisq data index rebuilt in ' + time + ' ms');
   }
 
   private calculateStats() {
@@ -227,14 +243,14 @@ class Bisq {
   private async loadBisqBlocksDump(cacheData: string): Promise<void> {
     const start = new Date().getTime();
     if (cacheData && cacheData.length !== 0) {
-      console.log('Processing Bisq data dump...');
-      const data: BisqBlocks = JSON.parse(cacheData);
+      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();
         this.latestBlockHeight = data.chainHeight;
         const time = new Date().getTime() - start;
-        console.log('Bisq dump processed in ' + time + ' ms');
+        logger.debug('Bisq dump processed in ' + time + ' ms (worker thread)');
       } else {
         throw new Error(`Bisq dump didn't contain any blocks`);
       }
@@ -243,10 +259,10 @@ class Bisq {
 
   private loadData(): Promise<string> {
     return new Promise((resolve, reject) => {
-      if (!fs.existsSync(config.BSQ_BLOCKS_DATA_PATH + Bisq.BLOCKS_JSON_FILE_PATH)) {
+      if (!fs.existsSync(Bisq.BLOCKS_JSON_FILE_PATH)) {
         return reject(Bisq.BLOCKS_JSON_FILE_PATH + ` doesn't exist`);
       }
-      fs.readFile(config.BSQ_BLOCKS_DATA_PATH + Bisq.BLOCKS_JSON_FILE_PATH, 'utf8', (err, data) => {
+      fs.readFile(Bisq.BLOCKS_JSON_FILE_PATH, 'utf8', (err, data) => {
         if (err) {
           reject(err);
         }

backend/src/api/bisq/interfaces.ts

@@ -0,0 +1,258 @@
+
+export interface BisqBlocks {
+  chainHeight: number;
+  blocks: BisqBlock[];
+}
+
+export interface BisqBlock {
+  height: number;
+  time: number;
+  hash: string;
+  previousBlockHash: string;
+  txs: BisqTransaction[];
+}
+
+export interface BisqTransaction {
+  txVersion: string;
+  id: string;
+  blockHeight: number;
+  blockHash: string;
+  time: number;
+  inputs: BisqInput[];
+  outputs: BisqOutput[];
+  txType: string;
+  txTypeDisplayString: string;
+  burntFee: number;
+  invalidatedBsq: number;
+  unlockBlockHeight: number;
+}
+
+export interface BisqStats {
+  minted: number;
+  burnt: number;
+  addresses: number;
+  unspent_txos: number;
+  spent_txos: number;
+}
+
+interface BisqInput {
+  spendingTxOutputIndex: number;
+  spendingTxId: string;
+  bsqAmount: number;
+  isVerified: boolean;
+  address: string;
+  time: number;
+}
+
+interface BisqOutput {
+  txVersion: string;
+  txId: string;
+  index: number;
+  bsqAmount: number;
+  btcAmount: number;
+  height: number;
+  isVerified: boolean;
+  burntFee: number;
+  invalidatedBsq: number;
+  address: string;
+  scriptPubKey: BisqScriptPubKey;
+  time: any;
+  txType: string;
+  txTypeDisplayString: string;
+  txOutputType: string;
+  txOutputTypeDisplayString: string;
+  lockTime: number;
+  isUnspent: boolean;
+  spentInfo: SpentInfo;
+  opReturn?: string;
+}
+
+interface BisqScriptPubKey {
+  addresses: string[];
+  asm: string;
+  hex: string;
+  reqSigs: number;
+  type: string;
+}
+
+interface SpentInfo {
+  height: number;
+  inputIndex: number;
+  txId: string;
+}
+
+export interface BisqTrade {
+  direction: string;
+  price: string;
+  amount: string;
+  volume: string;
+  payment_method: string;
+  trade_id: string;
+  trade_date: number;
+  market?: string;
+}
+
+export interface Currencies { [txid: string]: Currency; }
+
+export interface Currency {
+  code: string;
+  name: string;
+  precision: number;
+
+  _type: string;
+}
+
+export interface Depth { [market: string]: Market; }
+
+interface Market {
+  'buys': string[];
+  'sells': string[];
+}
+
+export interface HighLowOpenClose {
+  period_start: number | string;
+  open: string;
+  high: string;
+  low: string;
+  close: string;
+  volume_left: string;
+  volume_right: string;
+  avg: string;
+}
+
+export interface Markets { [txid: string]: Pair; }
+
+interface Pair {
+  pair: string;
+  lname: string;
+  rname: string;
+  lsymbol: string;
+  rsymbol: string;
+  lprecision: number;
+  rprecision: number;
+  ltype: string;
+  rtype: string;
+  name: string;
+}
+
+export interface Offers { [market: string]: OffersMarket; }
+
+interface OffersMarket {
+  buys: Offer[] | null;
+  sells: Offer[] | null;
+}
+
+export interface OffersData {
+  direction: string;
+  currencyCode: string;
+  minAmount: number;
+  amount: number;
+  price: number;
+  date: number;
+  useMarketBasedPrice: boolean;
+  marketPriceMargin: number;
+  paymentMethod: string;
+  id: string;
+  currencyPair: string;
+  primaryMarketDirection: string;
+  priceDisplayString: string;
+  primaryMarketAmountDisplayString: string;
+  primaryMarketMinAmountDisplayString: string;
+  primaryMarketVolumeDisplayString: string;
+  primaryMarketMinVolumeDisplayString: string;
+  primaryMarketPrice: number;
+  primaryMarketAmount: number;
+  primaryMarketMinAmount: number;
+  primaryMarketVolume: number;
+  primaryMarketMinVolume: number;
+}
+
+export interface Offer {
+  offer_id: string;
+  offer_date: number;
+  direction: string;
+  min_amount: string;
+  amount: string;
+  price: string;
+  volume: string;
+  payment_method: string;
+  offer_fee_txid: any;
+}
+
+export interface Tickers { [market: string]: Ticker | null; }
+
+export interface Ticker {
+  last: string;
+  high: string;
+  low: string;
+  volume_left: string;
+  volume_right: string;
+  buy: string | null;
+  sell: string | null;
+}
+
+export interface Trade {
+  direction: string;
+  price: string;
+  amount: string;
+  volume: string;
+  payment_method: string;
+  trade_id: string;
+  trade_date: number;
+}
+
+export interface TradesData {
+  currency: string;
+  direction: string;
+  tradePrice: number;
+  tradeAmount: number;
+  tradeDate: number;
+  paymentMethod: string;
+  offerDate: number;
+  useMarketBasedPrice: boolean;
+  marketPriceMargin: number;
+  offerAmount: number;
+  offerMinAmount: number;
+  offerId: string;
+  depositTxId?: string;
+  currencyPair: string;
+  primaryMarketDirection: string;
+  primaryMarketTradePrice: number;
+  primaryMarketTradeAmount: number;
+  primaryMarketTradeVolume: number;
+
+  _market: string;
+  _tradePriceStr: string;
+  _tradeAmountStr: string;
+  _tradeVolumeStr: string;
+  _offerAmountStr: string;
+  _tradePrice: number;
+  _tradeAmount: number;
+  _tradeVolume: number;
+  _offerAmount: number;
+}
+
+export interface MarketVolume {
+  period_start: number;
+  num_trades: number;
+  volume: string;
+}
+
+export interface MarketsApiError {
+  success: number;
+  error: string;
+}
+
+export type Interval = 'minute' | 'half_hour' | 'hour' | 'half_day' | 'day' | 'week' | 'month' | 'year' | 'auto';
+
+export interface SummarizedIntervals { [market: string]: SummarizedInterval; }
+export interface SummarizedInterval {
+  'period_start': number;
+  'open': number;
+  'close': number;
+  'high': number;
+  'low': number;
+  'avg': number;
+  'volume_right': number;
+  'volume_left': number;
+}

backend/src/api/bisq/markets-api.ts

@@ -0,0 +1,655 @@
+import { Currencies, OffersData, TradesData, Depth, Currency, Interval, HighLowOpenClose,
+  Markets, Offers, Offer, BisqTrade, MarketVolume, Tickers, Ticker, SummarizedIntervals, SummarizedInterval } from './interfaces';
+
+import * as datetime from 'locutus/php/datetime';
+
+class BisqMarketsApi {
+  private cryptoCurrencyData: Currency[] = [];
+  private fiatCurrencyData: Currency[] = [];
+  private activeCryptoCurrencyData: Currency[] = [];
+  private activeFiatCurrencyData: Currency[] = [];
+  private offersData: OffersData[] = [];
+  private tradesData: TradesData[] = [];
+  private fiatCurrenciesIndexed: { [code: string]: true } = {};
+  private allCurrenciesIndexed: { [code: string]: Currency } = {};
+  private tradeDataByMarket: { [market: string]: TradesData[] } = {};
+  private tickersCache: Ticker | Tickers | null = null;
+
+  constructor() { }
+
+  setOffersData(offers: OffersData[]) {
+    this.offersData = offers;
+  }
+
+  setTradesData(trades: TradesData[]) {
+    this.tradesData = trades;
+    this.tradeDataByMarket = {};
+
+    this.tradesData.forEach((trade) => {
+      trade._market = trade.currencyPair.toLowerCase().replace('/', '_');
+      if (!this.tradeDataByMarket[trade._market]) {
+        this.tradeDataByMarket[trade._market] = [];
+      }
+      this.tradeDataByMarket[trade._market].push(trade);
+    });
+  }
+
+  setCurrencyData(cryptoCurrency: Currency[], fiatCurrency: Currency[], activeCryptoCurrency: Currency[], activeFiatCurrency: Currency[]) {
+    this.cryptoCurrencyData = cryptoCurrency,
+    this.fiatCurrencyData = fiatCurrency,
+    this.activeCryptoCurrencyData = activeCryptoCurrency,
+    this.activeFiatCurrencyData = activeFiatCurrency;
+
+    this.fiatCurrenciesIndexed = {};
+    this.allCurrenciesIndexed = {};
+
+    this.fiatCurrencyData.forEach((currency) => {
+      currency._type = 'fiat';
+      this.fiatCurrenciesIndexed[currency.code] = true;
+      this.allCurrenciesIndexed[currency.code] = currency;
+    });
+    this.cryptoCurrencyData.forEach((currency) => {
+       currency._type = 'crypto';
+       this.allCurrenciesIndexed[currency.code] = currency;
+    });
+  }
+
+  updateCache() {
+    this.tickersCache = null;
+    this.tickersCache = this.getTicker();
+  }
+
+  getCurrencies(
+    type: 'crypto' | 'fiat' | 'active' | 'all' = 'all',
+  ): Currencies {
+    let currencies: Currency[];
+
+    switch (type) {
+      case 'fiat':
+        currencies = this.fiatCurrencyData;
+        break;
+      case 'crypto':
+        currencies = this.cryptoCurrencyData;
+        break;
+      case 'active':
+        currencies = this.activeCryptoCurrencyData.concat(this.activeFiatCurrencyData);
+        break;
+      case 'all':
+      default:
+        currencies = this.cryptoCurrencyData.concat(this.fiatCurrencyData);
+    }
+    const result = {};
+    currencies.forEach((currency) => {
+      result[currency.code] = currency;
+    });
+    return result;
+  }
+
+  getDepth(
+    market: string,
+  ): Depth {
+    const currencyPair = market.replace('_', '/').toUpperCase();
+
+    const buys = this.offersData
+      .filter((offer) => offer.currencyPair === currencyPair && offer.primaryMarketDirection === 'BUY')
+      .map((offer) => offer.price)
+      .sort((a, b) => b - a)
+      .map((price) => this.intToBtc(price));
+
+    const sells = this.offersData
+      .filter((offer) => offer.currencyPair === currencyPair && offer.primaryMarketDirection === 'SELL')
+      .map((offer) => offer.price)
+      .sort((a, b) => a - b)
+      .map((price) => this.intToBtc(price));
+
+    const result = {};
+    result[market] = {
+      'buys': buys,
+      'sells': sells,
+    };
+    return result;
+  }
+
+  getOffers(
+    market: string,
+    direction?: 'buy' | 'sell',
+  ): Offers {
+    const currencyPair = market.replace('_', '/').toUpperCase();
+
+    let buys: Offer[] | null = null;
+    let sells: Offer[] | null = null;
+
+    if (!direction || direction === 'buy') {
+      buys = this.offersData
+        .filter((offer) => offer.currencyPair === currencyPair && offer.primaryMarketDirection === 'BUY')
+        .sort((a, b) => b.price - a.price)
+        .map((offer) => this.offerDataToOffer(offer, market));
+    }
+
+    if (!direction || direction === 'sell') {
+      sells = this.offersData
+        .filter((offer) => offer.currencyPair === currencyPair && offer.primaryMarketDirection === 'SELL')
+        .sort((a, b) => a.price - b.price)
+        .map((offer) => this.offerDataToOffer(offer, market));
+    }
+
+    const result: Offers = {};
+    result[market] = {
+      'buys': buys,
+      'sells': sells,
+    };
+    return result;
+  }
+
+  getMarkets(): Markets {
+    const allCurrencies = this.getCurrencies();
+    const activeCurrencies = this.getCurrencies('active');
+    const markets = {};
+
+    for (const currency of Object.keys(activeCurrencies)) {
+      if (allCurrencies[currency].code === 'BTC') {
+        continue;
+      }
+
+      const isFiat = allCurrencies[currency]._type === 'fiat';
+      const pmarketname = allCurrencies['BTC']['name'];
+
+      const lsymbol = isFiat ? 'BTC' : currency;
+      const rsymbol = isFiat ? currency : 'BTC';
+      const lname = isFiat ? pmarketname : allCurrencies[currency].name;
+      const rname = isFiat ? allCurrencies[currency].name : pmarketname;
+      const ltype = isFiat ? 'crypto' : allCurrencies[currency]._type;
+      const rtype = isFiat ? 'fiat' : 'crypto';
+      const lprecision = 8;
+      const rprecision = isFiat ? 2 : 8;
+      const pair = lsymbol.toLowerCase() + '_' + rsymbol.toLowerCase();
+
+      markets[pair] = {
+        'pair': pair,
+        'lname': lname,
+        'rname': rname,
+        'lsymbol': lsymbol,
+        'rsymbol': rsymbol,
+        'lprecision': lprecision,
+        'rprecision': rprecision,
+        'ltype': ltype,
+        'rtype': rtype,
+        'name': lname + '/' + rname,
+      };
+    }
+
+    return markets;
+  }
+
+  getTrades(
+    market: string,
+    timestamp_from?: number,
+    timestamp_to?: number,
+    trade_id_from?: string,
+    trade_id_to?: string,
+    direction?: 'buy' | 'sell',
+    limit: number = 100,
+    sort: 'asc' | 'desc' = 'desc',
+  ): BisqTrade[] {
+      limit = Math.min(limit, 2000);
+      const _market = market === 'all' ? undefined : market;
+
+      if (!timestamp_from) {
+        timestamp_from = new Date('2016-01-01').getTime() / 1000;
+      }
+      if (!timestamp_to) {
+        timestamp_to = new Date().getTime() / 1000;
+      }
+
+      const matches = this.getTradesByCriteria(_market, timestamp_to, timestamp_from,
+        trade_id_to, trade_id_from, direction, sort, limit, false);
+
+      if (sort === 'asc') {
+        matches.sort((a, b) => a.tradeDate - b.tradeDate);
+      } else {
+        matches.sort((a, b) => b.tradeDate - a.tradeDate);
+      }
+
+      return matches.map((trade) => {
+        const bsqTrade: BisqTrade = {
+          direction: trade.primaryMarketDirection,
+          price: trade._tradePriceStr,
+          amount: trade._tradeAmountStr,
+          volume: trade._tradeVolumeStr,
+          payment_method: trade.paymentMethod,
+          trade_id: trade.offerId,
+          trade_date: trade.tradeDate,
+        };
+        if (market === 'all') {
+          bsqTrade.market = trade._market;
+        }
+        return bsqTrade;
+      });
+  }
+
+  getVolumes(
+    market?: string,
+    timestamp_from?: number,
+    timestamp_to?: number,
+    interval: Interval = 'auto',
+    milliseconds?: boolean,
+    timestamp: 'no' | 'yes' = 'yes',
+  ): MarketVolume[] {
+    if (milliseconds) {
+      timestamp_from = timestamp_from ? timestamp_from / 1000 : timestamp_from;
+      timestamp_to = timestamp_to ? timestamp_to / 1000 : timestamp_to;
+    }
+    if (!timestamp_from) {
+      timestamp_from = new Date('2016-01-01').getTime() / 1000;
+    }
+    if (!timestamp_to) {
+      timestamp_to = new Date().getTime() / 1000;
+    }
+
+    const trades = this.getTradesByCriteria(market, timestamp_to, timestamp_from,
+      undefined, undefined, undefined, 'asc', Number.MAX_SAFE_INTEGER);
+
+    if (interval === 'auto') {
+      const range = timestamp_to - timestamp_from;
+      interval = this.getIntervalFromRange(range);
+    }
+
+    const intervals: any = {};
+    const marketVolumes: MarketVolume[] = [];
+
+    for (const trade of trades) {
+      const traded_at = trade['tradeDate'] / 1000;
+      const interval_start = this.intervalStart(traded_at, interval);
+
+      if (!intervals[interval_start]) {
+        intervals[interval_start] = {
+          'volume': 0,
+          'num_trades': 0,
+        };
+      }
+
+      const period = intervals[interval_start];
+      period['period_start'] = interval_start;
+      period['volume'] += this.fiatCurrenciesIndexed[trade.currency] ? trade._tradeAmount : trade._tradeVolume;
+      period['num_trades']++;
+    }
+
+    for (const p in intervals) {
+      if (intervals.hasOwnProperty(p)) {
+        const period = intervals[p];
+        marketVolumes.push({
+          period_start: timestamp === 'no' ? new Date(period['period_start'] * 1000).toISOString() : period['period_start'],
+          num_trades: period['num_trades'],
+          volume: this.intToBtc(period['volume']),
+        });
+      }
+    }
+
+    return marketVolumes;
+  }
+
+  getTicker(
+    market?: string,
+  ): Tickers | Ticker | null {
+    if (market) {
+      return this.getTickerFromMarket(market);
+    }
+
+    if (this.tickersCache) {
+      return this.tickersCache;
+    }
+
+    const allMarkets = this.getMarkets();
+    const tickers = {};
+    for (const m in allMarkets) {
+      if (allMarkets.hasOwnProperty(m)) {
+        tickers[allMarkets[m].pair] = this.getTickerFromMarket(allMarkets[m].pair);
+      }
+    }
+
+    return tickers;
+  }
+
+  getTickerFromMarket(market: string): Ticker | null {
+    let ticker: Ticker;
+    const timestamp_from = datetime.strtotime('-24 hour');
+    const timestamp_to = new Date().getTime() / 1000;
+    const trades = this.getTradesByCriteria(market, timestamp_to, timestamp_from,
+      undefined, undefined, undefined, 'asc', Number.MAX_SAFE_INTEGER);
+
+    const periods: SummarizedInterval[] = Object.values(this.getTradesSummarized(trades, timestamp_from));
+
+    const allCurrencies = this.getCurrencies();
+    const currencyRight = allCurrencies[market.split('_')[1].toUpperCase()];
+
+    if (periods[0]) {
+      ticker = {
+        'last': this.intToBtc(periods[0].close),
+        'high': this.intToBtc(periods[0].high),
+        'low': this.intToBtc(periods[0].low),
+        'volume_left': this.intToBtc(periods[0].volume_left),
+        'volume_right': this.intToBtc(periods[0].volume_right),
+        'buy': null,
+        'sell': null,
+      };
+    } else {
+      const lastTrade = this.tradeDataByMarket[market];
+      if (!lastTrade) {
+        return null;
+      }
+      const tradePrice = lastTrade[0].primaryMarketTradePrice * Math.pow(10, 8 - currencyRight.precision);
+
+      const lastTradePrice = this.intToBtc(tradePrice);
+      ticker = {
+        'last': lastTradePrice,
+        'high': lastTradePrice,
+        'low': lastTradePrice,
+        'volume_left': '0',
+        'volume_right': '0',
+        'buy': null,
+        'sell': null,
+      };
+    }
+
+    const timestampFromMilli = timestamp_from * 1000;
+    const timestampToMilli = timestamp_to * 1000;
+
+    const currencyPair = market.replace('_', '/').toUpperCase();
+    const offersData = this.offersData.slice().sort((a, b) => a.price - b.price);
+
+    const buy = offersData.find((offer) => offer.currencyPair === currencyPair
+                                          && offer.primaryMarketDirection === 'BUY'
+                                          && offer.date >= timestampFromMilli
+                                          && offer.date <= timestampToMilli
+                                        );
+    const sell = offersData.find((offer) => offer.currencyPair === currencyPair
+                                            && offer.primaryMarketDirection === 'SELL'
+                                            && offer.date >= timestampFromMilli
+                                            && offer.date <= timestampToMilli
+                                          );
+
+    if (buy) {
+      ticker.buy = this.intToBtc(buy.primaryMarketPrice * Math.pow(10, 8 - currencyRight.precision));
+    }
+    if (sell) {
+      ticker.sell = this.intToBtc(sell.primaryMarketPrice * Math.pow(10, 8 - currencyRight.precision));
+    }
+
+    return ticker;
+  }
+
+  getHloc(
+    market: string,
+    interval: Interval = 'auto',
+    timestamp_from?: number,
+    timestamp_to?: number,
+    milliseconds?: boolean,
+    timestamp: 'no' | 'yes' = 'yes',
+  ): HighLowOpenClose[] {
+    if (milliseconds) {
+      timestamp_from = timestamp_from ? timestamp_from / 1000 : timestamp_from;
+      timestamp_to = timestamp_to ? timestamp_to / 1000 : timestamp_to;
+    }
+    if (!timestamp_from) {
+      timestamp_from = new Date('2016-01-01').getTime() / 1000;
+    }
+    if (!timestamp_to) {
+      timestamp_to = new Date().getTime() / 1000;
+    }
+
+    const trades = this.getTradesByCriteria(market, timestamp_to, timestamp_from,
+      undefined, undefined, undefined, 'asc', Number.MAX_SAFE_INTEGER);
+
+    if (interval === 'auto') {
+      const range = timestamp_to - timestamp_from;
+      interval = this.getIntervalFromRange(range);
+    }
+
+    const intervals = this.getTradesSummarized(trades, timestamp_from, interval);
+
+    const hloc: HighLowOpenClose[] = [];
+
+    for (const p in intervals) {
+      if (intervals.hasOwnProperty(p)) {
+        const period = intervals[p];
+        hloc.push({
+          period_start: timestamp === 'no' ? new Date(period['period_start'] * 1000).toISOString() : period['period_start'],
+          open: this.intToBtc(period['open']),
+          close: this.intToBtc(period['close']),
+          high: this.intToBtc(period['high']),
+          low: this.intToBtc(period['low']),
+          avg: this.intToBtc(period['avg']),
+          volume_right: this.intToBtc(period['volume_right']),
+          volume_left: this.intToBtc(period['volume_left']),
+        });
+      }
+    }
+
+    return hloc;
+  }
+
+  private getIntervalFromRange(range: number): Interval {
+    // two days range loads minute data
+    if (range <= 3600) {
+      // up to one hour range loads minutely data
+      return 'minute';
+    } else if (range <= 1 * 24 * 3600) {
+      // up to one day range loads half-hourly data
+      return 'half_hour';
+    } else if (range <= 3 * 24 * 3600) {
+      // up to 3 day range loads hourly data
+      return 'hour';
+    } else if (range <= 7 * 24 * 3600) {
+      // up to 7 day range loads half-daily data
+      return 'half_day';
+    } else if (range <= 60 * 24 * 3600) {
+      // up to 2 month range loads daily data
+      return 'day';
+    } else if (range <= 12 * 31 * 24 * 3600) {
+      // up to one year range loads weekly data
+      return 'week';
+    } else if (range <= 12 * 31 * 24 * 3600) {
+      // up to 5 year range loads monthly data
+      return 'month';
+    } else {
+      // greater range loads yearly data
+      return 'year';
+    }
+  }
+
+  private getTradesSummarized(trades: TradesData[], timestamp_from: number, interval?: string): SummarizedIntervals {
+    const intervals: any = {};
+    const intervals_prices: any = {};
+
+    for (const trade of trades) {
+      const traded_at = trade.tradeDate / 1000;
+      const interval_start = !interval ? timestamp_from : this.intervalStart(traded_at, interval);
+
+      if (!intervals[interval_start]) {
+          intervals[interval_start] = {
+            'open': 0,
+            'close': 0,
+            'high': 0,
+            'low': 0,
+            'avg': 0,
+            'volume_right': 0,
+            'volume_left': 0,
+        };
+        intervals_prices[interval_start] = [];
+      }
+      const period = intervals[interval_start];
+      const price = trade._tradePrice;
+
+      if (!intervals_prices[interval_start]['leftvol']) {
+        intervals_prices[interval_start]['leftvol'] = [];
+      }
+      if (!intervals_prices[interval_start]['rightvol']) {
+        intervals_prices[interval_start]['rightvol'] = [];
+      }
+
+      intervals_prices[interval_start]['leftvol'].push(trade._tradeAmount);
+      intervals_prices[interval_start]['rightvol'].push(trade._tradeVolume);
+
+      if (price) {
+          const plow = period['low'];
+          period['period_start'] = interval_start;
+          period['open'] = period['open'] || price;
+          period['close'] = price;
+          period['high'] = price > period['high'] ? price : period['high'];
+          period['low'] = (plow && price > plow) ? period['low'] : price;
+          period['avg'] = intervals_prices[interval_start]['rightvol'].reduce((p: number, c: number) => c + p, 0)
+            / intervals_prices[interval_start]['leftvol'].reduce((c: number, p: number) => c + p, 0) * 100000000;
+          period['volume_left'] += trade._tradeAmount;
+          period['volume_right'] += trade._tradeVolume;
+      }
+    }
+    return intervals;
+  }
+
+  private getTradesByCriteria(
+    market: string | undefined,
+    timestamp_to: number,
+    timestamp_from: number,
+    trade_id_to: string | undefined,
+    trade_id_from: string | undefined,
+    direction: 'buy' | 'sell' | undefined,
+    sort: string,
+    limit: number,
+    integerAmounts: boolean = true,
+ ): TradesData[] {
+    let trade_id_from_ts: number | null = null;
+    let trade_id_to_ts: number | null = null;
+    const allCurrencies = this.getCurrencies();
+
+    const timestampFromMilli = timestamp_from * 1000;
+    const timestampToMilli = timestamp_to * 1000;
+
+    // note: the offer_id_from/to depends on iterating over trades in
+    // descending chronological order.
+    const tradesDataSorted = this.tradesData.slice();
+    if (sort === 'asc') {
+      tradesDataSorted.reverse();
+    }
+
+    let matches: TradesData[] = [];
+    for (const trade of tradesDataSorted) {
+      if (trade_id_from === trade.offerId) {
+        trade_id_from_ts = trade.tradeDate;
+      }
+      if (trade_id_to === trade.offerId) {
+        trade_id_to_ts = trade.tradeDate;
+      }
+      if (trade_id_to && trade_id_to_ts === null) {
+        continue;
+      }
+      if (trade_id_from && trade_id_from_ts != null && trade_id_from_ts !== trade.tradeDate) {
+        continue;
+      }
+      if (market && market !== trade._market) {
+        continue;
+      }
+      if (timestampFromMilli && timestampFromMilli > trade.tradeDate) {
+        continue;
+      }
+      if (timestampToMilli && timestampToMilli < trade.tradeDate) {
+        continue;
+      }
+      if (direction && direction !== trade.direction.toLowerCase()) {
+        continue;
+      }
+
+      // Filter out bogus trades with BTC/BTC or XXX/XXX market.
+      // See github issue: https://github.com/bitsquare/bitsquare/issues/883
+      const currencyPairs = trade.currencyPair.split('/');
+      if (currencyPairs[0] === currencyPairs[1]) {
+        continue;
+      }
+
+      const currencyLeft = allCurrencies[currencyPairs[0]];
+      const currencyRight = allCurrencies[currencyPairs[1]];
+
+      if (!currencyLeft || !currencyRight) {
+        continue;
+      }
+
+      const tradePrice = trade.primaryMarketTradePrice * Math.pow(10, 8 - currencyRight.precision);
+      const tradeAmount = trade.primaryMarketTradeAmount * Math.pow(10, 8 - currencyLeft.precision);
+      const tradeVolume = trade.primaryMarketTradeVolume * Math.pow(10, 8 - currencyRight.precision);
+
+      if (integerAmounts) {
+        trade._tradePrice = tradePrice;
+        trade._tradeAmount = tradeAmount;
+        trade._tradeVolume = tradeVolume;
+        trade._offerAmount = trade.offerAmount;
+      } else {
+        trade._tradePriceStr = this.intToBtc(tradePrice);
+        trade._tradeAmountStr = this.intToBtc(tradeAmount);
+        trade._tradeVolumeStr = this.intToBtc(tradeVolume);
+        trade._offerAmountStr = this.intToBtc(trade.offerAmount);
+      }
+
+      matches.push(trade);
+
+      if (matches.length >= limit) {
+        break;
+      }
+    }
+
+    if ((trade_id_from && !trade_id_from_ts) || (trade_id_to && !trade_id_to_ts)) {
+      matches = [];
+    }
+    return matches;
+  }
+
+  private intervalStart(ts: number, interval: string): number {
+    switch (interval) {
+        case 'minute':
+            return (ts - (ts % 60));
+        case '10_minute':
+            return (ts - (ts % 600));
+        case 'half_hour':
+            return (ts - (ts % 1800));
+        case 'hour':
+            return (ts - (ts % 3600));
+        case 'half_day':
+            return (ts - (ts % (3600 * 12)));
+        case 'day':
+            return datetime.strtotime('midnight today', ts);
+        case 'week':
+            return datetime.strtotime('midnight sunday last week', ts);
+        case 'month':
+            return datetime.strtotime('midnight first day of this month', ts);
+        case 'year':
+            return datetime.strtotime('midnight first day of january', ts);
+        default:
+            throw new Error('Unsupported interval: ' + interval);
+    }
+}
+
+  private offerDataToOffer(offer: OffersData, market: string): Offer {
+    const currencyPairs = market.split('_');
+    const currencyRight = this.allCurrenciesIndexed[currencyPairs[1].toUpperCase()];
+    const currencyLeft = this.allCurrenciesIndexed[currencyPairs[0].toUpperCase()];
+    const price = offer['primaryMarketPrice'] * Math.pow( 10, 8 - currencyRight['precision']);
+    const amount = offer['primaryMarketAmount'] * Math.pow( 10, 8 - currencyLeft['precision']);
+    const volume = offer['primaryMarketVolume'] * Math.pow( 10, 8 - currencyRight['precision']);
+
+    return {
+      offer_id: offer.id,
+      offer_date: offer.date,
+      direction: offer.primaryMarketDirection,
+      min_amount: this.intToBtc(offer.minAmount),
+      amount: this.intToBtc(amount),
+      price: this.intToBtc(price),
+      volume: this.intToBtc(volume),
+      payment_method: offer.paymentMethod,
+      offer_fee_txid: null,
+    };
+  }
+
+  private intToBtc(val: number): string {
+    return (val / 100000000).toFixed(8);
+  }
+}
+
+export default new BisqMarketsApi();

backend/src/api/bisq/markets.ts

@@ -0,0 +1,131 @@
+import config from '../../config';
+import * as fs from 'fs';
+import { OffersData as OffersData, TradesData, Currency } from './interfaces';
+import bisqMarket from './markets-api';
+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_FILE_PATHS = {
+    activeCryptoCurrency: '/active_crypto_currency_list.json',
+    activeFiatCurrency: '/active_fiat_currency_list.json',
+    cryptoCurrency: '/crypto_currency_list.json',
+    fiatCurrency: '/fiat_currency_list.json',
+    offers: '/offers_statistics.json',
+    trades: '/trade_statistics.json',
+  };
+
+  private cryptoCurrencyLastMtime = new Date('2016-01-01');
+  private fiatCurrencyLastMtime = new Date('2016-01-01');
+  private offersLastMtime = new Date('2016-01-01');
+  private tradesLastMtime = new Date('2016-01-01');
+
+  private subdirectoryWatcher: fs.FSWatcher | undefined;
+
+  constructor() {}
+
+  startBisqService(): void {
+    this.checkForBisqDataFolder();
+    this.loadBisqDumpFile();
+    this.startBisqDirectoryWatcher();
+  }
+
+  private checkForBisqDataFolder() {
+    if (!fs.existsSync(Bisq.MARKET_JSON_PATH + Bisq.MARKET_JSON_FILE_PATHS.cryptoCurrency)) {
+      logger.err(Bisq.MARKET_JSON_PATH + Bisq.MARKET_JSON_FILE_PATHS.cryptoCurrency + ` doesn't exist. Make sure Bisq is running and the config is correct before starting the server.`);
+      return process.exit(1);
+    }
+  }
+
+  private startBisqDirectoryWatcher() {
+    if (this.subdirectoryWatcher) {
+      this.subdirectoryWatcher.close();
+    }
+    if (!fs.existsSync(Bisq.MARKET_JSON_PATH + Bisq.MARKET_JSON_FILE_PATHS.cryptoCurrency)) {
+      logger.warn(Bisq.MARKET_JSON_PATH + Bisq.MARKET_JSON_FILE_PATHS.cryptoCurrency + ` doesn't exist. Trying to restart sub directory watcher again in 3 minutes.`);
+      setTimeout(() => this.startBisqDirectoryWatcher(), 180000);
+      return;
+    }
+    let fsWait: NodeJS.Timeout | null = null;
+    this.subdirectoryWatcher = fs.watch(Bisq.MARKET_JSON_PATH, () => {
+      if (fsWait) {
+        clearTimeout(fsWait);
+      }
+      fsWait = setTimeout(() => {
+        logger.debug(`Change detected in the Bisq market data folder.`);
+        this.loadBisqDumpFile();
+      }, Bisq.FOLDER_WATCH_CHANGE_DETECTION_DEBOUNCE);
+    });
+  }
+
+  private async loadBisqDumpFile(): Promise<void> {
+    const start = new Date().getTime();
+    try {
+      let marketsDataUpdated = false;
+      const cryptoMtime = this.getFileMtime(Bisq.MARKET_JSON_FILE_PATHS.cryptoCurrency);
+      const fiatMtime = this.getFileMtime(Bisq.MARKET_JSON_FILE_PATHS.fiatCurrency);
+      if (cryptoMtime > this.cryptoCurrencyLastMtime || fiatMtime > this.fiatCurrencyLastMtime) {
+        const cryptoCurrencyData = await this.loadData<Currency[]>(Bisq.MARKET_JSON_FILE_PATHS.cryptoCurrency);
+        const fiatCurrencyData = await this.loadData<Currency[]>(Bisq.MARKET_JSON_FILE_PATHS.fiatCurrency);
+        const activeCryptoCurrencyData = await this.loadData<Currency[]>(Bisq.MARKET_JSON_FILE_PATHS.activeCryptoCurrency);
+        const activeFiatCurrencyData = await this.loadData<Currency[]>(Bisq.MARKET_JSON_FILE_PATHS.activeFiatCurrency);
+        logger.debug('Updating Bisq Market Currency Data');
+        bisqMarket.setCurrencyData(cryptoCurrencyData, fiatCurrencyData, activeCryptoCurrencyData, activeFiatCurrencyData);
+        if (cryptoMtime > this.cryptoCurrencyLastMtime) {
+          this.cryptoCurrencyLastMtime = cryptoMtime;
+        }
+        if (fiatMtime > this.fiatCurrencyLastMtime) {
+          this.fiatCurrencyLastMtime = fiatMtime;
+        }
+        marketsDataUpdated = true;
+      }
+      const offersMtime = this.getFileMtime(Bisq.MARKET_JSON_FILE_PATHS.offers);
+      if (offersMtime > this.offersLastMtime) {
+        const offersData = await this.loadData<OffersData[]>(Bisq.MARKET_JSON_FILE_PATHS.offers);
+        logger.debug('Updating Bisq Market Offers Data');
+        bisqMarket.setOffersData(offersData);
+        this.offersLastMtime = offersMtime;
+        marketsDataUpdated = true;
+      }
+      const tradesMtime = this.getFileMtime(Bisq.MARKET_JSON_FILE_PATHS.trades);
+      if (tradesMtime > this.tradesLastMtime) {
+        const tradesData = await this.loadData<TradesData[]>(Bisq.MARKET_JSON_FILE_PATHS.trades);
+        logger.debug('Updating Bisq Market Trades Data');
+        bisqMarket.setTradesData(tradesData);
+        this.tradesLastMtime = tradesMtime;
+        marketsDataUpdated = true;
+      }
+      if (marketsDataUpdated) {
+        bisqMarket.updateCache();
+        const time = new Date().getTime() - start;
+        logger.debug('Bisq market data updated in ' + time + ' ms');
+      }
+    } catch (e) {
+      logger.err('loadBisqMarketDataDumpFile() error.' + e.message || e);
+    }
+  }
+
+  private getFileMtime(path: string): Date {
+    const stats = fs.statSync(Bisq.MARKET_JSON_PATH + path);
+    return stats.mtime;
+  }
+
+  private loadData<T>(path: string): Promise<T> {
+    return new Promise((resolve, reject) => {
+      fs.readFile(Bisq.MARKET_JSON_PATH + path, 'utf8', (err, data) => {
+        if (err) {
+          reject(err);
+        }
+        try {
+          const parsedData = JSON.parse(data);
+          resolve(parsedData);
+        } catch (e) {
+          reject('JSON parse error (' + path + ')');
+        }
+      });
+    });
+  }
+}
+
+export default new Bisq();

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

@@ -0,0 +1,14 @@
+import { IEsploraApi } from './esplora-api.interface';
+
+export interface AbstractBitcoinApi {
+  $getRawMempool(): Promise<IEsploraApi.Transaction['txid'][]>;
+  $getRawTransaction(txId: string, skipConversion?: boolean, addPrevout?: boolean): Promise<IEsploraApi.Transaction>;
+  $getRawTransactionBitcoind(txId: string, skipConversion?: boolean, addPrevout?: boolean): Promise<IEsploraApi.Transaction>;
+  $getBlockHeightTip(): Promise<number>;
+  $getTxIdsForBlock(hash: string): Promise<string[]>;
+  $getBlockHash(height: number): Promise<string>;
+  $getBlock(hash: string): Promise<IEsploraApi.Block>;
+  $getAddress(address: string): Promise<IEsploraApi.Address>;
+  $getAddressTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]>;
+  $getAddressPrefix(prefix: string): string[];
+}

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

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

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

@@ -0,0 +1,116 @@
+export namespace IBitcoinApi {
+  export interface MempoolInfo {
+    loaded: boolean;                 //  (boolean) True if the mempool is fully loaded
+    size: number;                    //  (numeric) Current tx count
+    bytes: number;                   //  (numeric) Sum of all virtual transaction sizes as defined in BIP 141.
+    usage: number;                   //  (numeric) Total memory usage for the mempool
+    maxmempool: number;              //  (numeric) Maximum memory usage for the mempool
+    mempoolminfee: number;           //  (numeric) Minimum fee rate in BTC/kB for tx to be accepted.
+    minrelaytxfee: number;           //  (numeric) Current minimum relay fee for transactions
+  }
+
+  export interface RawMempool { [txId: string]: MempoolEntry; }
+
+  export interface MempoolEntry {
+    vsize: number;                   //  (numeric) virtual transaction size as defined in BIP 141.
+    weight: number;                  //  (numeric) transaction weight as defined in BIP 141.
+    time: number;                    //  (numeric) local time transaction entered pool in seconds since 1 Jan 1970 GMT
+    height: number;                  //  (numeric) block height when transaction entered pool
+    descendantcount: number;         //  (numeric) number of in-mempool descendant transactions (including this one)
+    descendantsize: number;          //  (numeric) virtual transaction size of in-mempool descendants (including this one)
+    ancestorcount: number;           //  (numeric) number of in-mempool ancestor transactions (including this one)
+    ancestorsize: number;            //  (numeric) virtual transaction size of in-mempool ancestors (including this one)
+    wtxid: string;                   //  (string) hash of serialized transactionumber; including witness data
+    fees: {
+      base: number;                  //  (numeric) transaction fee in BTC
+      modified: number;              //  (numeric) transaction fee with fee deltas used for mining priority in BTC
+      ancestor: number;              //  (numeric) modified fees (see above) of in-mempool ancestors (including this one) in BTC
+      descendant: number;            //  (numeric) modified fees (see above) of in-mempool descendants (including this one) in BTC
+    };
+    depends: string[];               //  (string) parent transaction id
+    spentby: string[];               //  (array) unconfirmed transactions spending outputs from this transaction
+    'bip125-replaceable': boolean;   //  (boolean) Whether this transaction could be replaced due to BIP125 (replace-by-fee)
+  }
+
+  export interface Block {
+    hash: string;                    //  (string) the block hash (same as provided)
+    confirmations: number;           //  (numeric) The number of confirmations, or -1 if the block is not on the main chain
+    size: number;                    //  (numeric) The block size
+    strippedsize: number;            //  (numeric) The block size excluding witness data
+    weight: number;                  //  (numeric) The block weight as defined in BIP 141
+    height: number;                  //  (numeric) The block height or index
+    version: number;                 //  (numeric) The block version
+    versionHex: string;              //  (string) The block version formatted in hexadecimal
+    merkleroot: string;              //  (string) The merkle root
+    tx: Transaction[];
+    time: number;                    //  (numeric) The block time expressed in UNIX epoch time
+    mediantime: number;              //  (numeric) The median block time expressed in UNIX epoch time
+    nonce: number;                   //  (numeric) The nonce
+    bits: string;                    //  (string) The bits
+    difficulty: number;              //  (numeric) The difficulty
+    chainwork: string;               //  (string) Expected number of hashes required to produce the chain up to this block (in hex)
+    nTx: number;                     //  (numeric) The number of transactions in the block
+    previousblockhash: string;       //  (string) The hash of the previous block
+    nextblockhash: string;           //  (string) The hash of the next block
+  }
+
+  export interface Transaction {
+    in_active_chain: boolean;        //  (boolean) Whether specified block is in the active chain or not
+    hex: string;                     //  (string) The serialized, hex-encoded data for 'txid'
+    txid: string;                    //  (string) The transaction id (same as provided)
+    hash: string;                    //  (string) The transaction hash (differs from txid for witness transactions)
+    size: number;                    //  (numeric) The serialized transaction size
+    vsize: number;                   //  (numeric) The virtual transaction size (differs from size for witness transactions)
+    weight: number;                  //  (numeric) The transaction's weight (between vsize*4-3 and vsize*4)
+    version: number;                 //  (numeric) The version
+    locktime: number;                //  (numeric) The lock time
+    vin: Vin[];
+    vout: Vout[];
+    blockhash: string;               //  (string) the block hash
+    confirmations: number;           //  (numeric) The confirmations
+    blocktime: number;               //  (numeric) The block time expressed in UNIX epoch time
+    time: number;                    //  (numeric) Same as blocktime
+  }
+
+  interface Vin {
+    txid?: string;                   //  (string) The transaction id
+    vout?: number;                   //  (string)
+    scriptSig?: {                    //  (json object) The script
+      asm: string;                   //  (string) asm
+      hex: string;                   //  (string) hex
+    };
+    sequence: number;                //  (numeric) The script sequence number
+    txinwitness?: string[];          //  (string) hex-encoded witness data
+    coinbase?: string;
+  }
+
+  interface Vout {
+    value: number;                   //  (numeric) The value in BTC
+    n: number;                       //  (numeric) index
+    scriptPubKey: {                  //  (json object)
+      asm: string;                   //  (string) the asm
+      hex: string;                   //  (string) the hex
+      reqSigs: number;               //  (numeric) The required sigs
+      type: string;                  //  (string) The type, eg 'pubkeyhash'
+      addresses: string[]            //  (string) bitcoin address
+    };
+  }
+
+  export interface AddressInformation {
+    isvalid: boolean;                //  (boolean) If the address is valid or not. If not, this is the only property returned.
+    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
+  }
+
+  export interface ChainTips {
+    height: number;                  //  (numeric) height of the chain tip
+    hash: string;                    //  (string) block hash of the tip
+    branchlen: number;               //  (numeric) zero for main chain, otherwise length of branch connecting the tip to the main chain
+    status: 'invalid' | 'headers-only' | 'valid-headers' | 'valid-fork' | 'active';
+  }
+
+}

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

@@ -0,0 +1,298 @@
+import config from '../../config';
+import * as bitcoin from '@mempool/bitcoin';
+import * as bitcoinjs from 'bitcoinjs-lib';
+import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
+import { IBitcoinApi } from './bitcoin-api.interface';
+import { IEsploraApi } from './esplora-api.interface';
+import blocks from '../blocks';
+import bitcoinBaseApi from './bitcoin-base.api';
+import mempool from '../mempool';
+import { TransactionExtended } from '../../mempool.interfaces';
+
+class BitcoinApi implements AbstractBitcoinApi {
+  private rawMempoolCache: IBitcoinApi.RawMempool | null = null;
+  private bitcoindClient: any;
+
+  constructor() {
+    this.bitcoindClient = new bitcoin.Client({
+      host: config.CORE_RPC.HOST,
+      port: config.CORE_RPC.PORT,
+      user: config.CORE_RPC.USERNAME,
+      pass: config.CORE_RPC.PASSWORD,
+      timeout: 60000,
+    });
+  }
+
+  $getRawTransactionBitcoind(txId: string, skipConversion = false, addPrevout = false): Promise<IEsploraApi.Transaction> {
+    return this.bitcoindClient.getRawTransaction(txId, true)
+      .then((transaction: IBitcoinApi.Transaction) => {
+        if (skipConversion) {
+          return transaction;
+        }
+        return this.$convertTransaction(transaction, addPrevout);
+      });
+  }
+
+  $getRawTransaction(txId: string, skipConversion = false, addPrevout = false): Promise<IEsploraApi.Transaction> {
+    // If the transaction is in the mempool we already converted and fetched the fee. Only prevouts are missing
+    const txInMempool = mempool.getMempool()[txId];
+    if (txInMempool && addPrevout) {
+      return this.$addPrevouts(txInMempool);
+    }
+
+    // Special case to fetch the Coinbase transaction
+    if (txId === '4a5e1e4baab89f3a32518a88c31bc87f618f76673e2cc77ab2127b7afdeda33b') {
+      return this.$returnCoinbaseTransaction();
+    }
+
+    return this.bitcoindClient.getRawTransaction(txId, true)
+      .then((transaction: IBitcoinApi.Transaction) => {
+        if (skipConversion) {
+          return transaction;
+        }
+        return this.$convertTransaction(transaction, addPrevout);
+      });
+  }
+
+  $getBlockHeightTip(): Promise<number> {
+    return this.bitcoindClient.getChainTips()
+      .then((result: IBitcoinApi.ChainTips[]) => result[0].height);
+  }
+
+  $getTxIdsForBlock(hash: string): Promise<string[]> {
+    return this.bitcoindClient.getBlock(hash, 1)
+      .then((rpcBlock: IBitcoinApi.Block) => rpcBlock.tx);
+  }
+
+  $getBlockHash(height: number): Promise<string> {
+    return this.bitcoindClient.getBlockHash(height);
+  }
+
+  async $getBlock(hash: string): Promise<IEsploraApi.Block> {
+    const foundBlock = blocks.getBlocks().find((block) => block.id === hash);
+    if (foundBlock) {
+      return foundBlock;
+    }
+
+    return this.bitcoindClient.getBlock(hash)
+      .then((block: IBitcoinApi.Block) => this.convertBlock(block));
+  }
+
+  $getAddress(address: string): Promise<IEsploraApi.Address> {
+    throw new Error('Method getAddress not supported by the Bitcoin RPC API.');
+  }
+
+  $getAddressTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]> {
+    throw new Error('Method getAddressTransactions not supported by the Bitcoin RPC API.');
+  }
+
+  $getRawMempool(): Promise<IEsploraApi.Transaction['txid'][]> {
+    return this.bitcoindClient.getRawMemPool();
+  }
+
+  $getAddressPrefix(prefix: string): string[] {
+    const found: string[] = [];
+    const mp = mempool.getMempool();
+    for (const tx in mp) {
+      for (const vout of mp[tx].vout) {
+        if (vout.scriptpubkey_address.indexOf(prefix) === 0) {
+          found.push(vout.scriptpubkey_address);
+          if (found.length >= 10) {
+            return found;
+          }
+        }
+      }
+    }
+    return found;
+  }
+
+  protected async $convertTransaction(transaction: IBitcoinApi.Transaction, addPrevout: boolean): Promise<IEsploraApi.Transaction> {
+    let esploraTransaction: IEsploraApi.Transaction = {
+      txid: transaction.txid,
+      version: transaction.version,
+      locktime: transaction.locktime,
+      size: transaction.size,
+      weight: transaction.weight,
+      fee: 0,
+      vin: [],
+      vout: [],
+      status: { confirmed: false },
+    };
+
+    esploraTransaction.vout = transaction.vout.map((vout) => {
+      return {
+        value: vout.value * 100000000,
+        scriptpubkey: vout.scriptPubKey.hex,
+        scriptpubkey_address: vout.scriptPubKey && vout.scriptPubKey.addresses ? vout.scriptPubKey.addresses[0] : '',
+        scriptpubkey_asm: vout.scriptPubKey.asm ? this.convertScriptSigAsm(vout.scriptPubKey.asm) : '',
+        scriptpubkey_type: this.translateScriptPubKeyType(vout.scriptPubKey.type),
+      };
+    });
+
+    esploraTransaction.vin = transaction.vin.map((vin) => {
+      return {
+        is_coinbase: !!vin.coinbase,
+        prevout: null,
+        scriptsig: vin.scriptSig && vin.scriptSig.hex || vin.coinbase || '',
+        scriptsig_asm: vin.scriptSig && this.convertScriptSigAsm(vin.scriptSig.asm) || '',
+        sequence: vin.sequence,
+        txid: vin.txid || '',
+        vout: vin.vout || 0,
+        witness: vin.txinwitness,
+      };
+    });
+
+    if (transaction.confirmations) {
+      esploraTransaction.status = {
+        confirmed: true,
+        block_height: blocks.getCurrentBlockHeight() - transaction.confirmations + 1,
+        block_hash: transaction.blockhash,
+        block_time: transaction.blocktime,
+      };
+    }
+
+    if (transaction.confirmations) {
+      esploraTransaction = await this.$calculateFeeFromInputs(esploraTransaction, addPrevout);
+    } else {
+      esploraTransaction = await this.$appendMempoolFeeData(esploraTransaction);
+    }
+
+    return esploraTransaction;
+  }
+
+  private convertBlock(block: IBitcoinApi.Block): IEsploraApi.Block {
+    return {
+      id: block.hash,
+      height: block.height,
+      version: block.version,
+      timestamp: block.time,
+      bits: parseInt(block.bits, 16),
+      nonce: block.nonce,
+      difficulty: block.difficulty,
+      merkle_root: block.merkleroot,
+      tx_count: block.nTx,
+      size: block.size,
+      weight: block.weight,
+      previousblockhash: block.previousblockhash,
+    };
+  }
+
+  private translateScriptPubKeyType(outputType: string): string {
+    const map = {
+      'pubkey': 'p2pk',
+      'pubkeyhash': 'p2pkh',
+      'scripthash': 'p2sh',
+      'witness_v0_keyhash': 'v0_p2wpkh',
+      'witness_v0_scripthash': 'v0_p2wsh',
+      'witness_v1_taproot': 'v1_p2tr',
+      'nonstandard': 'nonstandard',
+      'nulldata': 'op_return'
+    };
+
+    if (map[outputType]) {
+      return map[outputType];
+    } else {
+      return '';
+    }
+  }
+
+  private async $appendMempoolFeeData(transaction: IEsploraApi.Transaction): Promise<IEsploraApi.Transaction> {
+    if (transaction.fee) {
+      return transaction;
+    }
+    let mempoolEntry: IBitcoinApi.MempoolEntry;
+    if (!mempool.isInSync() && !this.rawMempoolCache) {
+      this.rawMempoolCache = await bitcoinBaseApi.$getRawMempoolVerbose();
+    }
+    if (this.rawMempoolCache && this.rawMempoolCache[transaction.txid]) {
+      mempoolEntry = this.rawMempoolCache[transaction.txid];
+    } else {
+      mempoolEntry = await bitcoinBaseApi.$getMempoolEntry(transaction.txid);
+    }
+    transaction.fee = mempoolEntry.fees.base * 100000000;
+    return transaction;
+  }
+
+  protected async $addPrevouts(transaction: TransactionExtended): Promise<TransactionExtended> {
+    for (const vin of transaction.vin) {
+      if (vin.prevout) {
+        continue;
+      }
+      const innerTx = await this.$getRawTransaction(vin.txid, false);
+      vin.prevout = innerTx.vout[vin.vout];
+      this.addInnerScriptsToVin(vin);
+    }
+    return transaction;
+  }
+
+  protected $returnCoinbaseTransaction(): Promise<IEsploraApi.Transaction> {
+    return this.bitcoindClient.getBlock('000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f', 2)
+      .then((block: IBitcoinApi.Block) => {
+        return this.$convertTransaction(Object.assign(block.tx[0], {
+          confirmations: blocks.getCurrentBlockHeight() + 1,
+          blocktime: 1231006505 }), false);
+      });
+  }
+
+  protected $validateAddress(address: string): Promise<IBitcoinApi.AddressInformation> {
+    return this.bitcoindClient.validateAddress(address);
+  }
+
+  private async $calculateFeeFromInputs(transaction: IEsploraApi.Transaction, addPrevout: boolean): Promise<IEsploraApi.Transaction> {
+    if (transaction.vin[0].is_coinbase) {
+      transaction.fee = 0;
+      return transaction;
+    }
+    let totalIn = 0;
+    for (const vin of transaction.vin) {
+      const innerTx = await this.$getRawTransaction(vin.txid, !addPrevout);
+      if (addPrevout) {
+        vin.prevout = innerTx.vout[vin.vout];
+        this.addInnerScriptsToVin(vin);
+      }
+      totalIn += innerTx.vout[vin.vout].value;
+    }
+    const totalOut = transaction.vout.reduce((p, output) => p + output.value, 0);
+    transaction.fee = parseFloat((totalIn - totalOut).toFixed(8));
+    return transaction;
+  }
+
+  private convertScriptSigAsm(str: string): string {
+    const a = str.split(' ');
+    const b: string[] = [];
+    a.forEach((chunk) => {
+      if (chunk.substr(0, 3) === 'OP_') {
+        chunk = chunk.replace(/^OP_(\d+)/, 'OP_PUSHNUM_$1');
+        chunk = chunk.replace('OP_CHECKSEQUENCEVERIFY', 'OP_CSV');
+        b.push(chunk);
+      } else {
+        chunk = chunk.replace('[ALL]', '01');
+        if (chunk === '0') {
+          b.push('OP_0');
+        } else {
+          b.push('OP_PUSHBYTES_' + Math.round(chunk.length / 2) + ' ' + chunk);
+        }
+      }
+    });
+    return b.join(' ');
+  }
+
+  private addInnerScriptsToVin(vin: IEsploraApi.Vin): void {
+    if (!vin.prevout) {
+      return;
+    }
+
+    if (vin.prevout.scriptpubkey_type === 'p2sh') {
+      const redeemScript = vin.scriptsig_asm.split(' ').reverse()[0];
+      vin.inner_redeemscript_asm = this.convertScriptSigAsm(bitcoinjs.script.toASM(Buffer.from(redeemScript, 'hex')));
+    }
+
+    if (vin.prevout.scriptpubkey_type === 'v0_p2wsh' && vin.witness) {
+      const witnessScript = vin.witness[vin.witness.length - 1];
+      vin.inner_witnessscript_asm = this.convertScriptSigAsm(bitcoinjs.script.toASM(Buffer.from(witnessScript, 'hex')));
+    }
+  }
+
+}
+
+export default BitcoinApi;

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

@@ -0,0 +1,36 @@
+import config from '../../config';
+import * as bitcoin from '@mempool/bitcoin';
+import { IBitcoinApi } from './bitcoin-api.interface';
+
+class BitcoinBaseApi {
+  bitcoindClient: any;
+
+  constructor() {
+    this.bitcoindClient = new bitcoin.Client({
+      host: config.CORE_RPC.HOST,
+      port: config.CORE_RPC.PORT,
+      user: config.CORE_RPC.USERNAME,
+      pass: config.CORE_RPC.PASSWORD,
+      timeout: 60000,
+    });
+  }
+
+  $getMempoolInfo(): Promise<IBitcoinApi.MempoolInfo> {
+    return this.bitcoindClient.getMempoolInfo();
+  }
+
+  $getRawTransaction(txId: string): Promise<IBitcoinApi.Transaction> {
+    return this.bitcoindClient.getRawTransaction(txId, true);
+  }
+
+  $getMempoolEntry(txid: string): Promise<IBitcoinApi.MempoolEntry> {
+    return this.bitcoindClient.getMempoolEntry(txid);
+  }
+
+  $getRawMempoolVerbose(): Promise<IBitcoinApi.RawMempool> {
+    return this.bitcoindClient.getRawMemPool(true);
+  }
+
+}
+
+export default new BitcoinBaseApi();

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

@@ -1,146 +0,0 @@
-const config = require('../../../mempool-config.json');
-import { Transaction, Block, MempoolInfo } from '../../interfaces';
-import * as request from 'request';
-
-class ElectrsApi {
-
-  constructor() {
-  }
-
-  getMempoolInfo(): Promise<MempoolInfo> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS_API_URL + '/mempool', { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject(err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (typeof response.count !== 'number') {
-            reject('Empty data');
-            return;
-          }
-          resolve({
-            size: response.count,
-            bytes: response.vsize,
-          });
-        }
-      });
-    });
-  }
-
-  getRawMempool(): Promise<Transaction['txid'][]> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS_API_URL + '/mempool/txids', { json: true, timeout: 10000, forever: true }, (err, res, response) => {
-        if (err) {
-          reject(err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (response.constructor === Array) {
-            resolve(response);
-          } else {
-            reject('returned invalid data');
-          }
-        }
-      });
-    });
-  }
-
-  getRawTransaction(txId: string): Promise<Transaction> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS_API_URL + '/tx/' + txId, { json: true, timeout: 10000, forever: true }, (err, res, response) => {
-        if (err) {
-          reject(err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (response.constructor === Object) {
-            resolve(response);
-          } else {
-            reject('returned invalid data');
-          }
-        }
-      });
-    });
-  }
-
-  getBlockHeightTip(): Promise<number> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS_API_URL + '/blocks/tip/height', { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject(err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          resolve(response);
-        }
-      });
-    });
-  }
-
-  getTxIdsForBlock(hash: string): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS_API_URL + '/block/' + hash + '/txids', { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject(err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (response.constructor === Array) {
-            resolve(response);
-          } else {
-            reject('returned invalid data');
-          }
-        }
-      });
-    });
-  }
-
-  getBlockHash(height: number): Promise<string> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS_API_URL + '/block-height/' + height, { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject(err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else  {
-          resolve(response);
-        }
-      });
-    });
-  }
-
-  getBlocksFromHeight(height: number): Promise<string> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS_API_URL + '/blocks/' + height, { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject(err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else  {
-          resolve(response);
-        }
-      });
-    });
-  }
-
-  getBlock(hash: string): Promise<Block> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS_API_URL + '/block/' + hash, { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject(err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (response.constructor === Object) {
-            resolve(response);
-          } else {
-            reject('getBlock returned invalid data');
-          }
-        }
-      });
-    });
-  }
-}
-
-export default new ElectrsApi();

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

@@ -0,0 +1,12 @@
+export namespace IElectrumApi {
+  export interface ScriptHashBalance {
+    confirmed: number;
+    unconfirmed: number;
+  }
+
+  export interface ScriptHashHistory {
+    height: number;
+    tx_hash: string;
+    fee?: number;
+  }
+}

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

@@ -0,0 +1,179 @@
+import config from '../../config';
+import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
+import { IBitcoinApi } from './bitcoin-api.interface';
+import { IEsploraApi } from './esplora-api.interface';
+import { IElectrumApi } from './electrum-api.interface';
+import BitcoinApi from './bitcoin-api';
+import mempool from '../mempool';
+import logger from '../../logger';
+import * as ElectrumClient from '@mempool/electrum-client';
+import * as sha256 from 'crypto-js/sha256';
+import * as hexEnc from 'crypto-js/enc-hex';
+import loadingIndicators from '../loading-indicators';
+import memoryCache from '../memory-cache';
+
+class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
+  private electrumClient: any;
+
+  constructor() {
+    super();
+
+    const electrumConfig = { client: 'mempool-v2', version: '1.4' };
+    const electrumPersistencePolicy = { retryPeriod: 10000, maxRetry: 1000, callback: null };
+
+    const electrumCallbacks = {
+      onConnect: (client, versionInfo) => { logger.info(`Connected to Electrum Server at ${config.ELECTRUM.HOST}:${config.ELECTRUM.PORT} (${JSON.stringify(versionInfo)})`); },
+      onClose: (client) => { logger.info(`Disconnected from Electrum Server at ${config.ELECTRUM.HOST}:${config.ELECTRUM.PORT}`); },
+      onError: (err) => { logger.err(`Electrum error: ${JSON.stringify(err)}`); },
+      onLog: (str) => { logger.debug(str); },
+    };
+
+    this.electrumClient = new ElectrumClient(
+      config.ELECTRUM.PORT,
+      config.ELECTRUM.HOST,
+      config.ELECTRUM.TLS_ENABLED ? 'tls' : 'tcp',
+      null,
+      electrumCallbacks
+    );
+
+    this.electrumClient.initElectrum(electrumConfig, electrumPersistencePolicy)
+      .then(() => {})
+      .catch((err) => {
+        logger.err(`Error connecting to Electrum Server at ${config.ELECTRUM.HOST}:${config.ELECTRUM.PORT}`);
+      });
+  }
+
+  async $getRawTransaction(txId: string, skipConversion = false, addPrevout = false): Promise<IEsploraApi.Transaction> {
+    if (!config.ELECTRUM.TX_LOOKUPS) {
+      return super.$getRawTransaction(txId, skipConversion, addPrevout);
+    }
+    const txInMempool = mempool.getMempool()[txId];
+    if (txInMempool && addPrevout) {
+      return this.$addPrevouts(txInMempool);
+    }
+    const transaction: IBitcoinApi.Transaction = await this.electrumClient.blockchainTransaction_get(txId, true);
+    if (!transaction) {
+      throw new Error('Unable to get transaction: ' + txId);
+    }
+    if (skipConversion) {
+      // @ts-ignore
+      return transaction;
+    }
+    return this.$convertTransaction(transaction, addPrevout);
+  }
+
+  async $getAddress(address: string): Promise<IEsploraApi.Address> {
+    const addressInfo = await this.$validateAddress(address);
+    if (!addressInfo || !addressInfo.isvalid) {
+      return ({
+        'address': address,
+        'chain_stats': {
+          'funded_txo_count': 0,
+          'funded_txo_sum': 0,
+          'spent_txo_count': 0,
+          'spent_txo_sum': 0,
+          'tx_count': 0
+        },
+        'mempool_stats': {
+          'funded_txo_count': 0,
+          'funded_txo_sum': 0,
+          'spent_txo_count': 0,
+          'spent_txo_sum': 0,
+          'tx_count': 0
+        }
+      });
+    }
+
+    try {
+      const balance = await this.$getScriptHashBalance(addressInfo.scriptPubKey);
+      const history = await this.$getScriptHashHistory(addressInfo.scriptPubKey);
+
+      const unconfirmed = history.filter((h) => h.fee).length;
+
+      return {
+        'address': addressInfo.address,
+        'chain_stats': {
+          'funded_txo_count': 0,
+          'funded_txo_sum': balance.confirmed ? balance.confirmed : 0,
+          'spent_txo_count': 0,
+          'spent_txo_sum': balance.confirmed < 0 ? balance.confirmed : 0,
+          'tx_count': history.length - unconfirmed,
+        },
+        'mempool_stats': {
+          'funded_txo_count': 0,
+          'funded_txo_sum': balance.unconfirmed > 0 ? balance.unconfirmed : 0,
+          'spent_txo_count': 0,
+          'spent_txo_sum': balance.unconfirmed < 0 ? -balance.unconfirmed : 0,
+          'tx_count': unconfirmed,
+        }
+      };
+    } catch (e) {
+      if (e === 'failed to get confirmed status') {
+        e = 'The number of transactions on this address exceeds the Electrum server limit';
+      }
+      throw new Error(e);
+    }
+  }
+
+  async $getAddressTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]> {
+    const addressInfo = await this.$validateAddress(address);
+    if (!addressInfo || !addressInfo.isvalid) {
+     return [];
+    }
+
+    try {
+      loadingIndicators.setProgress('address-' + address, 0);
+
+      const transactions: IEsploraApi.Transaction[] = [];
+      const history = await this.$getScriptHashHistory(addressInfo.scriptPubKey);
+      history.sort((a, b) => (b.height || 9999999) - (a.height || 9999999));
+
+      let startingIndex = 0;
+      if (lastSeenTxId) {
+        const pos = history.findIndex((historicalTx) => historicalTx.tx_hash === lastSeenTxId);
+        if (pos) {
+          startingIndex = pos + 1;
+        }
+      }
+      const endIndex = Math.min(startingIndex + 10, history.length);
+
+      for (let i = startingIndex; i < endIndex; i++) {
+        const tx = await this.$getRawTransaction(history[i].tx_hash, false, true);
+        transactions.push(tx);
+        loadingIndicators.setProgress('address-' + address, (i + 1) / endIndex * 100);
+      }
+
+      return transactions;
+    } catch (e) {
+      loadingIndicators.setProgress('address-' + address, 100);
+      if (e === 'failed to get confirmed status') {
+        e = 'The number of transactions on this address exceeds the Electrum server limit';
+      }
+      throw new Error(e);
+    }
+  }
+
+  private $getScriptHashBalance(scriptHash: string): Promise<IElectrumApi.ScriptHashBalance> {
+    return this.electrumClient.blockchainScripthash_getBalance(this.encodeScriptHash(scriptHash));
+  }
+
+  private $getScriptHashHistory(scriptHash: string): Promise<IElectrumApi.ScriptHashHistory[]> {
+    const fromCache = memoryCache.get<IElectrumApi.ScriptHashHistory[]>('Scripthash_getHistory', scriptHash);
+    if (fromCache) {
+      return Promise.resolve(fromCache);
+    }
+    return this.electrumClient.blockchainScripthash_getHistory(this.encodeScriptHash(scriptHash))
+      .then((history) => {
+        memoryCache.set('Scripthash_getHistory', scriptHash, history, 2);
+        return history;
+      });
+  }
+
+  private encodeScriptHash(scriptPubKey: string): string {
+    const addrScripthash = hexEnc.stringify(sha256(hexEnc.parse(scriptPubKey)));
+    return addrScripthash.match(/.{2}/g).reverse().join('');
+  }
+
+}
+
+export default BitcoindElectrsApi;

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

@@ -0,0 +1,168 @@
+export namespace IEsploraApi {
+  export interface Transaction {
+    txid: string;
+    version: number;
+    locktime: number;
+    size: number;
+    weight: number;
+    fee: number;
+    vin: Vin[];
+    vout: Vout[];
+    status: Status;
+  }
+
+  export interface Recent {
+    txid: string;
+    fee: number;
+    vsize: number;
+    value: number;
+  }
+
+  export interface Vin {
+    txid: string;
+    vout: number;
+    is_coinbase: boolean;
+    scriptsig: string;
+    scriptsig_asm: string;
+    inner_redeemscript_asm?: string;
+    inner_witnessscript_asm?: string;
+    sequence: any;
+    witness?: string[];
+    prevout: Vout | null;
+    // Elements
+    is_pegin?: boolean;
+    issuance?: Issuance;
+  }
+
+  interface Issuance {
+    asset_id: string;
+    is_reissuance: string;
+    asset_blinding_nonce: string;
+    asset_entropy: string;
+    contract_hash: string;
+    assetamount?: number;
+    assetamountcommitment?: string;
+    tokenamount?: number;
+    tokenamountcommitment?: string;
+  }
+
+  export interface Vout {
+    scriptpubkey: string;
+    scriptpubkey_asm: string;
+    scriptpubkey_type: string;
+    scriptpubkey_address: string;
+    value: number;
+    // Elements
+    valuecommitment?: number;
+    asset?: string;
+    pegout?: Pegout;
+  }
+
+  interface Pegout {
+    genesis_hash: string;
+    scriptpubkey: string;
+    scriptpubkey_asm: string;
+    scriptpubkey_address: string;
+  }
+
+  export interface Status {
+    confirmed: boolean;
+    block_height?: number;
+    block_hash?: string;
+    block_time?: number;
+  }
+
+  export interface Block {
+    id: string;
+    height: number;
+    version: number;
+    timestamp: number;
+    bits: number;
+    nonce: number;
+    difficulty: number;
+    merkle_root: string;
+    tx_count: number;
+    size: number;
+    weight: number;
+    previousblockhash: string;
+  }
+
+  export interface Address {
+    address: string;
+    chain_stats: ChainStats;
+    mempool_stats: MempoolStats;
+  }
+
+  export interface ChainStats {
+    funded_txo_count: number;
+    funded_txo_sum: number;
+    spent_txo_count: number;
+    spent_txo_sum: number;
+    tx_count: number;
+  }
+
+  export interface MempoolStats {
+    funded_txo_count: number;
+    funded_txo_sum: number;
+    spent_txo_count: number;
+    spent_txo_sum: number;
+    tx_count: number;
+  }
+
+  export interface Outspend {
+    spent: boolean;
+    txid: string;
+    vin: number;
+    status: Status;
+  }
+
+  export interface Asset {
+    asset_id: string;
+    issuance_txin: IssuanceTxin;
+    issuance_prevout: IssuancePrevout;
+    reissuance_token: string;
+    contract_hash: string;
+    status: Status;
+    chain_stats: AssetStats;
+    mempool_stats: AssetStats;
+  }
+
+  export interface AssetExtended extends Asset {
+    name: string;
+    ticker: string;
+    precision: number;
+    entity: Entity;
+    version: number;
+    issuer_pubkey: string;
+  }
+
+  export interface Entity {
+    domain: string;
+  }
+
+  interface IssuanceTxin {
+    txid: string;
+    vin: number;
+  }
+
+  interface IssuancePrevout {
+    txid: string;
+    vout: number;
+  }
+
+  interface AssetStats {
+    tx_count: number;
+    issuance_count: number;
+    issued_amount: number;
+    burned_amount: number;
+    has_blinded_issuances: boolean;
+    reissuance_tokens: number;
+    burned_reissuance_tokens: number;
+    peg_in_count: number;
+    peg_in_amount: number;
+    peg_out_count: number;
+    peg_out_amount: number;
+    burn_count: number;
+  }
+
+}

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

@@ -0,0 +1,58 @@
+import config from '../../config';
+import axios from 'axios';
+import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
+import { IEsploraApi } from './esplora-api.interface';
+
+class ElectrsApi implements AbstractBitcoinApi {
+
+  constructor() { }
+
+  $getRawMempool(): Promise<IEsploraApi.Transaction['txid'][]> {
+    return axios.get<IEsploraApi.Transaction['txid'][]>(config.ESPLORA.REST_API_URL + '/mempool/txids')
+      .then((response) => response.data);
+  }
+
+  $getRawTransaction(txId: string): Promise<IEsploraApi.Transaction> {
+    return axios.get<IEsploraApi.Transaction>(config.ESPLORA.REST_API_URL + '/tx/' + txId)
+      .then((response) => response.data);
+  }
+
+  $getBlockHeightTip(): Promise<number> {
+    return axios.get<number>(config.ESPLORA.REST_API_URL + '/blocks/tip/height')
+      .then((response) => response.data);
+  }
+
+  $getTxIdsForBlock(hash: string): Promise<string[]> {
+    return axios.get<string[]>(config.ESPLORA.REST_API_URL + '/block/' + hash + '/txids')
+      .then((response) => response.data);
+  }
+
+  $getBlockHash(height: number): Promise<string> {
+    return axios.get<string>(config.ESPLORA.REST_API_URL + '/block-height/' + height)
+      .then((response) => response.data);
+  }
+
+  $getBlock(hash: string): Promise<IEsploraApi.Block> {
+    return axios.get<IEsploraApi.Block>(config.ESPLORA.REST_API_URL + '/block/' + hash)
+      .then((response) => response.data);
+  }
+
+  $getAddress(address: string): Promise<IEsploraApi.Address> {
+    throw new Error('Method getAddress not implemented.');
+  }
+
+  $getAddressTransactions(address: string, txId?: string): Promise<IEsploraApi.Transaction[]> {
+    throw new Error('Method getAddressTransactions not implemented.');
+  }
+
+  $getRawTransactionBitcoind(txId: string): Promise<IEsploraApi.Transaction> {
+    return axios.get<IEsploraApi.Transaction>(config.ESPLORA.REST_API_URL + '/tx/' + txId)
+      .then((response) => response.data);
+  }
+
+  $getAddressPrefix(prefix: string): string[] {
+    throw new Error('Method not implemented.');
+  }
+}
+
+export default ElectrsApi;

backend/src/api/blocks.ts

@@ -1,107 +1,131 @@
-const config = require('../../mempool-config.json');
-import bitcoinApi from './bitcoin/electrs-api';
+import config from '../config';
+import bitcoinApi from './bitcoin/bitcoin-api-factory';
+import logger from '../logger';
 import memPool from './mempool';
-import { Block, TransactionExtended, TransactionMinerInfo } from '../interfaces';
+import { BlockExtended, TransactionExtended } from '../mempool.interfaces';
 import { Common } from './common';
+import diskCache from './disk-cache';
+import transactionUtils from './transaction-utils';
 
 class Blocks {
-  private blocks: Block[] = [];
+  private static INITIAL_BLOCK_AMOUNT = 8;
+  private blocks: BlockExtended[] = [];
   private currentBlockHeight = 0;
-  private newBlockCallback: ((block: Block, txIds: string[], transactions: TransactionExtended[]) => void) | undefined;
+  private lastDifficultyAdjustmentTime = 0;
+  private newBlockCallbacks: ((block: BlockExtended, txIds: string[], transactions: TransactionExtended[]) => void)[] = [];
 
   constructor() { }
 
-  public getBlocks(): Block[] {
+  public getBlocks(): BlockExtended[] {
     return this.blocks;
   }
 
-  public setBlocks(blocks: Block[]) {
+  public setBlocks(blocks: BlockExtended[]) {
     this.blocks = blocks;
   }
 
-  public setNewBlockCallback(fn: (block: Block, txIds: string[], transactions: TransactionExtended[]) => void) {
-    this.newBlockCallback = fn;
+  public setNewBlockCallback(fn: (block: BlockExtended, txIds: string[], transactions: TransactionExtended[]) => void) {
+    this.newBlockCallbacks.push(fn);
   }
 
-  public async updateBlocks() {
-    try {
-      const blockHeightTip = await bitcoinApi.getBlockHeightTip();
+  public async $updateBlocks() {
+    const blockHeightTip = await bitcoinApi.$getBlockHeightTip();
 
-      if (this.blocks.length === 0) {
-        this.currentBlockHeight = blockHeightTip - config.INITIAL_BLOCK_AMOUNT;
+    if (this.blocks.length === 0) {
+      this.currentBlockHeight = blockHeightTip - Blocks.INITIAL_BLOCK_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 (!this.lastDifficultyAdjustmentTime) {
+      const heightDiff = blockHeightTip % 2016;
+      const blockHash = await bitcoinApi.$getBlockHash(blockHeightTip - heightDiff);
+      const block = await bitcoinApi.$getBlock(blockHash);
+      this.lastDifficultyAdjustmentTime = block.timestamp;
+    }
+
+    while (this.currentBlockHeight < blockHeightTip) {
+      if (this.currentBlockHeight === 0) {
+        this.currentBlockHeight = blockHeightTip;
       } else {
-        this.currentBlockHeight = this.blocks[this.blocks.length - 1].height;
+        this.currentBlockHeight++;
+        logger.debug(`New block found (#${this.currentBlockHeight})!`);
       }
 
-      if (blockHeightTip - this.currentBlockHeight > config.INITIAL_BLOCK_AMOUNT * 2) {
-        console.log(`${blockHeightTip - this.currentBlockHeight} blocks since tip. Fast forwarding to the ${config.INITIAL_BLOCK_AMOUNT} recent blocks`);
-        this.currentBlockHeight = blockHeightTip - config.INITIAL_BLOCK_AMOUNT;
-      }
+      const transactions: TransactionExtended[] = [];
 
-      while (this.currentBlockHeight < blockHeightTip) {
-        if (this.currentBlockHeight === 0) {
-          this.currentBlockHeight = blockHeightTip;
-        } else {
-          this.currentBlockHeight++;
-          console.log(`New block found (#${this.currentBlockHeight})!`);
-        }
+      const blockHash = await bitcoinApi.$getBlockHash(this.currentBlockHeight);
+      const block = await bitcoinApi.$getBlock(blockHash);
+      const txIds: string[] = await bitcoinApi.$getTxIdsForBlock(blockHash);
 
-        const blockHash = await bitcoinApi.getBlockHash(this.currentBlockHeight);
-        const block = await bitcoinApi.getBlock(blockHash);
-        const txIds = await bitcoinApi.getTxIdsForBlock(blockHash);
+      const mempool = memPool.getMempool();
+      let transactionsFound = 0;
 
-        const mempool = memPool.getMempool();
-        let found = 0;
-        let notFound = 0;
-
-        const transactions: TransactionExtended[] = [];
-
-        for (let i = 0; i < txIds.length; i++) {
-          if (mempool[txIds[i]]) {
-            transactions.push(mempool[txIds[i]]);
-            found++;
-          } else {
-            console.log(`Fetching block tx ${i} of ${txIds.length}`);
-            const tx = await memPool.getTransactionExtended(txIds[i]);
+      for (let i = 0; i < txIds.length; i++) {
+        // When using bitcoind, just fetch the coinbase tx for now
+        if (config.MEMPOOL.BACKEND !== 'esplora' && i === 0) {
+          let txFound = false;
+          let findCoinbaseTxTries = 0;
+          // It takes Electrum Server a few seconds to index the transaction after a block is found
+          while (findCoinbaseTxTries < 5 && !txFound) {
+            const tx = await transactionUtils.$getTransactionExtended(txIds[i]);
             if (tx) {
+              txFound = true;
               transactions.push(tx);
+            } else {
+              await Common.sleep(1000);
+              findCoinbaseTxTries++;
             }
-            notFound++;
           }
         }
-
-        console.log(`${found} of ${txIds.length} found in mempool. ${notFound} not found.`);
-
-        block.reward = transactions[0].vout.reduce((acc, curr) => acc + curr.value, 0);
-        block.coinbaseTx = this.stripCoinbaseTransaction(transactions[0]);
-        transactions.sort((a, b) => b.feePerVsize - a.feePerVsize);
-        block.medianFee = transactions.length > 1 ? Common.median(transactions.map((tx) => tx.feePerVsize)) : 0;
-        block.feeRange = transactions.length > 1 ? Common.getFeesInRange(transactions.slice(0, transactions.length - 1), 8) : [0, 0];
-
-        this.blocks.push(block);
-        if (this.blocks.length > config.KEEP_BLOCK_AMOUNT) {
-          this.blocks.shift();
-        }
-
-        if (this.newBlockCallback) {
-          this.newBlockCallback(block, txIds, transactions);
+        if (mempool[txIds[i]]) {
+          transactions.push(mempool[txIds[i]]);
+          transactionsFound++;
+        } else if (config.MEMPOOL.BACKEND === 'esplora') {
+          logger.debug(`Fetching block tx ${i} of ${txIds.length}`);
+          const tx = await transactionUtils.$getTransactionExtended(txIds[i]);
+          if (tx) {
+            transactions.push(tx);
+          }
         }
       }
 
-    } catch (err) {
-      console.log('updateBlocks error', err);
+      logger.debug(`${transactionsFound} of ${txIds.length} found in mempool. ${txIds.length - transactionsFound} not found.`);
+
+      const blockExtended: BlockExtended = Object.assign({}, block);
+      blockExtended.reward = transactions[0].vout.reduce((acc, curr) => acc + curr.value, 0);
+      blockExtended.coinbaseTx = transactionUtils.stripCoinbaseTransaction(transactions[0]);
+      transactions.sort((a, b) => b.feePerVsize - a.feePerVsize);
+      blockExtended.medianFee = transactions.length > 1 ? Common.median(transactions.map((tx) => tx.feePerVsize)) : 0;
+      blockExtended.feeRange = transactions.length > 1 ? Common.getFeesInRange(transactions.slice(0, transactions.length - 1), 8) : [0, 0];
+
+      if (block.height % 2016 === 0) {
+        this.lastDifficultyAdjustmentTime = block.timestamp;
+      }
+
+      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.newBlockCallbacks.length) {
+        this.newBlockCallbacks.forEach((cb) => cb(blockExtended, txIds, transactions));
+      }
+      diskCache.$saveCacheToDisk();
     }
   }
 
-  private stripCoinbaseTransaction(tx: TransactionExtended): TransactionMinerInfo {
-    return {
-      vin: [{
-        scriptsig: tx.vin[0].scriptsig
-      }],
-      vout: tx.vout
-        .map((vout) => ({ scriptpubkey_address: vout.scriptpubkey_address, value: vout.value }))
-        .filter((vout) => vout.value)
-    };
+  public getLastDifficultyAdjustmentTime(): number {
+    return this.lastDifficultyAdjustmentTime;
+  }
+
+  public getCurrentBlockHeight(): number {
+    return this.currentBlockHeight;
   }
 }
 

backend/src/api/common.ts

@@ -1,4 +1,4 @@
-import { TransactionExtended } from '../interfaces';
+import { TransactionExtended, TransactionStripped } from '../mempool.interfaces';
 
 export class Common {
   static median(numbers: number[]) {
@@ -47,4 +47,21 @@ export class Common {
       });
     return matches;
   }
+
+  static stripTransaction(tx: TransactionExtended): TransactionStripped {
+    return {
+      txid: tx.txid,
+      fee: tx.fee,
+      weight: tx.weight,
+      value: tx.vout.reduce((acc, vout) => acc + (vout.value ? vout.value : 0), 0),
+    };
+  }
+
+  static sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => {
+       setTimeout(() => {
+         resolve();
+       }, ms);
+    });
+  }
 }

backend/src/api/disk-cache.ts

@@ -1,50 +1,86 @@
 import * as fs from 'fs';
+const fsPromises = fs.promises;
+import * as process from 'process';
+import * as cluster from 'cluster';
 import memPool from './mempool';
 import blocks from './blocks';
+import logger from '../logger';
 
 class DiskCache {
-  static FILE_NAME = './cache.json';
-
+  private static FILE_NAME = './cache.json';
+  private static FILE_NAME_2 = './cache2.json';
+  private static CHUNK_SIZE = 50000;
   constructor() {
+    if (!cluster.isMaster) {
+      return;
+    }
     process.on('SIGINT', () => {
-      this.saveCacheToDisk();
+      this.saveCacheToDiskSync();
       process.exit(2);
     });
-
     process.on('SIGTERM', () => {
-      this.saveCacheToDisk();
+      this.saveCacheToDiskSync();
       process.exit(2);
     });
   }
 
-  saveCacheToDisk() {
-    this.saveData(JSON.stringify({
-      mempool: memPool.getMempool(),
-      blocks: blocks.getBlocks(),
-    }));
-    console.log('Mempool and blocks data saved to disk cache');
-  }
-
-  loadMempoolCache() {
-    const cacheData = this.loadData();
-    if (cacheData) {
-      console.log('Restoring mempool and blocks data from disk cache');
-      const data = JSON.parse(cacheData);
-      if (data.mempool) {
-        memPool.setMempool(data.mempool);
-        blocks.setBlocks(data.blocks);
-      } else {
-        memPool.setMempool(data);
-      }
+  async $saveCacheToDisk(): Promise<void> {
+    if (!cluster.isMaster) {
+      return;
+    }
+    try {
+      logger.debug('Writing mempool and blocks data to disk cache (async)...');
+      const mempoolChunk_1 = Object.fromEntries(Object.entries(memPool.getMempool()).splice(0, DiskCache.CHUNK_SIZE));
+      const mempoolChunk_2 = Object.fromEntries(Object.entries(memPool.getMempool()).splice(DiskCache.CHUNK_SIZE));
+      await fsPromises.writeFile(DiskCache.FILE_NAME, JSON.stringify({
+        blocks: blocks.getBlocks(),
+        mempool: mempoolChunk_1
+      }), {flag: 'w'});
+      await fsPromises.writeFile(DiskCache.FILE_NAME_2, JSON.stringify({
+        mempool: mempoolChunk_2
+      }), {flag: 'w'});
+      logger.debug('Mempool and blocks data saved to disk cache');
+    } catch (e) {
+      logger.warn('Error writing to cache file: ' + e.message || e);
     }
   }
 
-  private saveData(dataBlob: string) {
-    fs.writeFileSync(DiskCache.FILE_NAME, dataBlob, 'utf8');
+  saveCacheToDiskSync(): void {
+    try {
+      logger.debug('Writing mempool and blocks data to disk cache...');
+      const mempoolChunk_1 = Object.fromEntries(Object.entries(memPool.getMempool()).splice(0, DiskCache.CHUNK_SIZE));
+      const mempoolChunk_2 = Object.fromEntries(Object.entries(memPool.getMempool()).splice(DiskCache.CHUNK_SIZE));
+      fs.writeFileSync(DiskCache.FILE_NAME, JSON.stringify({
+        blocks: blocks.getBlocks(),
+        mempool: mempoolChunk_1
+      }), {flag: 'w'});
+      fs.writeFileSync(DiskCache.FILE_NAME_2, JSON.stringify({
+        mempool: mempoolChunk_2
+      }), {flag: 'w'});
+      logger.debug('Mempool and blocks data saved to disk cache');
+    } catch (e) {
+      logger.warn('Error writing to cache file: ' + e.message || e);
+    }
   }
 
-  private loadData(): string {
-    return fs.readFileSync(DiskCache.FILE_NAME, 'utf8');
+  loadMempoolCache() {
+    if (!fs.existsSync(DiskCache.FILE_NAME)) {
+      return;
+    }
+    let data: any = {};
+    const cacheData = fs.readFileSync(DiskCache.FILE_NAME, 'utf8');
+    if (cacheData) {
+      logger.info('Restoring mempool and blocks data from disk cache');
+      data = JSON.parse(cacheData);
+    }
+
+    if (fs.existsSync(DiskCache.FILE_NAME_2)) {
+      const cacheData2 = JSON.parse(fs.readFileSync(DiskCache.FILE_NAME_2, 'utf8'));
+      Object.assign(data.mempool, cacheData2.mempool);
+    }
+
+    memPool.setMempool(data.mempool);
+    blocks.setBlocks(data.blocks);
   }
 }
 

backend/src/api/donations.ts

@@ -0,0 +1,201 @@
+import config from '../config';
+import axios from 'axios';
+import { DB } from '../database';
+import logger from '../logger';
+
+class Donations {
+  private notifyDonationStatusCallback: ((invoiceId: string) => void) | undefined;
+  private options = {
+    baseURL: config.SPONSORS.BTCPAY_URL,
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': config.SPONSORS.BTCPAY_AUTH,
+    },
+  };
+
+  sponsorsCache: any[] = [];
+
+  constructor() {
+    if (!config.SPONSORS.ENABLED) {
+      return;
+    }
+    this.$updateCache();
+  }
+
+  async $updateCache() {
+    try {
+      this.sponsorsCache = await this.$getDonationsFromDatabase('handle, image');
+    } catch (e) {
+      logger.warn('Setting sponsorsCache failed ' + e.message || e);
+    }
+  }
+
+  setNotfyDonationStatusCallback(fn: any): void {
+    this.notifyDonationStatusCallback = fn;
+  }
+
+  async $createRequest(amount: number, orderId: string): Promise<any> {
+    logger.notice('New invoice request. Handle: ' + orderId + ' Amount: ' + amount + ' BTC');
+
+    const postData = {
+      'price': amount,
+      'orderId': orderId,
+      'currency': 'BTC',
+      'itemDesc': 'Sponsor mempool.space',
+      'notificationUrl': config.SPONSORS.BTCPAY_WEBHOOK_URL,
+      'redirectURL': 'https://mempool.space/about',
+    };
+    const response = await axios.post('/invoices', postData, this.options);
+    return {
+      id: response.data.data.id,
+      amount: parseFloat(response.data.data.btcPrice),
+      addresses: response.data.data.addresses,
+    };
+  }
+
+  async $handleWebhookRequest(data: any): Promise<void> {
+    if (!data || !data.id) {
+      return;
+    }
+    const response = await this.$getStatus(data.id);
+    logger.notice(`Received BTCPayServer webhook. Invoice ID: ${data.id} Status: ${response.status} BTC Paid: ${response.btcPaid}`);
+    if (response.status !== 'complete' && response.status !== 'confirmed' && response.status !== 'paid') {
+      return;
+    }
+
+    if (this.notifyDonationStatusCallback) {
+      this.notifyDonationStatusCallback(data.id);
+    }
+
+    if (parseFloat(response.btcPaid) < 0.01) {
+      return;
+    }
+
+    if (response.orderId !== '') {
+      try {
+        const userData = await this.$getTwitterUserData(response.orderId);
+        const imageUrl = userData.profile_image_url.replace('normal', '200x200');
+        const imageBlob = await this.$downloadProfileImageBlob(imageUrl);
+
+        logger.debug('Creating database entry for donation with invoice id: ' + response.id);
+        await this.$addDonationToDatabase(response.btcPaid, userData.screen_name, userData.id, response.id, imageUrl, imageBlob);
+        this.$updateCache();
+      } catch (e) {
+        logger.err(`Error fetching twitter data for handle ${response.orderId}: ${e.message}`);
+      }
+    }
+  }
+
+  getSponsorImage(id: string): any | undefined {
+    const sponsor = this.sponsorsCache.find((s) => s.handle === id);
+    if (sponsor) {
+      return sponsor.image;
+    }
+  }
+
+  async $getDonationsFromDatabase(fields: string): Promise<any[]> {
+    try {
+      const connection = await DB.pool.getConnection();
+      const query = `SELECT ${fields} FROM donations ORDER BY id DESC`;
+      const [rows] = await connection.query<any>(query);
+      connection.release();
+      return rows;
+    } catch (e) {
+      logger.err('$getDonationsFromDatabase() error: ' + e.message || e);
+      return [];
+    }
+  }
+
+  private async $getOldDonations(): Promise<any[]> {
+    try {
+      const connection = await DB.pool.getConnection();
+      const query = `SELECT * FROM donations WHERE twitter_id IS NULL AND handle != ''`;
+      const [rows] = await connection.query<any>(query);
+      connection.release();
+      return rows;
+    } catch (e) {
+      logger.err('$getLegacyDonations() error' + e.message || e);
+      return [];
+    }
+  }
+
+  private async $getStatus(id: string): Promise<any> {
+    logger.debug('Fetching status for invoice: ' + id);
+    const response = await axios.get('/invoices/' + id, this.options);
+    logger.debug('Invoice status received: ' + JSON.stringify(response.data));
+    return response.data.data;
+  }
+
+  private async $addDonationToDatabase(btcPaid: number, handle: string, twitter_id: number | null,
+    orderId: string, imageUrl: string, image: string): Promise<void> {
+    try {
+      const connection = await DB.pool.getConnection();
+      const query = `INSERT IGNORE INTO donations(added, amount, handle, twitter_id, order_id, imageUrl, image) VALUES (NOW(), ?, ?, ?, ?, ?, FROM_BASE64(?))`;
+      const params: (string | number | null)[] = [
+        btcPaid,
+        handle,
+        twitter_id,
+        orderId,
+        imageUrl,
+        image,
+      ];
+      const [result]: any = await connection.query(query, params);
+      connection.release();
+    } catch (e) {
+      logger.err('$addDonationToDatabase() error' + e.message || e);
+    }
+  }
+
+  private async $updateDonation(id: number, handle: string, twitterId: number, imageUrl: string, image: string): Promise<void> {
+    try {
+      const connection = await DB.pool.getConnection();
+      const query = `UPDATE donations SET handle = ?, twitter_id = ?, imageUrl = ?, image = FROM_BASE64(?) WHERE id = ?`;
+      const params: (string | number)[] = [
+        handle,
+        twitterId,
+        imageUrl,
+        image,
+        id,
+      ];
+      const [result]: any = await connection.query(query, params);
+      connection.release();
+    } catch (e) {
+      logger.err('$updateDonation() error' + e.message || e);
+    }
+  }
+
+  private async $getTwitterUserData(handle: string): Promise<any> {
+    logger.debug('Fetching Twitter API data...');
+    const res = await axios.get(`https://api.twitter.com/1.1/users/show.json?screen_name=${handle}`, {
+      headers: {
+        Authorization: 'Bearer ' + config.SPONSORS.TWITTER_BEARER_AUTH
+      }
+    });
+    logger.debug('Twitter user data fetched:' + JSON.stringify(res.data));
+    return res.data;
+  }
+
+  private async $downloadProfileImageBlob(url: string): Promise<string> {
+    logger.debug('Fetching image blob...');
+    const res = await axios.get(url, { responseType: 'arraybuffer' });
+    logger.debug('Image downloaded.');
+    return Buffer.from(res.data, 'utf8').toString('base64');
+  }
+
+  private async refreshSponsors(): Promise<void> {
+    const oldDonations = await this.$getOldDonations();
+    oldDonations.forEach(async (donation: any) => {
+      logger.debug('Migrating donation for handle: ' + donation.handle);
+      try {
+        const twitterData = await this.$getTwitterUserData(donation.handle);
+        const imageUrl = twitterData.profile_image_url.replace('normal', '200x200');
+        const imageBlob = await this.$downloadProfileImageBlob(imageUrl);
+        await this.$updateDonation(donation.id, twitterData.screen_name, twitterData.id, imageUrl, imageBlob);
+      } catch (e) {
+        logger.err('Failed to migrate donation for handle: ' + donation.handle + '. ' + (e.message || e));
+      }
+    });
+  }
+}
+
+export default new Donations();

backend/src/api/fee-api.ts

@@ -1,25 +1,26 @@
+import config from '../config';
+import { MempoolBlock } from '../mempool.interfaces';
 import projectedBlocks from './mempool-blocks';
 
 class FeeApi {
   constructor() { }
 
+  defaultFee = config.MEMPOOL.NETWORK === 'liquid' ? 0.1 : 1;
+
   public getRecommendedFee() {
     const pBlocks = projectedBlocks.getMempoolBlocks();
+
     if (!pBlocks.length) {
       return {
-        'fastestFee': 0,
-        'halfHourFee': 0,
-        'hourFee': 0,
+        'fastestFee': this.defaultFee,
+        'halfHourFee': this.defaultFee,
+        'hourFee': this.defaultFee,
       };
     }
-    let firstMedianFee = Math.ceil(pBlocks[0].medianFee);
 
-    if (pBlocks.length === 1 && pBlocks[0].blockVSize <= 500000) {
-      firstMedianFee = 1;
-    }
-
-    const secondMedianFee = pBlocks[1] ? Math.ceil(pBlocks[1].medianFee) : firstMedianFee;
-    const thirdMedianFee = pBlocks[2] ? Math.ceil(pBlocks[2].medianFee) : secondMedianFee;
+    const firstMedianFee = this.optimizeMedianFee(pBlocks[0]);
+    const secondMedianFee = pBlocks[1] ? this.optimizeMedianFee(pBlocks[1], firstMedianFee) : this.defaultFee;
+    const thirdMedianFee = pBlocks[2] ? this.optimizeMedianFee(pBlocks[2], secondMedianFee) : this.defaultFee;
 
     return {
       'fastestFee': firstMedianFee,
@@ -27,6 +28,18 @@ class FeeApi {
       'hourFee': thirdMedianFee,
     };
   }
+
+  private optimizeMedianFee(pBlock: MempoolBlock, previousFee?: number): number {
+    const useFee = previousFee ? (pBlock.medianFee + previousFee) / 2 : pBlock.medianFee;
+    if (pBlock.blockVSize <= 500000) {
+      return this.defaultFee;
+    }
+    if (pBlock.blockVSize <= 950000) {
+      const multiplier = (pBlock.blockVSize - 500000) / 500000;
+      return Math.max(Math.round(useFee * multiplier), this.defaultFee);
+    }
+    return Math.round(useFee);
+  }
 }
 
 export default new FeeApi();

backend/src/api/fiat-conversion.ts

@@ -1,31 +1,42 @@
-import * as request from 'request';
+import logger from '../logger';
+import axios from 'axios';
+import { IConversionRates } from '../mempool.interfaces';
 
 class FiatConversion {
-  private tickers = {
-    'BTCUSD': {
-      'USD': 4110.78
-    },
+  private conversionRates: IConversionRates = {
+    'USD': 0
   };
+  private ratesChangedCallback: ((rates: IConversionRates) => void) | undefined;
 
   constructor() { }
 
+  public setProgressChangedCallback(fn: (rates: IConversionRates) => void) {
+    this.ratesChangedCallback = fn;
+  }
+
   public startService() {
-    console.log('Starting currency rates service');
+    logger.info('Starting currency rates service');
     setInterval(this.updateCurrency.bind(this), 1000 * 60 * 60);
     this.updateCurrency();
   }
 
-  public getTickers() {
-    return this.tickers;
+  public getConversionRates() {
+    return this.conversionRates;
   }
 
-  private updateCurrency() {
-    request('https://api.opennode.co/v1/rates', { json: true }, (err, res, body) => {
-      if (err) { return console.log(err); }
-      if (body && body.data) {
-        this.tickers = body.data;
+  private async updateCurrency(): Promise<void> {
+    try {
+      const response = await axios.get('https://price.bisq.wiz.biz/getAllMarketPrices');
+      const usd = response.data.data.find((item: any) => item.currencyCode === 'USD');
+      this.conversionRates = {
+        'USD': usd.price,
+      };
+      if (this.ratesChangedCallback) {
+        this.ratesChangedCallback(this.conversionRates);
       }
-    });
+    } catch (e) {
+      logger.err('Error updating fiat conversion rates: ' + e);
+    }
   }
 }
 

backend/src/api/loading-indicators.ts

@@ -0,0 +1,32 @@
+import { ILoadingIndicators } from '../mempool.interfaces';
+
+class LoadingIndicators {
+  private loadingIndicators: ILoadingIndicators = {
+    'mempool': 0,
+  };
+  private progressChangedCallback: ((loadingIndicators: ILoadingIndicators) => void) | undefined;
+
+  constructor() { }
+
+  public setProgressChangedCallback(fn: (loadingIndicators: ILoadingIndicators) => void) {
+    this.progressChangedCallback = fn;
+  }
+
+  public setProgress(name: string, progressPercent: number) {
+    const newProgress = Math.round(progressPercent);
+    if (newProgress >= 100) {
+      delete this.loadingIndicators[name];
+    } else {
+      this.loadingIndicators[name] = newProgress;
+    }
+    if (this.progressChangedCallback) {
+      this.progressChangedCallback(this.loadingIndicators);
+    }
+  }
+
+  public getLoadingIndicators() {
+    return this.loadingIndicators;
+  }
+}
+
+export default new LoadingIndicators();

backend/src/api/memory-cache.ts

@@ -0,0 +1,38 @@
+interface ICache {
+  type: string;
+  id: string;
+  expires: Date;
+  data: any;
+}
+
+class MemoryCache {
+  private cache: ICache[] = [];
+  constructor() {
+    setInterval(this.cleanup.bind(this), 1000);
+  }
+
+  public set(type: string, id: string, data: any, secondsExpiry: number) {
+    const expiry = new Date();
+    expiry.setSeconds(expiry.getSeconds() + secondsExpiry);
+    this.cache.push({
+      type: type,
+      id: id,
+      data: data,
+      expires: expiry,
+    });
+  }
+
+  public get<T>(type: string, id: string): T | null {
+    const found = this.cache.find((cache) => cache.type === type && cache.id === id);
+    if (found) {
+      return found.data;
+    }
+    return null;
+  }
+
+  private cleanup() {
+    this.cache = this.cache.filter((cache) => cache.expires < (new Date()));
+  }
+}
+
+export default new MemoryCache();

backend/src/api/mempool-blocks.ts

@@ -1,8 +1,8 @@
-const config = require('../../mempool-config.json');
-import { MempoolBlock, TransactionExtended, MempoolBlockWithTransactions } from '../interfaces';
+import { MempoolBlock, TransactionExtended, MempoolBlockWithTransactions } from '../mempool.interfaces';
 import { Common } from './common';
 
 class MempoolBlocks {
+  private static DEFAULT_PROJECTED_BLOCKS_AMOUNT = 8;
   private mempoolBlocks: MempoolBlockWithTransactions[] = [];
 
   constructor() {}
@@ -43,7 +43,7 @@ class MempoolBlocks {
     let blockSize = 0;
     let transactions: TransactionExtended[] = [];
     transactionsSorted.forEach((tx) => {
-      if (blockVSize + tx.vsize <= 1000000 || mempoolBlocks.length === config.DEFAULT_PROJECTED_BLOCKS_AMOUNT - 1) {
+      if (blockVSize + tx.vsize <= 1000000 || mempoolBlocks.length === MempoolBlocks.DEFAULT_PROJECTED_BLOCKS_AMOUNT - 1) {
         blockVSize += tx.vsize;
         blockSize += tx.size;
         transactions.push(tx);

backend/src/api/mempool.ts

@@ -1,12 +1,20 @@
-const config = require('../../mempool-config.json');
-import bitcoinApi from './bitcoin/electrs-api';
-import { MempoolInfo, TransactionExtended, Transaction, VbytesPerSecond } from '../interfaces';
+import config from '../config';
+import bitcoinApi from './bitcoin/bitcoin-api-factory';
+import { TransactionExtended, VbytesPerSecond } from '../mempool.interfaces';
+import logger from '../logger';
+import { Common } from './common';
+import transactionUtils from './transaction-utils';
+import { IBitcoinApi } from './bitcoin/bitcoin-api.interface';
+import bitcoinBaseApi from './bitcoin/bitcoin-base.api';
+import loadingIndicators from './loading-indicators';
 
 class Mempool {
+  private static WEBSOCKET_REFRESH_RATE_MS = 10000;
   private inSync: boolean = false;
   private mempoolCache: { [txId: string]: TransactionExtended } = {};
-  private mempoolInfo: MempoolInfo = { size: 0, bytes: 0 };
-  private mempoolChangedCallback: ((newMempool: { [txId: string]: TransactionExtended; }, newTransactions: TransactionExtended[],
+  private mempoolInfo: IBitcoinApi.MempoolInfo = { loaded: false, size: 0, bytes: 0, usage: 0,
+                                                    maxmempool: 0, mempoolminfee: 0, minrelaytxfee: 0 };
+  private mempoolChangedCallback: ((newMempool: {[txId: string]: TransactionExtended; }, newTransactions: TransactionExtended[],
     deletedTransactions: TransactionExtended[]) => void) | undefined;
 
   private txPerSecondArray: number[] = [];
@@ -15,6 +23,7 @@ class Mempool {
   private vBytesPerSecondArray: VbytesPerSecond[] = [];
   private vBytesPerSecond: number = 0;
   private mempoolProtection = 0;
+  private latestTransactions: any[] = [];
 
   constructor() {
     setInterval(this.updateTxPerSecond.bind(this), 1000);
@@ -24,6 +33,10 @@ class Mempool {
     return this.inSync;
   }
 
+  public getLatestTransactions() {
+    return this.latestTransactions;
+  }
+
   public setMempoolChangedCallback(fn: (newMempool: { [txId: string]: TransactionExtended; },
     newTransactions: TransactionExtended[], deletedTransactions: TransactionExtended[]) => void) {
     this.mempoolChangedCallback = fn;
@@ -40,15 +53,11 @@ class Mempool {
     }
   }
 
-  public async updateMemPoolInfo() {
-    try {
-      this.mempoolInfo = await bitcoinApi.getMempoolInfo();
-    } catch (err) {
-      console.log('Error getMempoolInfo', err);
-    }
+  public async $updateMemPoolInfo() {
+    this.mempoolInfo = await bitcoinBaseApi.$getMempoolInfo();
   }
 
-  public getMempoolInfo(): MempoolInfo | undefined {
+  public getMempoolInfo(): IBitcoinApi.MempoolInfo | undefined {
     return this.mempoolInfo;
   }
 
@@ -63,8 +72,9 @@ class Mempool {
   public getFirstSeenForTransactions(txIds: string[]): number[] {
     const txTimes: number[] = [];
     txIds.forEach((txId: string) => {
-      if (this.mempoolCache[txId]) {
-        txTimes.push(this.mempoolCache[txId].firstSeen);
+      const tx = this.mempoolCache[txId];
+      if (tx && tx.firstSeen) {
+        txTimes.push(tx.firstSeen);
       } else {
         txTimes.push(0);
       }
@@ -72,121 +82,115 @@ class Mempool {
     return txTimes;
   }
 
-  public async getTransactionExtended(txId: string): Promise<TransactionExtended | false> {
-    try {
-      const transaction: Transaction = await bitcoinApi.getRawTransaction(txId);
-      return Object.assign({
-        vsize: transaction.weight / 4,
-        feePerVsize: (transaction.fee || 0) / (transaction.weight / 4),
-        firstSeen: Math.round((new Date().getTime() / 1000)),
-      }, transaction);
-    } catch (e) {
-      console.log(txId + ' not found');
-      return false;
-    }
-  }
-
-  public async updateMempool() {
-    console.log('Updating mempool');
+  public async $updateMempool() {
+    logger.debug('Updating mempool');
     const start = new Date().getTime();
     let hasChange: boolean = false;
     const currentMempoolSize = Object.keys(this.mempoolCache).length;
     let txCount = 0;
-    try {
-      const transactions = await bitcoinApi.getRawMempool();
-      const diff = transactions.length - currentMempoolSize;
-      const newTransactions: TransactionExtended[] = [];
+    const transactions = await bitcoinApi.$getRawMempool();
+    const diff = transactions.length - currentMempoolSize;
+    const newTransactions: TransactionExtended[] = [];
 
-      for (const txid of transactions) {
-        if (!this.mempoolCache[txid]) {
-          const transaction = await this.getTransactionExtended(txid);
-          if (transaction) {
-            this.mempoolCache[txid] = transaction;
-            txCount++;
-            if (this.inSync) {
-              this.txPerSecondArray.push(new Date().getTime());
-              this.vBytesPerSecondArray.push({
-                unixTime: new Date().getTime(),
-                vSize: transaction.vsize,
-              });
-            }
-            hasChange = true;
-            if (diff > 0) {
-              console.log('Fetched transaction ' + txCount + ' / ' + diff);
-            } else {
-              console.log('Fetched transaction ' + txCount);
-            }
-            newTransactions.push(transaction);
-          } else {
-            console.log('Error finding transaction in mempool.');
-          }
-        }
-
-        if ((new Date().getTime()) - start > config.MEMPOOL_REFRESH_RATE_MS * 10) {
-          break;
-        }
-      }
-
-      // Prevent mempool from clear on bitcoind restart by delaying the deletion
-      if (this.mempoolProtection === 0 && transactions.length / currentMempoolSize <= 0.80) {
-        this.mempoolProtection = 1;
-        this.inSync = false;
-        console.log('Mempool clear protection triggered.');
-        setTimeout(() => {
-          this.mempoolProtection = 2;
-          console.log('Mempool clear protection resumed.');
-        }, 1000 * 60 * 2);
-      }
-
-      let newMempool = {};
-      const deletedTransactions: TransactionExtended[] = [];
-
-      if (this.mempoolProtection !== 1) {
-        this.mempoolProtection = 0;
-        // Index object for faster search
-        const transactionsObject = {};
-        transactions.forEach((txId) => transactionsObject[txId] = true);
-
-        // Replace mempool to separate deleted transactions
-        for (const tx in this.mempoolCache) {
-          if (transactionsObject[tx]) {
-            newMempool[tx] = this.mempoolCache[tx];
-          } else {
-            deletedTransactions.push(this.mempoolCache[tx]);
-          }
-        }
-      } else {
-        newMempool = this.mempoolCache;
-      }
-
-      if (!this.inSync && transactions.length === Object.keys(newMempool).length) {
-        this.inSync = true;
-        console.log('The mempool is now in sync!');
-      }
-
-      if (this.mempoolChangedCallback && (hasChange || deletedTransactions.length)) {
-        this.mempoolCache = newMempool;
-        this.mempoolChangedCallback(this.mempoolCache, newTransactions, deletedTransactions);
-      }
-
-      const end = new Date().getTime();
-      const time = end - start;
-      console.log(`New mempool size: ${Object.keys(newMempool).length} Change: ${diff}`);
-      console.log('Mempool updated in ' + time / 1000 + ' seconds');
-    } catch (err) {
-      console.log('getRawMempool error.', err);
+    if (!this.inSync) {
+      loadingIndicators.setProgress('mempool', Object.keys(this.mempoolCache).length / transactions.length * 100);
     }
+
+    for (const txid of transactions) {
+      if (!this.mempoolCache[txid]) {
+        const transaction = await transactionUtils.$getTransactionExtended(txid, true);
+        if (transaction) {
+          this.mempoolCache[txid] = transaction;
+          txCount++;
+          if (this.inSync) {
+            this.txPerSecondArray.push(new Date().getTime());
+            this.vBytesPerSecondArray.push({
+              unixTime: new Date().getTime(),
+              vSize: transaction.vsize,
+            });
+          }
+          hasChange = true;
+          if (diff > 0) {
+            logger.debug('Fetched transaction ' + txCount + ' / ' + diff);
+          } else {
+            logger.debug('Fetched transaction ' + txCount);
+          }
+          newTransactions.push(transaction);
+        } else {
+          logger.debug('Error finding transaction in mempool.');
+        }
+      }
+
+      if ((new Date().getTime()) - start > Mempool.WEBSOCKET_REFRESH_RATE_MS) {
+        break;
+      }
+    }
+
+    // Prevent mempool from clear on bitcoind restart by delaying the deletion
+    if (this.mempoolProtection === 0
+      && config.MEMPOOL.BACKEND === 'esplora'
+      && currentMempoolSize > 20000
+      && transactions.length / currentMempoolSize <= 0.80
+    ) {
+      this.mempoolProtection = 1;
+      this.inSync = false;
+      logger.warn(`Mempool clear protection triggered because transactions.length: ${transactions.length} and currentMempoolSize: ${currentMempoolSize}.`);
+      setTimeout(() => {
+        this.mempoolProtection = 2;
+        logger.warn('Mempool clear protection resumed.');
+      }, 1000 * 60 * 2);
+    }
+
+    let newMempool = {};
+    const deletedTransactions: TransactionExtended[] = [];
+
+    if (this.mempoolProtection !== 1) {
+      this.mempoolProtection = 0;
+      // Index object for faster search
+      const transactionsObject = {};
+      transactions.forEach((txId) => transactionsObject[txId] = true);
+
+      // Replace mempool to separate deleted transactions
+      for (const tx in this.mempoolCache) {
+        if (transactionsObject[tx]) {
+          newMempool[tx] = this.mempoolCache[tx];
+        } else {
+          deletedTransactions.push(this.mempoolCache[tx]);
+        }
+      }
+    } else {
+      newMempool = this.mempoolCache;
+    }
+
+    const newTransactionsStripped = newTransactions.map((tx) => Common.stripTransaction(tx));
+    this.latestTransactions = newTransactionsStripped.concat(this.latestTransactions).slice(0, 6);
+
+    if (!this.inSync && transactions.length === Object.keys(newMempool).length) {
+      this.inSync = true;
+      logger.info('The mempool is now in sync!');
+      loadingIndicators.setProgress('mempool', 100);
+    }
+
+    if (this.mempoolChangedCallback && (hasChange || deletedTransactions.length)) {
+      this.mempoolCache = newMempool;
+      this.mempoolChangedCallback(this.mempoolCache, newTransactions, deletedTransactions);
+    }
+
+    const end = new Date().getTime();
+    const time = end - start;
+    logger.debug(`New mempool size: ${Object.keys(newMempool).length} Change: ${diff}`);
+    logger.debug('Mempool updated in ' + time / 1000 + ' seconds');
   }
 
   private updateTxPerSecond() {
-    const nowMinusTimeSpan = new Date().getTime() - (1000 * config.TX_PER_SECOND_SPAN_SECONDS);
+    const nowMinusTimeSpan = new Date().getTime() - (1000 * config.STATISTICS.TX_PER_SECOND_SAMPLE_PERIOD);
     this.txPerSecondArray = this.txPerSecondArray.filter((unixTime) => unixTime > nowMinusTimeSpan);
-    this.txPerSecond = this.txPerSecondArray.length / config.TX_PER_SECOND_SPAN_SECONDS || 0;
+    this.txPerSecond = this.txPerSecondArray.length / config.STATISTICS.TX_PER_SECOND_SAMPLE_PERIOD || 0;
 
     this.vBytesPerSecondArray = this.vBytesPerSecondArray.filter((data) => data.unixTime > nowMinusTimeSpan);
     if (this.vBytesPerSecondArray.length) {
       this.vBytesPerSecond = Math.round(
-        this.vBytesPerSecondArray.map((data) => data.vSize).reduce((a, b) => a + b) / config.TX_PER_SECOND_SPAN_SECONDS
+        this.vBytesPerSecondArray.map((data) => data.vSize).reduce((a, b) => a + b) / config.STATISTICS.TX_PER_SECOND_SAMPLE_PERIOD
       );
     }
   }

backend/src/api/statistics.ts

@@ -1,7 +1,8 @@
 import memPool from './mempool';
 import { DB } from '../database';
+import logger from '../logger';
 
-import { Statistic, TransactionExtended, OptimizedStatistic } from '../interfaces';
+import { Statistic, TransactionExtended, OptimizedStatistic } from '../mempool.interfaces';
 
 class Statistics {
   protected intervalTimer: NodeJS.Timer | undefined;
@@ -14,7 +15,7 @@ class Statistics {
   constructor() { }
 
   public startStatistics(): void {
-    console.log('Starting statistics service');
+    logger.info('Starting statistics service');
 
     const now = new Date();
     const nextInterval = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(),
@@ -24,20 +25,20 @@ class Statistics {
     setTimeout(() => {
       this.runStatistics();
       this.intervalTimer = setInterval(() => {
-        if (!memPool.isInSync()) {
-          return;
-        }
         this.runStatistics();
       }, 1 * 60 * 1000);
     }, difference);
   }
 
   private async runStatistics(): Promise<void> {
+    if (!memPool.isInSync()) {
+      return;
+    }
     const currentMempool = memPool.getMempool();
     const txPerSecond = memPool.getTxPerSecond();
     const vBytesPerSecond = memPool.getVBytesPerSecond();
 
-    console.log('Running statistics');
+    logger.debug('Running statistics');
 
     let memPoolArray: TransactionExtended[] = [];
     for (const i in currentMempool) {
@@ -233,53 +234,52 @@ class Statistics {
       connection.release();
       return result.insertId;
     } catch (e) {
-      console.log('$create() error', e);
+      logger.err('$create() error' + e.message || e);
     }
   }
 
-  private getQueryForDays(days: number, groupBy: number) {
-
+  private getQueryForDays(div: number) {
     return `SELECT id, added, unconfirmed_transactions,
-            AVG(tx_per_second) AS tx_per_second,
-            AVG(vbytes_per_second) AS vbytes_per_second,
-            AVG(vsize_1) AS vsize_1,
-            AVG(vsize_2) AS vsize_2,
-            AVG(vsize_3) AS vsize_3,
-            AVG(vsize_4) AS vsize_4,
-            AVG(vsize_5) AS vsize_5,
-            AVG(vsize_6) AS vsize_6,
-            AVG(vsize_8) AS vsize_8,
-            AVG(vsize_10) AS vsize_10,
-            AVG(vsize_12) AS vsize_12,
-            AVG(vsize_15) AS vsize_15,
-            AVG(vsize_20) AS vsize_20,
-            AVG(vsize_30) AS vsize_30,
-            AVG(vsize_40) AS vsize_40,
-            AVG(vsize_50) AS vsize_50,
-            AVG(vsize_60) AS vsize_60,
-            AVG(vsize_70) AS vsize_70,
-            AVG(vsize_80) AS vsize_80,
-            AVG(vsize_90) AS vsize_90,
-            AVG(vsize_100) AS vsize_100,
-            AVG(vsize_125) AS vsize_125,
-            AVG(vsize_150) AS vsize_150,
-            AVG(vsize_175) AS vsize_175,
-            AVG(vsize_200) AS vsize_200,
-            AVG(vsize_250) AS vsize_250,
-            AVG(vsize_300) AS vsize_300,
-            AVG(vsize_350) AS vsize_350,
-            AVG(vsize_400) AS vsize_400,
-            AVG(vsize_500) AS vsize_500,
-            AVG(vsize_600) AS vsize_600,
-            AVG(vsize_700) AS vsize_700,
-            AVG(vsize_800) AS vsize_800,
-            AVG(vsize_900) AS vsize_900,
-            AVG(vsize_1000) AS vsize_1000,
-            AVG(vsize_1200) AS vsize_1200,
-            AVG(vsize_1400) AS vsize_1400,
-            AVG(vsize_1600) AS vsize_1600,
-            AVG(vsize_1800) AS vsize_1800,
-            AVG(vsize_2000) AS vsize_2000 FROM statistics GROUP BY UNIX_TIMESTAMP(added) DIV ${groupBy} ORDER BY id DESC LIMIT ${days}`;
+      tx_per_second,
+      vbytes_per_second,
+      vsize_1,
+      vsize_2,
+      vsize_3,
+      vsize_4,
+      vsize_5,
+      vsize_6,
+      vsize_8,
+      vsize_10,
+      vsize_12,
+      vsize_15,
+      vsize_20,
+      vsize_30,
+      vsize_40,
+      vsize_50,
+      vsize_60,
+      vsize_70,
+      vsize_80,
+      vsize_90,
+      vsize_100,
+      vsize_125,
+      vsize_150,
+      vsize_175,
+      vsize_200,
+      vsize_250,
+      vsize_300,
+      vsize_350,
+      vsize_400,
+      vsize_500,
+      vsize_600,
+      vsize_700,
+      vsize_800,
+      vsize_900,
+      vsize_1000,
+      vsize_1200,
+      vsize_1400,
+      vsize_1600,
+      vsize_1800,
+      vsize_2000 FROM statistics GROUP BY UNIX_TIMESTAMP(added) DIV ${div} ORDER BY id DESC LIMIT 480`;
   }
 
   public async $get(id: number): Promise<OptimizedStatistic | undefined> {
@@ -292,7 +292,7 @@ class Statistics {
         return this.mapStatisticToOptimizedStatistic([rows[0]])[0];
       }
     } catch (e) {
-      console.log('$list2H() error', e);
+      logger.err('$list2H() error' + e.message || e);
     }
   }
 
@@ -304,7 +304,7 @@ class Statistics {
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
     } catch (e) {
-      console.log('$list2H() error', e);
+      logger.err('$list2H() error' + e.message || e);
       return [];
     }
   }
@@ -312,11 +312,12 @@ class Statistics {
   public async $list24H(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(120, 720);
+      const query = this.getQueryForDays(180);
       const [rows] = await connection.query<any>(query);
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
     } catch (e) {
+      logger.err('$list24h() error' + e.message || e);
       return [];
     }
   }
@@ -324,12 +325,12 @@ class Statistics {
   public async $list1W(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(120, 5040);
+      const query = this.getQueryForDays(1260);
       const [rows] = await connection.query<any>(query);
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
     } catch (e) {
-      console.log('$list1W() error', e);
+      logger.err('$list1W() error' + e);
       return [];
     }
   }
@@ -337,12 +338,12 @@ class Statistics {
   public async $list1M(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(120, 20160);
+      const query = this.getQueryForDays(5040);
       const [rows] = await connection.query<any>(query);
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
     } catch (e) {
-      console.log('$list1M() error', e);
+      logger.err('$list1M() error' + e);
       return [];
     }
   }
@@ -350,12 +351,12 @@ class Statistics {
   public async $list3M(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(120, 60480);
+      const query = this.getQueryForDays(15120);
       const [rows] = await connection.query<any>(query);
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
     } catch (e) {
-      console.log('$list3M() error', e);
+      logger.err('$list3M() error' + e);
       return [];
     }
   }
@@ -363,12 +364,12 @@ class Statistics {
   public async $list6M(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(120, 120960);
+      const query = this.getQueryForDays(30240);
       const [rows] = await connection.query<any>(query);
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
     } catch (e) {
-      console.log('$list6M() error', e);
+      logger.err('$list6M() error' + e);
       return [];
     }
   }
@@ -376,12 +377,12 @@ class Statistics {
   public async $list1Y(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(120, 241920);
+      const query = this.getQueryForDays(60480);
       const [rows] = await connection.query<any>(query);
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
     } catch (e) {
-      console.log('$list6M() error', e);
+      logger.err('$list6M() error' + e);
       return [];
     }
   }

backend/src/api/transaction-utils.ts

@@ -0,0 +1,51 @@
+import bitcoinApi from './bitcoin/bitcoin-api-factory';
+import logger from '../logger';
+import { TransactionExtended, TransactionMinerInfo } from '../mempool.interfaces';
+import { IEsploraApi } from './bitcoin/esplora-api.interface';
+
+class TransactionUtils {
+  constructor() { }
+
+  public stripCoinbaseTransaction(tx: TransactionExtended): TransactionMinerInfo {
+    return {
+      vin: [{
+        scriptsig: tx.vin[0].scriptsig || tx.vin[0]['coinbase']
+      }],
+      vout: tx.vout
+        .map((vout) => ({
+          scriptpubkey_address: vout.scriptpubkey_address,
+          value: vout.value
+        }))
+        .filter((vout) => vout.value)
+    };
+  }
+
+  public async $getTransactionExtended(txId: string, forceBitcoind = false, addPrevouts = false): Promise<TransactionExtended | null> {
+    try {
+      let transaction: IEsploraApi.Transaction;
+      if (forceBitcoind) {
+        transaction = await bitcoinApi.$getRawTransactionBitcoind(txId, false, addPrevouts);
+      } else {
+        transaction = await bitcoinApi.$getRawTransaction(txId, false, addPrevouts);
+      }
+      return this.extendTransaction(transaction);
+    } catch (e) {
+      logger.debug('getTransactionExtended error: ' + (e.message || e));
+      logger.debug(JSON.stringify(e));
+      return null;
+    }
+  }
+
+  private extendTransaction(transaction: IEsploraApi.Transaction): TransactionExtended {
+    const transactionExtended: TransactionExtended = Object.assign({
+      vsize: Math.round(transaction.weight / 4),
+      feePerVsize: Math.max(1, (transaction.fee || 0) / (transaction.weight / 4)),
+    }, transaction);
+    if (!transaction.status.confirmed) {
+      transactionExtended.firstSeen = Math.round((new Date().getTime() / 1000));
+    }
+    return transactionExtended;
+  }
+}
+
+export default new TransactionUtils();

backend/src/api/websocket-handler.ts

@@ -1,13 +1,16 @@
-const config = require('../../mempool-config.json');
-
+import logger from '../logger';
 import * as WebSocket from 'ws';
-import { Block, TransactionExtended, WebsocketResponse, MempoolBlock, OptimizedStatistic } from '../interfaces';
+import { BlockExtended, TransactionExtended, WebsocketResponse, MempoolBlock,
+  OptimizedStatistic, ILoadingIndicators, IConversionRates } from '../mempool.interfaces';
 import blocks from './blocks';
 import memPool from './mempool';
 import backendInfo from './backend-info';
 import mempoolBlocks from './mempool-blocks';
 import fiatConversion from './fiat-conversion';
 import { Common } from './common';
+import loadingIndicators from './loading-indicators';
+import config from '../config';
+import transactionUtils from './transaction-utils';
 
 class WebsocketHandler {
   private wss: WebSocket.Server | undefined;
@@ -30,6 +33,7 @@ class WebsocketHandler {
     }
 
     this.wss.on('connection', (client: WebSocket) => {
+      client.on('error', logger.info);
       client.on('message', (message: string) => {
         try {
           const parsedMessage: WebsocketResponse = JSON.parse(message);
@@ -77,36 +81,91 @@ class WebsocketHandler {
           }
 
           if (parsedMessage.action === 'init') {
-            const _blocks = blocks.getBlocks();
+            const _blocks = blocks.getBlocks().slice(-8);
             if (!_blocks) {
               return;
             }
-            client.send(JSON.stringify({
-              'mempoolInfo': memPool.getMempoolInfo(),
-              'vBytesPerSecond': memPool.getVBytesPerSecond(),
-              'blocks': _blocks.slice(Math.max(_blocks.length - config.INITIAL_BLOCK_AMOUNT, 0)),
-              'conversions': fiatConversion.getTickers()['BTCUSD'],
-              'mempool-blocks': mempoolBlocks.getMempoolBlocks(),
-              'git-commit': backendInfo.gitCommitHash,
-              'hostname': backendInfo.hostname,
-              ...this.extraInitProperties
-            }));
+            client.send(JSON.stringify(this.getInitData(_blocks)));
           }
 
           if (parsedMessage.action === 'ping') {
             response['pong'] = true;
           }
 
+          if (parsedMessage['track-donation'] && parsedMessage['track-donation'].length === 22) {
+            client['track-donation'] = parsedMessage['track-donation'];
+          }
+
           if (Object.keys(response).length) {
             client.send(JSON.stringify(response));
           }
         } catch (e) {
-          console.log(e);
+          logger.debug('Error parsing websocket message: ' + e.message || e);
         }
       });
     });
   }
 
+  handleNewDonation(id: string) {
+    if (!this.wss) {
+      throw new Error('WebSocket.Server is not set');
+    }
+
+    this.wss.clients.forEach((client: WebSocket) => {
+      if (client.readyState !== WebSocket.OPEN) {
+        return;
+      }
+      if (client['track-donation'] === id) {
+        client.send(JSON.stringify({ donationConfirmed: true }));
+      }
+    });
+  }
+
+  handleLoadingChanged(indicators: ILoadingIndicators) {
+    if (!this.wss) {
+      throw new Error('WebSocket.Server is not set');
+    }
+
+    this.wss.clients.forEach((client: WebSocket) => {
+      if (client.readyState !== WebSocket.OPEN) {
+        return;
+      }
+      client.send(JSON.stringify({ loadingIndicators: indicators }));
+    });
+  }
+
+  handleNewConversionRates(conversionRates: IConversionRates) {
+    if (!this.wss) {
+      throw new Error('WebSocket.Server is not set');
+    }
+
+    this.wss.clients.forEach((client: WebSocket) => {
+      if (client.readyState !== WebSocket.OPEN) {
+        return;
+      }
+      client.send(JSON.stringify({ conversions: conversionRates }));
+    });
+  }
+
+  getInitData(_blocks?: BlockExtended[]) {
+    if (!_blocks) {
+      _blocks = blocks.getBlocks().slice(-8);
+    }
+    return {
+      'mempoolInfo': memPool.getMempoolInfo(),
+      'vBytesPerSecond': memPool.getVBytesPerSecond(),
+      'lastDifficultyAdjustment': blocks.getLastDifficultyAdjustmentTime(),
+      'blocks': _blocks,
+      'conversions': fiatConversion.getConversionRates(),
+      'mempool-blocks': mempoolBlocks.getMempoolBlocks(),
+      'transactions': memPool.getLatestTransactions(),
+      'git-commit': backendInfo.gitCommitHash,
+      'hostname': backendInfo.hostname,
+      'loadingIndicators': loadingIndicators.getLoadingIndicators(),
+      ...this.extraInitProperties
+    };
+  }
+
   handleNewStatistic(stats: OptimizedStatistic) {
     if (!this.wss) {
       throw new Error('WebSocket.Server is not set');
@@ -139,7 +198,7 @@ class WebsocketHandler {
     const vBytesPerSecond = memPool.getVBytesPerSecond();
     const rbfTransactions = Common.findRbfTransactions(newTransactions, deletedTransactions);
 
-    this.wss.clients.forEach((client: WebSocket) => {
+    this.wss.clients.forEach(async (client: WebSocket) => {
       if (client.readyState !== WebSocket.OPEN) {
         return;
       }
@@ -149,6 +208,7 @@ class WebsocketHandler {
       if (client['want-stats']) {
         response['mempoolInfo'] = mempoolInfo;
         response['vBytesPerSecond'] = vBytesPerSecond;
+        response['transactions'] = newTransactions.slice(0, 6).map((tx) => Common.stripTransaction(tx));
       }
 
       if (client['want-mempool-blocks']) {
@@ -158,7 +218,14 @@ class WebsocketHandler {
       if (client['track-mempool-tx']) {
         const tx = newTransactions.find((t) => t.txid === client['track-mempool-tx']);
         if (tx) {
-          response['tx'] = tx;
+          if (config.MEMPOOL.BACKEND !== 'esplora') {
+            const fullTx = await transactionUtils.$getTransactionExtended(tx.txid, false, true);
+            if (fullTx) {
+              response['tx'] = fullTx;
+            }
+          } else {
+            response['tx'] = tx;
+          }
           client['track-mempool-tx'] = null;
         }
       }
@@ -166,17 +233,31 @@ class WebsocketHandler {
       if (client['track-address']) {
         const foundTransactions: TransactionExtended[] = [];
 
-        newTransactions.forEach((tx) => {
+        for (const tx of newTransactions) {
           const someVin = tx.vin.some((vin) => !!vin.prevout && vin.prevout.scriptpubkey_address === client['track-address']);
           if (someVin) {
-            foundTransactions.push(tx);
+            if (config.MEMPOOL.BACKEND !== 'esplora') {
+              const fullTx = await transactionUtils.$getTransactionExtended(tx.txid, false, true);
+              if (fullTx) {
+                foundTransactions.push(fullTx);
+              }
+            } else {
+              foundTransactions.push(tx);
+            }
             return;
           }
           const someVout = tx.vout.some((vout) => vout.scriptpubkey_address === client['track-address']);
           if (someVout) {
-            foundTransactions.push(tx);
+            if (config.MEMPOOL.BACKEND !== 'esplora') {
+              const fullTx = await transactionUtils.$getTransactionExtended(tx.txid, false, true);
+              if (fullTx) {
+                foundTransactions.push(fullTx);
+              }
+            } else {
+              foundTransactions.push(tx);
+            }
           }
-        });
+        }
 
         if (foundTransactions.length) {
           response['address-transactions'] = foundTransactions;
@@ -215,7 +296,15 @@ class WebsocketHandler {
       if (client['track-tx'] && rbfTransactions[client['track-tx']]) {
         for (const rbfTransaction in rbfTransactions) {
           if (client['track-tx'] === rbfTransaction) {
-            response['rbfTransaction'] = rbfTransactions[rbfTransaction];
+            const rbfTx = rbfTransactions[rbfTransaction];
+            if (config.MEMPOOL.BACKEND !== 'esplora') {
+              const fullTx = await transactionUtils.$getTransactionExtended(rbfTransaction, false, true);
+              if (fullTx) {
+                response['rbfTransaction'] = fullTx;
+              }
+            } else {
+              response['rbfTransaction'] = rbfTx;
+            }
             break;
           }
         }
@@ -227,7 +316,7 @@ class WebsocketHandler {
     });
   }
 
-  handleNewBlock(block: Block, txIds: string[], transactions: TransactionExtended[]) {
+  handleNewBlock(block: BlockExtended, txIds: string[], transactions: TransactionExtended[]) {
     if (!this.wss) {
       throw new Error('WebSocket.Server is not set');
     }
@@ -270,6 +359,7 @@ class WebsocketHandler {
       const response = {
         'block': block,
         'mempoolInfo': memPool.getMempoolInfo(),
+        'lastDifficultyAdjustment': blocks.getLastDifficultyAdjustmentTime(),
       };
 
       if (mBlocks && client['want-mempool-blocks']) {

backend/src/config.ts

@@ -0,0 +1,144 @@
+const configFile = require('../mempool-config.json');
+
+interface IConfig {
+  MEMPOOL: {
+    NETWORK: 'mainnet' | 'testnet' | 'liquid';
+    BACKEND: 'esplora' | 'electrum' | 'none';
+    HTTP_PORT: number;
+    SPAWN_CLUSTER_PROCS: number;
+    API_URL_PREFIX: string;
+    POLL_RATE_MS: number;
+  };
+  ESPLORA: {
+    REST_API_URL: string;
+  };
+  ELECTRUM: {
+    HOST: string;
+    PORT: number;
+    TLS_ENABLED: boolean;
+    TX_LOOKUPS: boolean;
+  };
+  CORE_RPC: {
+    HOST: string;
+    PORT: number;
+    USERNAME: string;
+    PASSWORD: string;
+  };
+  DATABASE: {
+    ENABLED: boolean;
+    HOST: string,
+    PORT: number;
+    DATABASE: string;
+    USERNAME: string;
+    PASSWORD: string;
+  };
+  STATISTICS: {
+    ENABLED: boolean;
+    TX_PER_SECOND_SAMPLE_PERIOD: number;
+  };
+  BISQ_BLOCKS: {
+    ENABLED: boolean;
+    DATA_PATH: string;
+  };
+  BISQ_MARKETS: {
+    ENABLED: boolean;
+    DATA_PATH: string;
+  };
+  SPONSORS: {
+    ENABLED: boolean;
+    BTCPAY_URL: string;
+    BTCPAY_AUTH: string;
+    BTCPAY_WEBHOOK_URL: string;
+    TWITTER_BEARER_AUTH: string;
+  };
+}
+
+const defaults: IConfig = {
+  'MEMPOOL': {
+    'NETWORK': 'mainnet',
+    'BACKEND': 'none',
+    'HTTP_PORT': 8999,
+    'SPAWN_CLUSTER_PROCS': 0,
+    'API_URL_PREFIX': '/api/v1/',
+    'POLL_RATE_MS': 2000
+  },
+  'ESPLORA': {
+    'REST_API_URL': 'http://127.0.0.1:3000',
+  },
+  'ELECTRUM': {
+    'HOST': '127.0.0.1',
+    'PORT': 3306,
+    'TLS_ENABLED': true,
+    'TX_LOOKUPS': false
+  },
+  'CORE_RPC': {
+    'HOST': '127.0.0.1',
+    'PORT': 8332,
+    'USERNAME': 'mempool',
+    'PASSWORD': 'mempool'
+  },
+  'DATABASE': {
+    'ENABLED': true,
+    'HOST': 'localhost',
+    'PORT': 3306,
+    'DATABASE': 'mempool',
+    'USERNAME': 'mempool',
+    'PASSWORD': 'mempool'
+  },
+  'STATISTICS': {
+    'ENABLED': true,
+    'TX_PER_SECOND_SAMPLE_PERIOD': 150
+  },
+  'BISQ_BLOCKS': {
+    'ENABLED': false,
+    'DATA_PATH': '/bisq/statsnode-data/btc_mainnet/db/json'
+  },
+  'BISQ_MARKETS': {
+    'ENABLED': false,
+    'DATA_PATH': '/bisq/statsnode-data/btc_mainnet/db'
+  },
+  'SPONSORS': {
+    'ENABLED': false,
+    'BTCPAY_URL': '',
+    'BTCPAY_AUTH': '',
+    'BTCPAY_WEBHOOK_URL': '',
+    'TWITTER_BEARER_AUTH': ''
+  }
+};
+
+class Config implements IConfig {
+  MEMPOOL: IConfig['MEMPOOL'];
+  ESPLORA: IConfig['ESPLORA'];
+  ELECTRUM: IConfig['ELECTRUM'];
+  CORE_RPC: IConfig['CORE_RPC'];
+  DATABASE: IConfig['DATABASE'];
+  STATISTICS: IConfig['STATISTICS'];
+  BISQ_BLOCKS: IConfig['BISQ_BLOCKS'];
+  BISQ_MARKETS: IConfig['BISQ_MARKETS'];
+  SPONSORS: IConfig['SPONSORS'];
+
+  constructor() {
+    const configs = this.merge(configFile, defaults);
+    this.MEMPOOL = configs.MEMPOOL;
+    this.ESPLORA = configs.ESPLORA;
+    this.ELECTRUM = configs.ELECTRUM;
+    this.CORE_RPC = configs.CORE_RPC;
+    this.DATABASE = configs.DATABASE;
+    this.STATISTICS = configs.STATISTICS;
+    this.BISQ_BLOCKS = configs.BISQ_BLOCKS;
+    this.BISQ_MARKETS = configs.BISQ_MARKETS;
+    this.SPONSORS = configs.SPONSORS;
+  }
+
+  merge = (...objects: object[]): IConfig => {
+    // @ts-ignore
+    return objects.reduce((prev, next) => {
+      Object.keys(prev).forEach(key => {
+        next[key] = { ...next[key], ...prev[key] };
+      });
+      return next;
+    });
+  }
+}
+
+export default new Config();

backend/src/database.ts

@@ -1,13 +1,14 @@
-const config = require('../mempool-config.json');
+import config from './config';
 import { createPool } from 'mysql2/promise';
+import logger from './logger';
 
 export class DB {
   static pool = createPool({
-    host: config.DB_HOST,
-    port: config.DB_PORT,
-    database: config.DB_DATABASE,
-    user: config.DB_USER,
-    password: config.DB_PASSWORD,
+    host: config.DATABASE.HOST,
+    port: config.DATABASE.PORT,
+    database: config.DATABASE.DATABASE,
+    user: config.DATABASE.USERNAME,
+    password: config.DATABASE.PASSWORD,
     connectionLimit: 10,
     supportBigNumbers: true,
   });
@@ -16,11 +17,10 @@ export class DB {
 export async function checkDbConnection() {
   try {
     const connection = await DB.pool.getConnection();
-    console.log('Database connection established.');
+    logger.info('Database connection established.');
     connection.release();
   } catch (e) {
-    console.log('Could not connect to database.');
-    console.log(e);
+    logger.err('Could not connect to database: ' + e.message || e);
     process.exit(1);
   }
 }

backend/src/index.ts

@@ -1,13 +1,13 @@
-const config = require('../mempool-config.json');
 import { Express, Request, Response, NextFunction } from 'express';
-import * as fs from 'fs';
 import * as express from 'express';
-import * as compression from 'compression';
 import * as http from 'http';
 import * as https from 'https';
 import * as WebSocket from 'ws';
+import * as cluster from 'cluster';
+import axios from 'axios';
 
 import { checkDbConnection } from './database';
+import config from './config';
 import routes from './routes';
 import blocks from './api/blocks';
 import memPool from './api/mempool';
@@ -15,96 +15,217 @@ import diskCache from './api/disk-cache';
 import statistics from './api/statistics';
 import websocketHandler from './api/websocket-handler';
 import fiatConversion from './api/fiat-conversion';
-import bisq from './api/bisq';
+import bisq from './api/bisq/bisq';
+import bisqMarkets from './api/bisq/markets';
+import donations from './api/donations';
+import logger from './logger';
+import backendInfo from './api/backend-info';
+import loadingIndicators from './api/loading-indicators';
 
 class Server {
-  wss: WebSocket.Server;
-  server: https.Server | http.Server;
-  app: Express;
+  private wss: WebSocket.Server | undefined;
+  private server: https.Server | http.Server | undefined;
+  private app: Express;
+  private currentBackendRetryInterval = 5;
 
   constructor() {
     this.app = express();
 
+    if (!config.MEMPOOL.SPAWN_CLUSTER_PROCS) {
+      this.startServer();
+      return;
+    }
+
+    if (cluster.isMaster) {
+      logger.notice(`Mempool Server (Master) is running on port ${config.MEMPOOL.HTTP_PORT} (${backendInfo.getShortCommitHash()})`);
+
+      const numCPUs = config.MEMPOOL.SPAWN_CLUSTER_PROCS;
+      for (let i = 0; i < numCPUs; i++) {
+        const env = { workerId: i };
+        const worker = cluster.fork(env);
+        worker.process['env'] = env;
+      }
+
+      cluster.on('exit', (worker, code, signal) => {
+        const workerId = worker.process['env'].workerId;
+        logger.warn(`Mempool Worker PID #${worker.process.pid} workerId: ${workerId} died. Restarting in 10 seconds... ${signal || code}`);
+        setTimeout(() => {
+          const env = { workerId: workerId };
+          const newWorker = cluster.fork(env);
+          newWorker.process['env'] = env;
+        }, 10000);
+      });
+    } else {
+      this.startServer(true);
+    }
+  }
+
+  startServer(worker = false) {
     this.app
       .use((req: Request, res: Response, next: NextFunction) => {
         res.setHeader('Access-Control-Allow-Origin', '*');
         next();
       })
-      .use(compression());
+      .use(express.urlencoded({ extended: true }))
+      .use(express.json());
 
-    if (config.SSL === true) {
-      const credentials = {
-        cert: fs.readFileSync(config.SSL_CERT_FILE_PATH),
-        key: fs.readFileSync(config.SSL_KEY_FILE_PATH),
-      };
-      this.server = https.createServer(credentials, this.app);
-      this.wss = new WebSocket.Server({ server: this.server });
-    } else {
-      this.server = http.createServer(this.app);
-      this.wss = new WebSocket.Server({ server: this.server });
+    this.server = http.createServer(this.app);
+    this.wss = new WebSocket.Server({ server: this.server });
+
+    if (config.DATABASE.ENABLED) {
+      checkDbConnection();
     }
 
-    if (!config.DB_DISABLED) {
-      checkDbConnection();
+    if (config.STATISTICS.ENABLED && config.DATABASE.ENABLED) {
       statistics.startStatistics();
     }
 
     this.setUpHttpApiRoutes();
     this.setUpWebsocketHandling();
-    this.runMempoolIntervalFunctions();
+    this.runMainUpdateLoop();
 
     fiatConversion.startService();
     diskCache.loadMempoolCache();
 
-    if (config.BISQ_ENABLED) {
+    if (config.BISQ_BLOCKS.ENABLED) {
       bisq.startBisqService();
       bisq.setPriceCallbackFunction((price) => websocketHandler.setExtraInitProperties('bsq-price', price));
+      blocks.setNewBlockCallback(bisq.handleNewBitcoinBlock.bind(bisq));
     }
 
-    this.server.listen(config.HTTP_PORT, () => {
-      console.log(`Server started on port ${config.HTTP_PORT}`);
+    if (config.BISQ_MARKETS.ENABLED) {
+      bisqMarkets.startBisqService();
+    }
+
+    this.server.listen(config.MEMPOOL.HTTP_PORT, () => {
+      if (worker) {
+        logger.info(`Mempool Server worker #${process.pid} started`);
+      } else {
+        logger.notice(`Mempool Server is running on port ${config.MEMPOOL.HTTP_PORT} (${backendInfo.getShortCommitHash()})`);
+      }
     });
   }
 
-  async runMempoolIntervalFunctions() {
-    await memPool.updateMemPoolInfo();
-    await blocks.updateBlocks();
-    await memPool.updateMempool();
-    setTimeout(this.runMempoolIntervalFunctions.bind(this), config.ELECTRS_POLL_RATE_MS);
+  async runMainUpdateLoop() {
+    try {
+      await memPool.$updateMemPoolInfo();
+      await blocks.$updateBlocks();
+      await memPool.$updateMempool();
+      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.`;
+      if (this.currentBackendRetryInterval > 5) {
+        logger.warn(loggerMsg);
+      } else {
+        logger.debug(loggerMsg);
+      }
+      logger.debug(JSON.stringify(e));
+      setTimeout(this.runMainUpdateLoop.bind(this), 1000 * this.currentBackendRetryInterval);
+      this.currentBackendRetryInterval *= 2;
+      this.currentBackendRetryInterval = Math.min(this.currentBackendRetryInterval, 60);
+    }
   }
 
   setUpWebsocketHandling() {
-    websocketHandler.setWebsocketServer(this.wss);
+    if (this.wss) {
+      websocketHandler.setWebsocketServer(this.wss);
+    }
     websocketHandler.setupConnectionHandling();
     statistics.setNewStatisticsEntryCallback(websocketHandler.handleNewStatistic.bind(websocketHandler));
     blocks.setNewBlockCallback(websocketHandler.handleNewBlock.bind(websocketHandler));
     memPool.setMempoolChangedCallback(websocketHandler.handleMempoolChange.bind(websocketHandler));
+    donations.setNotfyDonationStatusCallback(websocketHandler.handleNewDonation.bind(websocketHandler));
+    fiatConversion.setProgressChangedCallback(websocketHandler.handleNewConversionRates.bind(websocketHandler));
+    loadingIndicators.setProgressChangedCallback(websocketHandler.handleLoadingChanged.bind(websocketHandler));
   }
 
   setUpHttpApiRoutes() {
     this.app
-      .get(config.API_ENDPOINT + 'transaction-times', routes.getTransactionTimes)
-      .get(config.API_ENDPOINT + 'fees/recommended', routes.getRecommendedFees)
-      .get(config.API_ENDPOINT + 'fees/mempool-blocks', routes.getMempoolBlocks)
-      .get(config.API_ENDPOINT + 'statistics/2h', routes.get2HStatistics)
-      .get(config.API_ENDPOINT + 'statistics/24h', routes.get24HStatistics.bind(routes))
-      .get(config.API_ENDPOINT + 'statistics/1w', routes.get1WHStatistics.bind(routes))
-      .get(config.API_ENDPOINT + 'statistics/1m', routes.get1MStatistics.bind(routes))
-      .get(config.API_ENDPOINT + 'statistics/3m', routes.get3MStatistics.bind(routes))
-      .get(config.API_ENDPOINT + 'statistics/6m', routes.get6MStatistics.bind(routes))
-      .get(config.API_ENDPOINT + 'statistics/1y', routes.get1YStatistics.bind(routes))
-      .get(config.API_ENDPOINT + 'backend-info', routes.getBackendInfo)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'transaction-times', routes.getTransactionTimes)
+      .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)
     ;
 
-    if (config.BISQ_ENABLED) {
+    if (config.STATISTICS.ENABLED && config.DATABASE.ENABLED) {
       this.app
-        .get(config.API_ENDPOINT + 'bisq/stats', routes.getBisqStats)
-        .get(config.API_ENDPOINT + 'bisq/tx/:txId', routes.getBisqTransaction)
-        .get(config.API_ENDPOINT + 'bisq/block/:hash', routes.getBisqBlock)
-        .get(config.API_ENDPOINT + 'bisq/blocks/tip/height', routes.getBisqTip)
-        .get(config.API_ENDPOINT + 'bisq/blocks/:index/:length', routes.getBisqBlocks)
-        .get(config.API_ENDPOINT + 'bisq/address/:address', routes.getBisqAddress)
-        .get(config.API_ENDPOINT + 'bisq/txs/:index/:length', routes.getBisqTransactions)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/2h', routes.get2HStatistics)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/24h', routes.get24HStatistics.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/1w', routes.get1WHStatistics.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/1m', routes.get1MStatistics.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/3m', routes.get3MStatistics.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/6m', routes.get6MStatistics.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'statistics/1y', routes.get1YStatistics.bind(routes))
+        ;
+    }
+
+    if (config.BISQ_BLOCKS.ENABLED) {
+      this.app
+        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/stats', routes.getBisqStats)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/tx/:txId', routes.getBisqTransaction)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/block/:hash', routes.getBisqBlock)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/blocks/tip/height', routes.getBisqTip)
+        .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))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/markets', routes.getBisqMarketMarkets.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/offers', routes.getBisqMarketOffers.bind(routes))
+        .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))
+        ;
+    }
+
+    if (config.SPONSORS.ENABLED) {
+      this.app
+        .get(config.MEMPOOL.API_URL_PREFIX + 'donations', routes.getDonations.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'donations/images/:id', routes.getSponsorImage.bind(routes))
+        .post(config.MEMPOOL.API_URL_PREFIX + 'donations', routes.createDonationRequest.bind(routes))
+        .post(config.MEMPOOL.API_URL_PREFIX + 'donations-webhook', routes.donationWebhook.bind(routes))
+      ;
+    } else {
+      this.app
+        .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
+          try {
+            const response = await axios.get('https://mempool.space/api/v1/donations', { responseType: 'stream' });
+            response.data.pipe(res);
+          } catch (e) {
+            res.status(500).end();
+          }
+        })
+        .get(config.MEMPOOL.API_URL_PREFIX + 'donations/images/:id', async (req, res) => {
+          try {
+            const response = await axios.get('https://mempool.space/api/v1/donations/images/' + req.params.id, { responseType: 'stream' });
+            response.data.pipe(res);
+          } catch (e) {
+            res.status(500).end();
+          }
+        });
+    }
+
+    if (config.MEMPOOL.BACKEND !== 'esplora') {
+      this.app
+        .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId', routes.getTransaction)
+        .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 + 'blocks/:height', routes.getBlocks)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'blocks', routes.getBlocks)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash/txs/:index', routes.getBlockTransactions)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'block-height/:height', routes.getBlockHeight)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'address/:address', routes.getAddress)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'address/:address/txs', routes.getAddressTransactions)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'address/:address/txs/chain/:txId', routes.getAddressTransactions)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'address-prefix/:prefix', routes.getAddressPrefix)
       ;
     }
   }

backend/src/interfaces.ts

@@ -1,324 +0,0 @@
-export interface MempoolInfo {
-  size: number;
-  bytes: number;
-  usage?: number;
-  maxmempool?: number;
-  mempoolminfee?: number;
-  minrelaytxfee?: number;
-}
-
-export interface MempoolBlock {
-  blockSize: number;
-  blockVSize: number;
-  nTx: number;
-  medianFee: number;
-  totalFees: number;
-  feeRange: number[];
-}
-
-export interface MempoolBlockWithTransactions extends MempoolBlock {
-  transactionIds: string[];
-}
-
-export interface Transaction {
-  txid: string;
-  version: number;
-  locktime: number;
-  fee: number;
-  size: number;
-  weight: number;
-  vin: Vin[];
-  vout: Vout[];
-  status: Status;
-}
-
-export interface TransactionMinerInfo {
-  vin: VinStrippedToScriptsig[];
-  vout: VoutStrippedToScriptPubkey[];
-}
-
-interface VinStrippedToScriptsig {
-  scriptsig: string;
-}
-
-interface VoutStrippedToScriptPubkey {
-  scriptpubkey_address: string | undefined;
-  value: number;
-}
-
-export interface TransactionExtended extends Transaction {
-  vsize: number;
-  feePerVsize: number;
-  firstSeen: number;
-}
-
-export interface Vin {
-  txid: string;
-  vout: number;
-  is_coinbase: boolean;
-  scriptsig: string;
-  scriptsig_asm: string;
-  inner_redeemscript_asm?: string;
-  inner_witnessscript_asm?: string;
-  sequence: any;
-  witness?: string[];
-  prevout: Vout;
-  // Elements
-  is_pegin?: boolean;
-  issuance?: Issuance;
-}
-
-interface Issuance {
-  asset_id: string;
-  is_reissuance: string;
-  asset_blinding_nonce: string;
-  asset_entropy: string;
-  contract_hash: string;
-  assetamount?: number;
-  assetamountcommitment?: string;
-  tokenamount?: number;
-  tokenamountcommitment?: string;
-}
-
-export interface Vout {
-  scriptpubkey: string;
-  scriptpubkey_asm: string;
-  scriptpubkey_type: string;
-  scriptpubkey_address: string;
-  value: number;
-  // Elements
-  valuecommitment?: number;
-  asset?: string;
-  pegout?: Pegout;
-}
-
-interface Pegout {
-  genesis_hash: string;
-  scriptpubkey: string;
-  scriptpubkey_asm: string;
-  scriptpubkey_address: string;
-}
-
-export interface Status {
-  confirmed: boolean;
-  block_height?: number;
-  block_hash?: string;
-  block_time?: number;
-}
-
-export interface Block {
-  id: string;
-  height: number;
-  version: number;
-  timestamp: number;
-  bits: number;
-  nounce: number;
-  difficulty: number;
-  merkle_root: string;
-  tx_count: number;
-  size: number;
-  weight: number;
-  previousblockhash: string;
-
-  // Custom properties
-  medianFee?: number;
-  feeRange?: number[];
-  reward?: number;
-  coinbaseTx?: TransactionMinerInfo;
-  matchRate: number;
-  stage: number;
-}
-
-export interface Address {
-  address: string;
-  chain_stats: ChainStats;
-  mempool_stats: MempoolStats;
-}
-
-export interface ChainStats {
-  funded_txo_count: number;
-  funded_txo_sum: number;
-  spent_txo_count: number;
-  spent_txo_sum: number;
-  tx_count: number;
-}
-
-export interface MempoolStats {
-  funded_txo_count: number;
-  funded_txo_sum: number;
-  spent_txo_count: number;
-  spent_txo_sum: number;
-  tx_count: number;
-}
-
-export interface Statistic {
-  id?: number;
-  added: string;
-  unconfirmed_transactions: number;
-  tx_per_second: number;
-  vbytes_per_second: number;
-  total_fee: number;
-  mempool_byte_weight: number;
-  fee_data: string;
-
-  vsize_1: number;
-  vsize_2: number;
-  vsize_3: number;
-  vsize_4: number;
-  vsize_5: number;
-  vsize_6: number;
-  vsize_8: number;
-  vsize_10: number;
-  vsize_12: number;
-  vsize_15: number;
-  vsize_20: number;
-  vsize_30: number;
-  vsize_40: number;
-  vsize_50: number;
-  vsize_60: number;
-  vsize_70: number;
-  vsize_80: number;
-  vsize_90: number;
-  vsize_100: number;
-  vsize_125: number;
-  vsize_150: number;
-  vsize_175: number;
-  vsize_200: number;
-  vsize_250: number;
-  vsize_300: number;
-  vsize_350: number;
-  vsize_400: number;
-  vsize_500: number;
-  vsize_600: number;
-  vsize_700: number;
-  vsize_800: number;
-  vsize_900: number;
-  vsize_1000: number;
-  vsize_1200: number;
-  vsize_1400: number;
-  vsize_1600: number;
-  vsize_1800: number;
-  vsize_2000: number;
-}
-
-export interface OptimizedStatistic {
-  id: number;
-  added: string;
-  unconfirmed_transactions: number;
-  tx_per_second: number;
-  vbytes_per_second: number;
-  total_fee: number;
-  mempool_byte_weight: number;
-  vsizes: number[];
-}
-
-export interface Outspend {
-  spent: boolean;
-  txid: string;
-  vin: number;
-  status: Status;
-}
-export interface WebsocketResponse {
-  action: string;
-  data: string[];
-  'track-tx': string;
-  'track-address': string;
-  'watch-mempool': boolean;
-}
-
-export interface VbytesPerSecond {
-  unixTime: number;
-  vSize: number;
-}
-
-export interface BisqBlocks {
-  chainHeight: number;
-  blocks: BisqBlock[];
-}
-
-export interface BisqBlock {
-  height: number;
-  time: number;
-  hash: string;
-  previousBlockHash: string;
-  txs: BisqTransaction[];
-}
-
-export interface BisqTransaction {
-  txVersion: string;
-  id: string;
-  blockHeight: number;
-  blockHash: string;
-  time: number;
-  inputs: BisqInput[];
-  outputs: BisqOutput[];
-  txType: string;
-  txTypeDisplayString: string;
-  burntFee: number;
-  invalidatedBsq: number;
-  unlockBlockHeight: number;
-}
-
-export interface BisqStats {
-  minted: number;
-  burnt: number;
-  addresses: number;
-  unspent_txos: number;
-  spent_txos: number;
-}
-
-interface BisqInput {
-  spendingTxOutputIndex: number;
-  spendingTxId: string;
-  bsqAmount: number;
-  isVerified: boolean;
-  address: string;
-  time: number;
-}
-
-interface BisqOutput {
-  txVersion: string;
-  txId: string;
-  index: number;
-  bsqAmount: number;
-  btcAmount: number;
-  height: number;
-  isVerified: boolean;
-  burntFee: number;
-  invalidatedBsq: number;
-  address: string;
-  scriptPubKey: BisqScriptPubKey;
-  time: any;
-  txType: string;
-  txTypeDisplayString: string;
-  txOutputType: string;
-  txOutputTypeDisplayString: string;
-  lockTime: number;
-  isUnspent: boolean;
-  spentInfo: SpentInfo;
-  opReturn?: string;
-}
-
-interface BisqScriptPubKey {
-  addresses: string[];
-  asm: string;
-  hex: string;
-  reqSigs: number;
-  type: string;
-}
-
-interface SpentInfo {
-  height: number;
-  inputIndex: number;
-  txId: string;
-}
-
-export interface BisqTrade {
-  direction: string;
-  price: string;
-  amount: string;
-  volume: string;
-  payment_method: string;
-  trade_id: string;
-  trade_date: number;
-}

backend/src/logger.ts

@@ -0,0 +1,149 @@
+import config from './config';
+import * as dgram from 'dgram';
+
+class Logger {
+  static priorities = {
+    emerg: 0,
+    alert: 1,
+    crit: 2,
+    err: 3,
+    warn: 4,
+    notice: 5,
+    info: 6,
+    debug: 7
+  };
+  static facilities = {
+    kern: 0,
+    user: 1,
+    mail: 2,
+    daemon: 3,
+    auth: 4,
+    syslog: 5,
+    lpr: 6,
+    news: 7,
+    uucp: 8,
+    local0: 16,
+    local1: 17,
+    local2: 18,
+    local3: 19,
+    local4: 20,
+    local5: 21,
+    local6: 22,
+    local7: 23
+  };
+
+  // @ts-ignore
+  public emerg: ((msg: string) => void);
+  // @ts-ignore
+  public alert: ((msg: string) => void);
+  // @ts-ignore
+  public crit: ((msg: string) => void);
+  // @ts-ignore
+  public err: ((msg: string) => void);
+  // @ts-ignore
+  public warn: ((msg: string) => void);
+  // @ts-ignore
+  public notice: ((msg: string) => void);
+  // @ts-ignore
+  public info: ((msg: string) => void);
+  // @ts-ignore
+  public debug: ((msg: string) => void);
+
+  private name = 'mempool';
+  private fac: any;
+  private loghost: string;
+  private logport: number;
+  private client: dgram.Socket;
+  private network: string;
+
+  constructor(fac) {
+    let prio;
+    this.fac = fac != null ? fac : Logger.facilities.local0;
+    this.loghost = '127.0.0.1';
+    this.logport = 514;
+    for (prio in Logger.priorities) {
+      if (true) {
+        this.addprio(prio);
+      }
+    }
+    this.client = dgram.createSocket('udp4');
+    this.network = this.getNetwork();
+  }
+
+  private addprio(prio): void {
+    this[prio] = (function(_this) {
+      return function(msg) {
+        return _this.msg(prio, msg);
+      };
+    })(this);
+  }
+
+  private getNetwork(): string {
+    if (config.BISQ_BLOCKS.ENABLED) {
+      return 'bisq';
+    }
+    if (config.MEMPOOL.NETWORK && config.MEMPOOL.NETWORK !== 'mainnet') {
+      return config.MEMPOOL.NETWORK;
+    }
+    return '';
+  }
+
+  private msg(priority, msg) {
+    let consolemsg, prionum, syslogmsg;
+    if (typeof msg === 'string' && msg.length > 0) {
+      while (msg[msg.length - 1].charCodeAt(0) === 10) {
+        msg = msg.slice(0, msg.length - 1);
+      }
+    }
+    const network = this.network ? ' <' + this.network + '>' : '';
+    prionum = Logger.priorities[priority] || Logger.priorities.info;
+    syslogmsg = `<${(this.fac * 8 + prionum)}> ${this.name}[${process.pid}]: ${priority.toUpperCase()}${network} ${msg}`;
+    consolemsg = `${this.ts()} [${process.pid}] ${priority.toUpperCase()}:${network} ${msg}`;
+
+    this.syslog(syslogmsg);
+    if (priority === 'warning') {
+      priority = 'warn';
+    }
+    if (priority === 'debug') {
+      priority = 'info';
+    }
+    if (priority === 'err') {
+      priority = 'error';
+    }
+    return (console[priority] || console.error)(consolemsg);
+  }
+
+  private syslog(msg) {
+    let msgbuf;
+    msgbuf = Buffer.from(msg);
+    this.client.send(msgbuf, 0, msgbuf.length, this.logport, this.loghost, function(err, bytes) {
+      if (err) {
+        console.log(err);
+      }
+    });
+  }
+
+  private leadZero(n: number): number | string {
+    if (n < 10) {
+      return '0' + n;
+    }
+    return n;
+  }
+
+  private ts() {
+    let day, dt, hours, minutes, month, months, seconds;
+    dt = new Date();
+    hours = this.leadZero(dt.getHours());
+    minutes = this.leadZero(dt.getMinutes());
+    seconds = this.leadZero(dt.getSeconds());
+    month = dt.getMonth();
+    day = dt.getDate();
+    if (day < 10) {
+      day = ' ' + day;
+    }
+    months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return months[month] + ' ' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+  }
+}
+
+export default new Logger(Logger.facilities.local7);

backend/src/mempool.interfaces.ts

@@ -0,0 +1,140 @@
+import { IEsploraApi } from './api/bitcoin/esplora-api.interface';
+
+export interface MempoolBlock {
+  blockSize: number;
+  blockVSize: number;
+  nTx: number;
+  medianFee: number;
+  totalFees: number;
+  feeRange: number[];
+}
+
+export interface MempoolBlockWithTransactions extends MempoolBlock {
+  transactionIds: string[];
+}
+
+interface VinStrippedToScriptsig {
+  scriptsig: string;
+}
+
+interface VoutStrippedToScriptPubkey {
+  scriptpubkey_address: string | undefined;
+  value: number;
+}
+
+export interface TransactionExtended extends IEsploraApi.Transaction {
+  vsize: number;
+  feePerVsize: number;
+  firstSeen?: number;
+}
+
+export interface TransactionStripped {
+  txid: string;
+  fee: number;
+  weight: number;
+  value: number;
+}
+export interface BlockExtended extends IEsploraApi.Block {
+  medianFee?: number;
+  feeRange?: number[];
+  reward?: number;
+  coinbaseTx?: TransactionMinerInfo;
+  matchRate?: number;
+}
+
+export interface TransactionMinerInfo {
+  vin: VinStrippedToScriptsig[];
+  vout: VoutStrippedToScriptPubkey[];
+}
+
+export interface MempoolStats {
+  funded_txo_count: number;
+  funded_txo_sum: number;
+  spent_txo_count: number;
+  spent_txo_sum: number;
+  tx_count: number;
+}
+
+export interface Statistic {
+  id?: number;
+  added: string;
+  unconfirmed_transactions: number;
+  tx_per_second: number;
+  vbytes_per_second: number;
+  total_fee: number;
+  mempool_byte_weight: number;
+  fee_data: string;
+
+  vsize_1: number;
+  vsize_2: number;
+  vsize_3: number;
+  vsize_4: number;
+  vsize_5: number;
+  vsize_6: number;
+  vsize_8: number;
+  vsize_10: number;
+  vsize_12: number;
+  vsize_15: number;
+  vsize_20: number;
+  vsize_30: number;
+  vsize_40: number;
+  vsize_50: number;
+  vsize_60: number;
+  vsize_70: number;
+  vsize_80: number;
+  vsize_90: number;
+  vsize_100: number;
+  vsize_125: number;
+  vsize_150: number;
+  vsize_175: number;
+  vsize_200: number;
+  vsize_250: number;
+  vsize_300: number;
+  vsize_350: number;
+  vsize_400: number;
+  vsize_500: number;
+  vsize_600: number;
+  vsize_700: number;
+  vsize_800: number;
+  vsize_900: number;
+  vsize_1000: number;
+  vsize_1200: number;
+  vsize_1400: number;
+  vsize_1600: number;
+  vsize_1800: number;
+  vsize_2000: number;
+}
+
+export interface OptimizedStatistic {
+  id: number;
+  added: string;
+  unconfirmed_transactions: number;
+  tx_per_second: number;
+  vbytes_per_second: number;
+  total_fee: number;
+  mempool_byte_weight: number;
+  vsizes: number[];
+}
+
+export interface WebsocketResponse {
+  action: string;
+  data: string[];
+  'track-tx': string;
+  'track-address': string;
+  'watch-mempool': boolean;
+}
+
+export interface VbytesPerSecond {
+  unixTime: number;
+  vSize: number;
+}
+
+export interface RequiredSpec { [name: string]: RequiredParams; }
+
+interface RequiredParams {
+  required: boolean;
+  types: ('@string' | '@number' | '@boolean' | string)[];
+}
+
+export interface ILoadingIndicators { [name: string]: number; }
+export interface IConversionRates { [currency: string]: number; }

backend/src/routes.ts

@@ -1,17 +1,33 @@
+import config from './config';
 import { Request, Response } from 'express';
 import statistics from './api/statistics';
 import feeApi from './api/fee-api';
 import backendInfo from './api/backend-info';
 import mempoolBlocks from './api/mempool-blocks';
 import mempool from './api/mempool';
-import bisq from './api/bisq';
+import bisq from './api/bisq/bisq';
+import websocketHandler from './api/websocket-handler';
+import bisqMarket from './api/bisq/markets-api';
+import { OptimizedStatistic, RequiredSpec, TransactionExtended } from './mempool.interfaces';
+import { MarketsApiError } from './api/bisq/interfaces';
+import { IEsploraApi } from './api/bitcoin/esplora-api.interface';
+import donations from './api/donations';
+import logger from './logger';
+import bitcoinApi from './api/bitcoin/bitcoin-api-factory';
+import transactionUtils from './api/transaction-utils';
+import blocks from './api/blocks';
+import loadingIndicators from './api/loading-indicators';
 
 class Routes {
-  private cache = {};
+  private cache: { [date: string]: OptimizedStatistic[] } = {
+    '24h': [], '1w': [], '1m': [], '3m': [], '6m': [], '1y': [],
+  };
 
   constructor() {
-    this.createCache();
-    setInterval(this.createCache.bind(this), 600000);
+    if (config.DATABASE.ENABLED && config.STATISTICS.ENABLED) {
+      this.createCache();
+      setInterval(this.createCache.bind(this), 600000);
+    }
   }
 
   private async createCache() {
@@ -21,7 +37,7 @@ class Routes {
     this.cache['3m'] = await statistics.$list3M();
     this.cache['6m'] = await statistics.$list6M();
     this.cache['1y'] = await statistics.$list1Y();
-    console.log('Statistics cache created');
+    logger.debug('Statistics cache created');
   }
 
   public async get2HStatistics(req: Request, res: Response) {
@@ -53,7 +69,21 @@ class Routes {
     res.json(this.cache['1y']);
   }
 
+  public getInitData(req: Request, res: Response) {
+    try {
+      const result = websocketHandler.getInitData();
+      res.json(result);
+    } catch (e) {
+      res.status(500).send(e.message);
+    }
+  }
+
   public async getRecommendedFees(req: Request, res: Response) {
+    if (!mempool.isInSync()) {
+      res.statusCode = 503;
+      res.send('Service Unavailable');
+      return;
+    }
     const result = feeApi.getRecommendedFee();
     res.json(result);
   }
@@ -87,6 +117,79 @@ class Routes {
     res.json(backendInfo.getBackendInfo());
   }
 
+  public async createDonationRequest(req: Request, res: Response) {
+    const constraints: RequiredSpec = {
+      'amount': {
+        required: true,
+        types: ['@float']
+      },
+      'orderId': {
+        required: true,
+        types: ['@string']
+      }
+    };
+
+    const p = this.parseRequestParameters(req.body, constraints);
+    if (p.error) {
+      res.status(400).send(p.error);
+      return;
+    }
+
+    if (p.orderId !== '' && !/^(@|)[a-zA-Z0-9_]{1,15}$/.test(p.orderId)) {
+      res.status(400).send('Invalid Twitter handle');
+      return;
+    }
+
+    if (p.amount < 0.001) {
+      res.status(400).send('Amount needs to be at least 0.001');
+      return;
+    }
+
+    if (p.amount > 1000) {
+      res.status(400).send('Amount too large');
+      return;
+    }
+
+    try {
+      const result = await donations.$createRequest(p.amount, p.orderId);
+      res.json(result);
+    } catch (e) {
+      res.status(500).send(e.message);
+    }
+  }
+
+  public async getDonations(req: Request, res: Response) {
+    try {
+      const result = await donations.$getDonationsFromDatabase('handle, imageUrl');
+      res.json(result);
+    } catch (e) {
+      res.status(500).send(e.message);
+    }
+  }
+
+  public async getSponsorImage(req: Request, res: Response) {
+    try {
+      const result = await donations.getSponsorImage(req.params.id);
+      if (result) {
+        res.set('Content-Type', 'image/jpeg');
+        res.send(result);
+      } else {
+        res.status(404).end();
+      }
+    } catch (e) {
+      res.status(500).send(e.message);
+    }
+  }
+
+  public async donationWebhook(req: Request, res: Response) {
+    try {
+      donations.$handleWebhookRequest(req.body);
+      res.end();
+    } catch (e) {
+      res.status(500).send(e);
+    }
+  }
+
   public getBisqStats(req: Request, res: Response) {
     const result = bisq.getStats();
     res.json(result);
@@ -153,6 +256,421 @@ class Routes {
       res.status(404).send('Bisq address not found');
     }
   }
+
+  public getBisqMarketCurrencies(req: Request, res: Response) {
+    const constraints: RequiredSpec = {
+      'type': {
+        required: false,
+        types: ['crypto', 'fiat', 'all']
+      },
+    };
+
+    const p = this.parseRequestParameters(req.query, constraints);
+    if (p.error) {
+      res.status(400).json(this.getBisqMarketErrorResponse(p.error));
+      return;
+    }
+
+    const result = bisqMarket.getCurrencies(p.type);
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketCurrencies error'));
+    }
+  }
+
+  public getBisqMarketDepth(req: Request, res: Response) {
+    const constraints: RequiredSpec = {
+      'market': {
+        required: true,
+        types: ['@string']
+      },
+    };
+
+    const p = this.parseRequestParameters(req.query, constraints);
+    if (p.error) {
+      res.status(400).json(this.getBisqMarketErrorResponse(p.error));
+      return;
+    }
+
+    const result = bisqMarket.getDepth(p.market);
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketDepth error'));
+    }
+  }
+
+  public getBisqMarketMarkets(req: Request, res: Response) {
+    const result = bisqMarket.getMarkets();
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketMarkets error'));
+    }
+  }
+
+  public getBisqMarketTrades(req: Request, res: Response) {
+    const constraints: RequiredSpec = {
+      'market': {
+        required: true,
+        types: ['@string']
+      },
+      'timestamp_from': {
+        required: false,
+        types: ['@number']
+      },
+      'timestamp_to': {
+        required: false,
+        types: ['@number']
+      },
+      'trade_id_to': {
+        required: false,
+        types: ['@string']
+      },
+      'trade_id_from': {
+        required: false,
+        types: ['@string']
+      },
+      'direction': {
+        required: false,
+        types: ['buy', 'sell']
+      },
+      'limit': {
+        required: false,
+        types: ['@number']
+      },
+      'sort': {
+        required: false,
+        types: ['asc', 'desc']
+      }
+    };
+
+    const p = this.parseRequestParameters(req.query, constraints);
+    if (p.error) {
+      res.status(400).json(this.getBisqMarketErrorResponse(p.error));
+      return;
+    }
+
+    const result = bisqMarket.getTrades(p.market, p.timestamp_from,
+      p.timestamp_to, p.trade_id_from, p.trade_id_to, p.direction, p.limit, p.sort);
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketTrades error'));
+    }
+  }
+
+  public getBisqMarketOffers(req: Request, res: Response) {
+    const constraints: RequiredSpec = {
+      'market': {
+        required: true,
+        types: ['@string']
+      },
+      'direction': {
+        required: false,
+        types: ['buy', 'sell']
+      },
+    };
+
+    const p = this.parseRequestParameters(req.query, constraints);
+    if (p.error) {
+      res.status(400).json(this.getBisqMarketErrorResponse(p.error));
+      return;
+    }
+
+    const result = bisqMarket.getOffers(p.market, p.direction);
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketOffers error'));
+    }
+  }
+
+  public getBisqMarketVolumes(req: Request, res: Response) {
+    const constraints: RequiredSpec = {
+      'market': {
+        required: false,
+        types: ['@string']
+      },
+      'interval': {
+        required: false,
+        types: ['minute', 'half_hour', 'hour', 'half_day', 'day', 'week', 'month', 'year', 'auto']
+      },
+      'timestamp_from': {
+        required: false,
+        types: ['@number']
+      },
+      'timestamp_to': {
+        required: false,
+        types: ['@number']
+      },
+      'milliseconds': {
+        required: false,
+        types: ['@boolean']
+      },
+      'timestamp': {
+        required: false,
+        types: ['no', 'yes']
+      },
+    };
+
+    const p = this.parseRequestParameters(req.query, constraints);
+    if (p.error) {
+      res.status(400).json(this.getBisqMarketErrorResponse(p.error));
+      return;
+    }
+
+    const result = bisqMarket.getVolumes(p.market, p.timestamp_from, p.timestamp_to, p.interval, p.milliseconds, p.timestamp);
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketVolumes error'));
+    }
+  }
+
+  public getBisqMarketHloc(req: Request, res: Response) {
+    const constraints: RequiredSpec = {
+      'market': {
+        required: true,
+        types: ['@string']
+      },
+      'interval': {
+        required: false,
+        types: ['minute', 'half_hour', 'hour', 'half_day', 'day', 'week', 'month', 'year', 'auto']
+      },
+      'timestamp_from': {
+        required: false,
+        types: ['@number']
+      },
+      'timestamp_to': {
+        required: false,
+        types: ['@number']
+      },
+      'milliseconds': {
+        required: false,
+        types: ['@boolean']
+      },
+      'timestamp': {
+        required: false,
+        types: ['no', 'yes']
+      },
+    };
+
+    const p = this.parseRequestParameters(req.query, constraints);
+    if (p.error) {
+      res.status(400).json(this.getBisqMarketErrorResponse(p.error));
+      return;
+    }
+
+    const result = bisqMarket.getHloc(p.market, p.interval, p.timestamp_from, p.timestamp_to, p.milliseconds, p.timestamp);
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketHloc error'));
+    }
+  }
+
+  public getBisqMarketTicker(req: Request, res: Response) {
+    const constraints: RequiredSpec = {
+      'market': {
+        required: false,
+        types: ['@string']
+      },
+    };
+
+    const p = this.parseRequestParameters(req.query, constraints);
+    if (p.error) {
+      res.status(400).json(this.getBisqMarketErrorResponse(p.error));
+      return;
+    }
+
+    const result = bisqMarket.getTicker(p.market);
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketTicker error'));
+    }
+  }
+
+  private parseRequestParameters(requestParams: object, params: RequiredSpec): { [name: string]: any; } {
+    const final = {};
+    for (const i in params) {
+      if (params.hasOwnProperty(i)) {
+        if (params[i].required && requestParams[i] === undefined) {
+          return { error: i + ' parameter missing'};
+        }
+        if (typeof requestParams[i] === 'string') {
+          const str = (requestParams[i] || '').toString().toLowerCase();
+          if (params[i].types.indexOf('@number') > -1) {
+            const number = parseInt((str).toString(), 10);
+            final[i] = number;
+          } else if (params[i].types.indexOf('@string') > -1) {
+            final[i] = str;
+          } else if (params[i].types.indexOf('@boolean') > -1) {
+            final[i] = str === 'true' || str === 'yes';
+          } else if (params[i].types.indexOf(str) > -1) {
+            final[i] = str;
+          } else {
+            return { error: i + ' parameter invalid'};
+          }
+        } else if (typeof requestParams[i] === 'number') {
+          final[i] = requestParams[i];
+        }
+      }
+    }
+    return final;
+  }
+
+  private getBisqMarketErrorResponse(message: string): MarketsApiError {
+    return {
+      'success': 0,
+      'error': message
+    };
+  }
+
+  public async getTransaction(req: Request, res: Response) {
+    try {
+      const transaction = await transactionUtils.$getTransactionExtended(req.params.txId, false, true);
+
+      if (transaction) {
+        res.json(transaction);
+      } else {
+        res.status(500).send('Error fetching transaction.');
+      }
+    } catch (e) {
+      res.status(500).send(e.message || e);
+    }
+  }
+
+  public async getBlock(req: Request, res: Response) {
+    try {
+      const result = await bitcoinApi.$getBlock(req.params.hash);
+      res.json(result);
+    } catch (e) {
+      res.status(500).send(e.message || e);
+    }
+  }
+
+  public async getBlocks(req: Request, res: Response) {
+    try {
+      loadingIndicators.setProgress('blocks', 0);
+
+      const returnBlocks: IEsploraApi.Block[] = [];
+      const fromHeight = parseInt(req.params.height, 10) || blocks.getCurrentBlockHeight();
+
+      // Check if block height exist in local cache to skip the hash lookup
+      const blockByHeight = blocks.getBlocks().find((b) => b.height === fromHeight);
+      let startFromHash: string | null = null;
+      if (blockByHeight) {
+        startFromHash = blockByHeight.id;
+      } else {
+        startFromHash = await bitcoinApi.$getBlockHash(fromHeight);
+      }
+
+      let nextHash = startFromHash;
+      for (let i = 0; i < 10; i++) {
+        const localBlock = blocks.getBlocks().find((b) => b.id === nextHash);
+        if (localBlock) {
+          returnBlocks.push(localBlock);
+          nextHash = localBlock.previousblockhash;
+        } else {
+          const block = await bitcoinApi.$getBlock(nextHash);
+          returnBlocks.push(block);
+          nextHash = block.previousblockhash;
+        }
+        loadingIndicators.setProgress('blocks', i / 10 * 100);
+      }
+
+      res.json(returnBlocks);
+    } catch (e) {
+      loadingIndicators.setProgress('blocks', 100);
+      res.status(500).send(e.message || e);
+    }
+  }
+
+  public async getBlockTransactions(req: Request, res: Response) {
+    try {
+      loadingIndicators.setProgress('blocktxs-' + req.params.hash, 0);
+
+      const txIds = await bitcoinApi.$getTxIdsForBlock(req.params.hash);
+      const transactions: TransactionExtended[] = [];
+      const startingIndex = Math.max(0, parseInt(req.params.index, 10));
+
+      const endIndex = Math.min(startingIndex + 10, txIds.length);
+      for (let i = startingIndex; i < endIndex; i++) {
+        const transaction = await transactionUtils.$getTransactionExtended(txIds[i], false, true);
+        if (transaction) {
+          transactions.push(transaction);
+          loadingIndicators.setProgress('blocktxs-' + req.params.hash, (i + 1) / endIndex * 100);
+        }
+      }
+      res.json(transactions);
+    } catch (e) {
+      loadingIndicators.setProgress('blocktxs-' + req.params.hash, 100);
+      res.status(500).send(e.message || e);
+    }
+  }
+
+  public async getBlockHeight(req: Request, res: Response) {
+    try {
+      const blockHash = await bitcoinApi.$getBlockHash(parseInt(req.params.height, 10));
+      res.send(blockHash);
+    } catch (e) {
+      res.status(500).send(e.message || e);
+    }
+  }
+
+  public async getAddress(req: Request, res: Response) {
+    if (config.MEMPOOL.BACKEND === 'none') {
+      res.status(405).send('Address lookups cannot be used with bitcoind as backend.');
+      return;
+    }
+
+    try {
+      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);
+      }
+      res.status(500).send(e.message || e);
+    }
+  }
+
+  public async getAddressTransactions(req: Request, res: Response) {
+    if (config.MEMPOOL.BACKEND === 'none') {
+      res.status(405).send('Address lookups cannot be used with bitcoind as backend.');
+      return;
+    }
+
+    try {
+      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);
+      }
+      res.status(500).send(e.message || e);
+    }
+  }
+
+  public async getAdressTxChain(req: Request, res: Response) {
+    res.status(501).send('Not implemented');
+  }
+
+  public async getAddressPrefix(req: Request, res: Response) {
+    try {
+      const blockHash = await bitcoinApi.$getAddressPrefix(req.params.prefix);
+      res.send(blockHash);
+    } catch (e) {
+      res.status(500).send(e.message || e);
+    }
+  }
+
+  public getTransactionOutspends(req: Request, res: Response) {
+    res.status(501).send('Not implemented');
+  }
 }
 
 export default new Routes();

backend/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2015",
+    "target": "esnext",
+    "lib": ["es2019"],
     "strict": true,
     "noImplicitAny": false,
     "sourceMap": false,

backend/tslint.json

@@ -12,7 +12,7 @@
       "severity": "warn"
     },
     "eofline": true,
-    "forin": true,
+    "forin": false,
     "import-blacklist": [
       true,
       "rxjs",

entrypoint.sh

@@ -1,10 +0,0 @@
-#!/bin/sh
-mysqld_safe&
-sleep 5
-nginx
-cd /mempool.space/backend 
-rm -f mempool-config.json
-rm -f cache.json
-touch cache.json
-jq -n env > mempool-config.json
-node dist/index.js

frontend/.gitignore

@@ -4,6 +4,8 @@
 /dist
 /tmp
 /out-tsc
+server.run.js
+
 # Only exists if Bazel was run
 /bazel-out
 

frontend/.tx/config

@@ -0,0 +1,7 @@
+[main]
+host = https://www.transifex.com
+
+[mempool.frontend-src-locale-messages-xlf--master]
+file_filter = frontend/src/locale/messages.<lang>.xlf
+source_lang = en-US
+type = XLIFF

frontend/README.md

@@ -1,27 +1,29 @@
-# Mempool Space
+# mempool-frontend
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.2.
+## Transifex Project
 
-## Development server
+The mempool frontend strings are localized into 20+ locales:
+https://www.transifex.com/mempool/mempool/dashboard/
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## Translators
 
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+* Arabic @baro0k
+* Czech @pixelmade2
+* German @Emzy
+* English (default)
+* Spanish @maxhodler @bisqes
+* Persian @techmix
+* French @Bayernatoor
+* Korean @kcalvinalvinn
+* Georgian @wyd_idk
+* Dutch @m__btc
+* Japanese @wiz @japananon
+* Norwegian @T82771355
+* Portugese @jgcastro1985
+* Slovenian @thepkbadger
+* Finnish @bio_bitcoin
+* Swedish @softsimon_
+* Turkish @stackmore
+* Ukrainian @volbil
+* Vietnamese @bitcoin_vietnam
+* Chinese @wdljt

frontend/angular.json

@@ -13,11 +13,95 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": {
+          "code":"en-US",
+          "baseHref":"/"
+        },
+        "locales": {
+          "ar": {
+            "translation": "src/locale/messages.ar.xlf",
+            "baseHref": "/ar/"
+          },
+          "cs": {
+            "translation": "src/locale/messages.cs.xlf",
+            "baseHref": "/cs/"
+          },
+          "de": {
+            "translation": "src/locale/messages.de.xlf",
+            "baseHref": "/de/"
+          },
+          "es": {
+            "translation": "src/locale/messages.es.xlf",
+            "baseHref": "/es/"
+          },
+          "fa": {
+            "translation": "src/locale/messages.fa.xlf",
+            "baseHref": "/fa/"
+          },
+          "fr": {
+            "translation": "src/locale/messages.fr.xlf",
+            "baseHref": "/fr/"
+          },
+          "ja": {
+            "translation": "src/locale/messages.ja.xlf",
+            "baseHref": "/ja/"
+          },
+          "ka": {
+            "translation": "src/locale/messages.ka.xlf",
+            "baseHref": "/ka/"
+          },
+          "ko": {
+            "translation": "src/locale/messages.ko.xlf",
+            "baseHref": "/ko/"
+          },
+          "nl": {
+            "translation": "src/locale/messages.nl.xlf",
+            "baseHref": "/nl/"
+          },
+          "nb": {
+            "translation": "src/locale/messages.nb.xlf",
+            "baseHref": "/nb/"
+          },
+          "pt": {
+            "translation": "src/locale/messages.pt.xlf",
+            "baseHref": "/pt/"
+          },
+          "sl": {
+            "translation": "src/locale/messages.sl.xlf",
+            "baseHref": "/sl/"
+          },
+          "sv": {
+            "translation": "src/locale/messages.sv.xlf",
+            "baseHref": "/sv/"
+          },
+          "tr": {
+            "translation": "src/locale/messages.tr.xlf",
+            "baseHref": "/tr/"
+          },
+          "uk": {
+            "translation": "src/locale/messages.uk.xlf",
+            "baseHref": "/uk/"
+          },
+          "fi": {
+            "translation": "src/locale/messages.fi.xlf",
+            "baseHref": "/fi/"
+          },
+          "vi": {
+            "translation": "src/locale/messages.vi.xlf",
+            "baseHref": "/vi/"
+          },
+          "zh": {
+            "translation": "src/locale/messages.zh.xlf",
+            "baseHref": "/zh/"
+          }
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/mempool",
+            "outputPath": "dist/mempool/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -25,10 +109,12 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/resources"
+              "src/resources",
+              "src/robots.txt"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
             ],
             "scripts": [
               "generated-config.js"
@@ -104,7 +190,8 @@
             "tsConfig": [
               "tsconfig.app.json",
               "tsconfig.spec.json",
-              "e2e/tsconfig.json"
+              "e2e/tsconfig.json",
+              "tsconfig.server.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -122,8 +209,56 @@
               "devServerTarget": "mempool:serve:production"
             }
           }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/mempool/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "localize": true,
+              "optimization": true
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "options": {
+            "browserTarget": "mempool:build",
+            "serverTarget": "mempool:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "mempool:build:production",
+              "serverTarget": "mempool:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "mempool:build:production",
+            "serverTarget": "mempool:server:production",
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {}
+          }
         }
       }
     }},
   "defaultProject": "mempool"
-}
+}

frontend/frontend

@@ -0,0 +1 @@
+.

frontend/generate-config.js

@@ -25,7 +25,7 @@ for (setting in configContent) {
 const code = `(function (window) {
   window.__env = window.__env || {};${settings.reduce((str, obj) => `${str}
     window.__env.${obj.key} = ${ typeof obj.value === 'string' ? `'${obj.value}'` : obj.value };`, '')}
-  }(this));`;
+  }(global || this));`;
 
 try {
   fs.writeFileSync(GENERATED_CONFIG_FILE_NAME, code, 'utf8');

frontend/mempool-frontend-config.sample.json

@@ -3,6 +3,10 @@
   "LIQUID_ENABLED": false,
   "BISQ_ENABLED": false,
   "BISQ_SEPARATE_BACKEND": false,
-  "ELCTRS_ITEMS_PER_PAGE": 25,
-  "KEEP_BLOCKS_AMOUNT": 8
-}
+  "ITEMS_PER_PAGE": 10,
+  "KEEP_BLOCKS_AMOUNT": 8,
+  "SPONSORS_ENABLED": false,
+  "NGINX_PROTOCOL": "http",
+  "NGINX_HOSTNAME": "127.0.0.1",
+  "NGINX_PORT": "80"
+}

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-frontend",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Bitcoin mempool visualizer and blockchain explorer backend",
   "license": "MIT",
   "homepage": "https://mempool.space",
@@ -20,51 +20,67 @@
   ],
   "main": "index.ts",
   "scripts": {
-    "ng": "ng",
+    "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-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",
-    "build": "npm run generate-config && ng build --prod && npm run sync-assets",
-    "sync-assets": "node sync-assets.js",
+    "build": "npm run generate-config && ng build --prod --localize && npm run sync-assets",
+    "sync-assets": "node sync-assets.js && rsync -av ./dist/mempool/browser/en-US/resources ./dist/mempool/browser/resources",
     "sync-assets-dev": "node sync-assets.js dev",
     "generate-config": "node generate-config.js",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "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"
   },
   "dependencies": {
-    "@angular/animations": "~10.0.4",
-    "@angular/common": "~10.0.4",
-    "@angular/compiler": "~10.0.4",
-    "@angular/core": "~10.0.4",
-    "@angular/forms": "~10.0.4",
-    "@angular/localize": "^10.0.4",
-    "@angular/platform-browser": "~10.0.4",
-    "@angular/platform-browser-dynamic": "~10.0.4",
-    "@angular/router": "~10.0.4",
+    "@angular/animations": "~10.2.3",
+    "@angular/common": "~10.2.3",
+    "@angular/compiler": "~10.2.3",
+    "@angular/core": "~10.2.3",
+    "@angular/forms": "~10.2.3",
+    "@angular/localize": "^10.2.3",
+    "@angular/platform-browser": "~10.2.3",
+    "@angular/platform-browser-dynamic": "~10.2.3",
+    "@angular/platform-server": "~10.2.2",
+    "@angular/router": "~10.2.3",
     "@fortawesome/angular-fontawesome": "^0.7.0",
     "@fortawesome/fontawesome-common-types": "^0.2.30",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@mempool/chartist": "^0.11.4",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
+    "@nguniversal/express-engine": "10.1.0",
     "@types/qrcode": "^1.3.4",
     "bootstrap": "4.5.0",
-    "chartist": "^0.11.4",
     "clipboard": "^2.0.4",
+    "domino": "^2.1.6",
+    "express": "^4.15.2",
+    "ngx-bootrap-multiselect": "^2.0.0",
     "ngx-infinite-scroll": "^9.0.0",
     "qrcode": "^1.4.4",
-    "rxjs": "^6.6.0",
+    "rxjs": "^6.6.3",
     "tlite": "^0.1.9",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.3",
-    "@angular/cli": "~10.0.3",
-    "@angular/compiler-cli": "~10.0.4",
-    "@angular/language-service": "~10.0.4",
+    "@angular-devkit/build-angular": "^0.1002.0",
+    "@angular/cli": "~10.2.0",
+    "@angular/compiler-cli": "~10.2.2",
+    "@angular/language-service": "~10.2.2",
+    "@nguniversal/builders": "^10.1.0",
+    "@types/express": "^4.17.0",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
+    "http-proxy-middleware": "^1.0.5",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",
@@ -75,6 +91,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~3.9.7"
+    "typescript": "~4.0.5"
   }
-}
+}

frontend/proxy.conf.json

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

frontend/server.run.ts

@@ -0,0 +1,96 @@
+import 'zone.js/dist/zone-node';
+import './generated-config';
+
+import * as domino from 'domino';
+import * as express from 'express';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const {readFileSync, existsSync} = require('fs');
+const {createProxyMiddleware} = require('http-proxy-middleware');
+
+const template = fs.readFileSync(path.join(process.cwd(), 'dist/mempool/browser/en-US/', 'index.html')).toString();
+const win = domino.createWindow(template);
+
+// @ts-ignore
+win.__env = global.__env;
+
+// @ts-ignore
+win.matchMedia = () => {
+  return {
+    matches: true
+  };
+};
+
+// @ts-ignore
+win.setTimeout = (fn) => { fn(); };
+win.document.body.scrollTo = (() => {});
+// @ts-ignore
+global['window'] = win;
+global['document'] = win.document;
+// @ts-ignore
+global['history'] = { state: { } };
+
+global['localStorage'] = {
+  getItem: () => '',
+  setItem: () => {},
+  removeItem: () => {},
+  clear: () => {},
+  length: 0,
+  key: () => '',
+};
+
+/**
+ * Return the list of supported and actually active locales
+ */
+function getActiveLocales() {
+  const angularConfig = JSON.parse(readFileSync('angular.json', 'utf8'));
+
+  const supportedLocales = [
+    angularConfig.projects.mempool.i18n.sourceLocale,
+    ...Object.keys(angularConfig.projects.mempool.i18n.locales),
+  ];
+
+  return supportedLocales.filter(locale => existsSync(`./dist/mempool/server/${locale}`));
+}
+
+function app() {
+  const server = express();
+
+  // proxy API to nginx
+  server.get('/api/**', createProxyMiddleware({
+    // @ts-ignore
+    target: win.__env.NGINX_PROTOCOL + '://' + win.__env.NGINX_HOSTNAME + ':' + win.__env.NGINX_PORT,
+    changeOrigin: true,
+  }));
+
+  // map / and /en to en-US
+  const defaultLocale = 'en-US';
+  console.log(`serving default locale: ${defaultLocale}`);
+  const appServerModule = require(`./dist/mempool/server/${defaultLocale}/main.js`);
+  server.use('/', appServerModule.app(defaultLocale));
+  server.use('/en', appServerModule.app(defaultLocale));
+
+  // map each locale to its localized main.js
+  getActiveLocales().forEach(locale => {
+    console.log('serving locale:', locale);
+    const appServerModule = require(`./dist/mempool/server/${locale}/main.js`);
+
+    // map everything to itself
+    server.use(`/${locale}`, appServerModule.app(locale));
+
+  });
+
+  return server;
+}
+
+function run() {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  app().listen(port, () => {
+    console.log(`Node Express server listening on port ${port}`);
+  });
+}
+
+run();

frontend/server.ts

@@ -0,0 +1,146 @@
+import 'zone.js/dist/zone-node';
+import './generated-config';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as domino from 'domino';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+
+import { join } from 'path';
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';
+import { existsSync } from 'fs';
+
+const template = fs.readFileSync(path.join(process.cwd(), 'dist/mempool/browser/en-US/', 'index.html')).toString();
+const win = domino.createWindow(template);
+
+// @ts-ignore
+win.__env = global.__env;
+
+// @ts-ignore
+win.matchMedia = () => {
+  return {
+    matches: true
+  };
+};
+
+// @ts-ignore
+win.setTimeout = (fn) => { fn(); };
+win.document.body.scrollTo = (() => {});
+// @ts-ignore
+global['window'] = win;
+global['document'] = win.document;
+// @ts-ignore
+global['history'] = { state: { } };
+
+global['localStorage'] = {
+  getItem: () => '',
+  setItem: () => {},
+  removeItem: () => {},
+  clear: () => {},
+  length: 0,
+  key: () => '',
+};
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(locale: string): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), `dist/mempool/browser/${locale}`);
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // only handle URLs that actually exist
+  //server.get(locale, getLocalizedSSR(indexHtml));
+  server.get('/', getLocalizedSSR(indexHtml));
+  server.get('/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/block/*', getLocalizedSSR(indexHtml));
+  server.get('/mempool-block/*', getLocalizedSSR(indexHtml));
+  server.get('/address/*', getLocalizedSSR(indexHtml));
+  server.get('/blocks', getLocalizedSSR(indexHtml));
+  server.get('/graphs', getLocalizedSSR(indexHtml));
+  server.get('/liquid', getLocalizedSSR(indexHtml));
+  server.get('/liquid/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/block/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/mempool-block/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/address/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/asset/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/blocks', getLocalizedSSR(indexHtml));
+  server.get('/liquid/graphs', getLocalizedSSR(indexHtml));
+  server.get('/liquid/assets', getLocalizedSSR(indexHtml));
+  server.get('/liquid/api', getLocalizedSSR(indexHtml));
+  server.get('/liquid/tv', getLocalizedSSR(indexHtml));
+  server.get('/liquid/status', getLocalizedSSR(indexHtml));
+  server.get('/liquid/about', getLocalizedSSR(indexHtml));
+  server.get('/testnet', getLocalizedSSR(indexHtml));
+  server.get('/testnet/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/testnet/block/*', getLocalizedSSR(indexHtml));
+  server.get('/testnet/mempool-block/*', getLocalizedSSR(indexHtml));
+  server.get('/testnet/address/*', getLocalizedSSR(indexHtml));
+  server.get('/testnet/blocks', getLocalizedSSR(indexHtml));
+  server.get('/testnet/graphs', getLocalizedSSR(indexHtml));
+  server.get('/testnet/api', getLocalizedSSR(indexHtml));
+  server.get('/testnet/tv', getLocalizedSSR(indexHtml));
+  server.get('/testnet/status', getLocalizedSSR(indexHtml));
+  server.get('/testnet/about', getLocalizedSSR(indexHtml));
+  server.get('/bisq', getLocalizedSSR(indexHtml));
+  server.get('/bisq/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/bisq/blocks', getLocalizedSSR(indexHtml));
+  server.get('/bisq/block/*', getLocalizedSSR(indexHtml));
+  server.get('/bisq/address/*', getLocalizedSSR(indexHtml));
+  server.get('/bisq/stats', getLocalizedSSR(indexHtml));
+  server.get('/bisq/about', getLocalizedSSR(indexHtml));
+  server.get('/bisq/api', getLocalizedSSR(indexHtml));
+  server.get('/about', getLocalizedSSR(indexHtml));
+  server.get('/api', getLocalizedSSR(indexHtml));
+  server.get('/tv', getLocalizedSSR(indexHtml));
+  server.get('/status', getLocalizedSSR(indexHtml));
+  server.get('/terms-of-service', getLocalizedSSR(indexHtml));
+
+  // fallback to static file handler so we send HTTP 404 to nginx
+  server.get('/**', express.static(distFolder, { maxAge: '1y' }));
+
+  return server;
+}
+
+function getLocalizedSSR(indexHtml) {
+  return (req, res) => {
+    res.render(indexHtml, {
+      req,
+      providers: [
+        { provide: APP_BASE_HREF, useValue: req.baseUrl }
+      ]
+    });
+  }
+}
+
+// only used for development mode
+function run(): void {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app('en-US');
+  server.listen(port, () => {
+    console.log(`Node Express server listening on port ${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';

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

@@ -9,10 +9,13 @@ import { AboutComponent } from './components/about/about.component';
 import { TelevisionComponent } from './components/television/television.component';
 import { StatisticsComponent } from './components/statistics/statistics.component';
 import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
-import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { AssetComponent } from './components/asset/asset.component';
 import { AssetsComponent } from './assets/assets.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
+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';
 
 const routes: Routes = [
   {
@@ -25,7 +28,7 @@ const routes: Routes = [
         children: [
           {
             path: '',
-            component: LatestBlocksComponent
+            component: DashboardComponent,
           },
           {
             path: 'tx/:id',
@@ -41,6 +44,10 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'blocks',
+        component: LatestBlocksComponent,
+      },
       {
         path: 'graphs',
         component: StatisticsComponent,
@@ -49,6 +56,14 @@ const routes: Routes = [
         path: 'about',
         component: AboutComponent,
       },
+      {
+        path: 'api',
+        component: ApiDocsComponent,
+      },
+      {
+        path: 'terms-of-service',
+        component: TermsOfServiceComponent
+      },
       {
         path: 'address/:id',
         children: [],
@@ -69,7 +84,7 @@ const routes: Routes = [
             children: [
               {
                 path: '',
-                component: LatestBlocksComponent
+                component: DashboardComponent
               },
               {
                 path: 'tx/:id',
@@ -86,12 +101,12 @@ const routes: Routes = [
             ],
           },
           {
-            path: 'graphs',
-            component: StatisticsComponent,
+            path: 'blocks',
+            component: LatestBlocksComponent,
           },
           {
-            path: 'about',
-            component: AboutComponent,
+            path: 'graphs',
+            component: StatisticsComponent,
           },
           {
             path: 'address/:id',
@@ -105,6 +120,10 @@ const routes: Routes = [
             path: 'assets',
             component: AssetsComponent,
           },
+          {
+            path: 'api',
+            component: ApiDocsComponent,
+          },
         ],
       },
       {
@@ -134,7 +153,7 @@ const routes: Routes = [
             children: [
               {
                 path: '',
-                component: LatestBlocksComponent
+                component: DashboardComponent
               },
               {
                 path: 'tx/:id',
@@ -151,18 +170,22 @@ const routes: Routes = [
             ],
           },
           {
-            path: 'graphs',
-            component: StatisticsComponent,
+            path: 'blocks',
+            component: LatestBlocksComponent,
           },
           {
-            path: 'about',
-            component: AboutComponent,
+            path: 'graphs',
+            component: StatisticsComponent,
           },
           {
             path: 'address/:id',
             children: [],
             component: AddressComponent
           },
+          {
+            path: 'api',
+            component: ApiDocsComponent,
+          },
         ],
       },
       {
@@ -199,7 +222,9 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'enabled'
+})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

frontend/src/app/app.constants.ts

@@ -34,25 +34,57 @@ export const mempoolFeeColors = [
 export const feeLevels = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
   250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
 
-interface Env {
-  TESTNET_ENABLED: boolean;
-  LIQUID_ENABLED: boolean;
-  BISQ_ENABLED: boolean;
-  BISQ_SEPARATE_BACKEND: boolean;
-  ELCTRS_ITEMS_PER_PAGE: number;
-  KEEP_BLOCKS_AMOUNT: number;
+export interface Language {
+  code: string;
+  name: string;
 }
 
-const defaultEnv: Env = {
-  'TESTNET_ENABLED': false,
-  'LIQUID_ENABLED': false,
-  'BISQ_ENABLED': false,
-  'BISQ_SEPARATE_BACKEND': false,
-  'ELCTRS_ITEMS_PER_PAGE': 25,
-  'KEEP_BLOCKS_AMOUNT': 8
-};
-
-const browserWindow = window || {};
-// @ts-ignore
-const browserWindowEnv = browserWindow.__env || {};
-export const env: Env = Object.assign(defaultEnv, browserWindowEnv);
+export const languages: Language[] = [
+   { code: 'ar', name: 'العربية' },         // Arabic
+// { code: 'bg', name: 'Български' },       // Bulgarian
+// { code: 'bs', name: 'Bosanski' },        // Bosnian
+// { code: 'ca', name: 'Català' },          // Catalan
+   { code: 'cs', name: 'Čeština' },         // Czech
+// { code: 'da', name: 'Dansk' },           // Danish
+   { code: 'de', name: 'Deutsch' },         // German
+// { code: 'et', name: 'Eesti' },           // Estonian
+// { code: 'el', name: 'Ελληνικά' },        // Greek
+   { code: 'en', name: 'English' },         // English
+   { code: 'es', name: 'Español' },         // Spanish
+// { code: 'eo', name: 'Esperanto' },       // Esperanto
+// { code: 'eu', name: 'Euskara' },         // Basque
+   { code: 'fa', name: 'فارسی' },           // Persian
+   { code: 'fr', name: 'Français' },        // French
+// { code: 'gl', name: 'Galego' },          // Galician
+   { code: 'ko', name: '한국어' },          // Korean
+// { code: 'hr', name: 'Hrvatski' },        // Croatian
+// { code: 'id', name: 'Bahasa Indonesia' },// Indonesian
+// { code: 'it', name: 'Italiano' },        // Italian
+// { code: 'he', name: 'עברית' },           // Hebrew
+   { code: 'ka', name: 'ქართული' },         // Georgian
+// { code: 'lv', name: 'Latviešu' },        // Latvian
+// { code: 'lt', name: 'Lietuvių' },        // Lithuanian
+// { code: 'hu', name: 'Magyar' },          // Hungarian
+// { code: 'mk', name: 'Македонски' },      // Macedonian
+// { code: 'ms', name: 'Bahasa Melayu' },   // Malay
+   { code: 'nl', name: 'Nederlands' },      // Dutch
+   { code: 'ja', name: '日本語' },          // Japanese
+   { code: 'nb', name: 'Norsk' },           // Norwegian Bokmål
+// { code: 'nn', name: 'Norsk Nynorsk' },   // Norwegian Nynorsk
+// { 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: 'sk', name: 'Slovenčina' },      // Slovak
+   { code: 'sl', name: 'Slovenščina' },     // Slovenian
+// { code: 'sr', name: 'Српски / srpski' }, // Serbian
+// { code: 'sh', name: 'Srpskohrvatski / српскохрватски' },// Serbo-Croatian
+   { code: 'fi', name: 'Suomi' },           // Finnish
+   { code: 'sv', name: 'Svenska' },         // Swedish
+// { code: 'th', name: 'ไทย' },             // Thai
+   { code: 'tr', name: 'Türkçe' },          // Turkish
+   { code: 'uk', name: 'Українська' },      // Ukrainian
+   { code: 'vi', name: 'Tiếng Việt' },      // Vietnamese
+   { code: 'zh', name: '中文' },            // Chinese
+];

frontend/src/app/app.module.ts

@@ -1,6 +1,6 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
@@ -40,6 +40,15 @@ import { StatusViewComponent } from './components/status-view/status-view.compon
 import { MinerComponent } from './components/miner/miner.component';
 import { SharedModule } from './shared/shared.module';
 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 } from '@fortawesome/free-solid-svg-icons';
+import { ApiDocsComponent } from './components/api-docs/api-docs.component';
+import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
+import { StorageService } from './services/storage.service';
+import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 
 @NgModule({
   declarations: [
@@ -56,8 +65,8 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
     TransactionsListComponent,
     AddressComponent,
     AmountComponent,
-    SearchFormComponent,
     LatestBlocksComponent,
+    SearchFormComponent,
     TimespanComponent,
     AddressLabelsComponent,
     MempoolBlocksComponent,
@@ -70,14 +79,20 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
     AssetsComponent,
     MinerComponent,
     StatusViewComponent,
+    FeesBoxComponent,
+    DashboardComponent,
+    ApiDocsComponent,
+    TermsOfServiceComponent,
   ],
   imports: [
-    BrowserModule,
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserTransferStateModule,
     AppRoutingModule,
     HttpClientModule,
     BrowserAnimationsModule,
     InfiniteScrollModule,
     NgbTypeaheadModule,
+    FontAwesomeModule,
     SharedModule,
   ],
   providers: [
@@ -86,7 +101,29 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
     WebsocketService,
     AudioService,
     SeoService,
+    StorageService,
+    { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+  constructor(library: FaIconLibrary) {
+    library.addIcons(faInfoCircle);
+    library.addIcons(faChartArea);
+    library.addIcons(faTv);
+    library.addIcons(faTachometerAlt);
+    library.addIcons(faCubes);
+    library.addIcons(faCogs);
+    library.addIcons(faThList);
+    library.addIcons(faList);
+    library.addIcons(faTachometerAlt);
+    library.addIcons(faDatabase);
+    library.addIcons(faSearch);
+    library.addIcons(faLink);
+    library.addIcons(faBolt);
+    library.addIcons(faTint);
+    library.addIcons(faAngleDown);
+    library.addIcons(faAngleUp);
+    library.addIcons(faExchangeAlt);
+  }
+}

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

@@ -0,0 +1,20 @@
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './components/app/app.component';
+import { HttpCacheInterceptor } from './services/http-cache.interceptor';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+    ServerTransferStateModule,
+  ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

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

@@ -1,26 +1,26 @@
 <div class="container-xl">
-  <h1 style="float: left;">Registered assets</h1>
+  <h1 style="float: left;" i18n="Registered assets page header">Registered assets</h1>
   <br>
 
   <div class="clearfix"></div>
 
   <form [formGroup]="searchForm" class="form-inline">
     <div class="input-group m-2">
-      <input style="width: 250px;" formControlName="searchText" type="text" class="form-control" placeholder="Search asset">
+      <input style="width: 250px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
       <div class="input-group-append">
-        <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off">Clear</button>
+        <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
       </div>
     </div>
   </form>
 
-  <ng-template [ngIf]="!isLoading && !error">
+  <ng-container *ngIf="(assets$ | async) as filteredAssets; else isLoading">
     <table class="table table-borderless table-striped">
       <thead>
-        <th class="td-name">Name</th>
-        <th>Ticker</th>
-        <th class="d-none d-md-block">Issuer domain</th>
-        <th>Asset ID</th>
-        <th class="d-none d-lg-block">Issuance TX</th>
+        <th class="td-name" i18n="Asset name header">Name</th>
+        <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">
@@ -37,17 +37,17 @@
 
     <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
 
-  </ng-template>
+  </ng-container>
 
-  <ng-template [ngIf]="isLoading && !error">
+  <ng-template #isLoading>
 
     <table class="table table-borderless table-striped">
       <thead>
-        <th>Name</th>
-        <th>Ticker</th>
-        <th>Issuer domain</th>
-        <th>Asset ID</th>
-        <th>Issuance TX</th>
+        <th i18n="Asset name header">Name</th>
+        <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]">
@@ -64,7 +64,7 @@
 
   <ng-template [ngIf]="error">
     <div class="text-center">
-      Error loading assets data.
+      <ng-container i18n="Asset data load error">Error loading assets data.</ng-container>
       <br>
       <i>{{ error.error }}</i>
     </div>

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

@@ -1,22 +1,26 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { AssetsService } from '../services/assets.service';
 import { environment } from 'src/environments/environment';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { distinctUntilChanged, map, filter, mergeMap, tap, take } from 'rxjs/operators';
+import { ActivatedRoute, Router } from '@angular/router';
+import { merge, combineLatest, Observable } from 'rxjs';
+import { AssetExtended } from '../interfaces/electrs.interface';
+import { SeoService } from '../services/seo.service';
 
 @Component({
   selector: 'app-assets',
   templateUrl: './assets.component.html',
-  styleUrls: ['./assets.component.scss']
+  styleUrls: ['./assets.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AssetsComponent implements OnInit {
   nativeAssetId = environment.nativeAssetId;
-  assets: any[];
-  assetsCache: any[];
-  filteredAssets: any[];
+  assets: AssetExtended[];
+  assetsCache: AssetExtended[];
   searchForm: FormGroup;
+  assets$: Observable<AssetExtended[]>;
 
-  isLoading = true;
   error: any;
 
   page = 1;
@@ -27,39 +31,28 @@ export class AssetsComponent implements OnInit {
   constructor(
     private assetsService: AssetsService,
     private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private seoService: SeoService,
   ) { }
 
   ngOnInit() {
+    this.seoService.setTitle($localize`:@@ee8f8008bae6ce3a49840c4e1d39b4af23d4c263:Assets`);
     this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
 
     this.searchForm = this.formBuilder.group({
       searchText: [{ value: '', disabled: true }, Validators.required]
     });
 
-    this.searchForm.get('searchText').valueChanges
-      .pipe(
-        distinctUntilChanged(),
-      )
-      .subscribe((searchText) => {
-        this.page = 1;
-        if (searchText.length ) {
-          this.filteredAssets = this.assetsCache.filter((asset) => asset.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
-            || asset.ticker.toLowerCase().indexOf(searchText.toLowerCase()) > -1);
-          this.assets = this.filteredAssets;
-          this.filteredAssets = this.filteredAssets.slice(0, this.itemsPerPage);
-        } else {
-          this.assets = this.assetsCache;
-          this.filteredAssets = this.assets.slice(0, this.itemsPerPage);
-        }
-      });
-
-    this.getAssets();
-  }
-
-  getAssets() {
-    this.assetsService.getAssetsJson$
-      .subscribe((assets) => {
+    this.assets$ = combineLatest([
+      this.assetsService.getAssetsJson$,
+      this.route.queryParams
+    ])
+    .pipe(
+      take(1),
+      mergeMap(([assets, qp]) => {
         this.assets = Object.values(assets);
+        // @ts-ignore
         this.assets.push({
           name: 'Liquid Bitcoin',
           ticker: 'L-BTC',
@@ -68,19 +61,92 @@ export class AssetsComponent implements OnInit {
         this.assets = this.assets.sort((a: any, b: any) => a.name.localeCompare(b.name));
         this.assetsCache = this.assets;
         this.searchForm.get('searchText').enable();
-        this.filteredAssets = this.assets.slice(0, this.itemsPerPage);
-        this.isLoading = false;
-      },
-      (error) => {
-        console.log(error);
-        this.error = error;
-        this.isLoading = false;
-      });
+
+        if (qp.search) {
+          this.searchForm.get('searchText').setValue(qp.search, { emitEvent: false });
+        }
+
+        return merge(
+          this.searchForm.get('searchText').valueChanges
+            .pipe(
+              distinctUntilChanged(),
+              tap((text) => {
+                this.page = 1;
+                this.searchTextChanged(text);
+              })
+            ),
+          this.route.queryParams
+            .pipe(
+              filter((queryParams) => {
+                const newPage = parseInt(queryParams.page, 10);
+                if (newPage !== this.page || queryParams.search !== this.searchForm.get('searchText').value) {
+                  return true;
+                }
+                return false;
+              }),
+              map((queryParams) => {
+                if (queryParams.page) {
+                  const newPage = parseInt(queryParams.page, 10);
+                  this.page = newPage;
+                } else {
+                  this.page = 1;
+                }
+                if (this.searchForm.get('searchText').value !== (queryParams.search || '')) {
+                  this.searchTextChanged(queryParams.search);
+                }
+                if (queryParams.search) {
+                  this.searchForm.get('searchText').setValue(queryParams.search, { emitEvent: false });
+                  return queryParams.search;
+                }
+                return '';
+              })
+            ),
+        );
+      }),
+      map((searchText) => {
+        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);
+          this.assets = filteredAssets;
+          return filteredAssets.slice(start, this.itemsPerPage + start);
+        } else {
+          this.assets = this.assetsCache;
+          return this.assets.slice(start, this.itemsPerPage + start);
+        }
+      })
+    );
   }
 
   pageChange(page: number) {
-    const start = (page - 1) * this.itemsPerPage;
-    this.filteredAssets = this.assets.slice(start, this.itemsPerPage + start);
+    const queryParams = { page: page, search: this.searchForm.get('searchText').value };
+    if (queryParams.search === '') {
+      queryParams.search = null;
+    }
+    if (queryParams.page === 1) {
+      queryParams.page = null;
+    }
+    this.page = -1;
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: queryParams,
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  searchTextChanged(text: string) {
+    const queryParams = { search: text, page: 1 };
+    if (queryParams.search === '') {
+      queryParams.search = null;
+    }
+    if (queryParams.page === 1) {
+      queryParams.page = null;
+    }
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: queryParams,
+      queryParamsHandling: 'merge',
+    });
   }
 
   trackByAsset(index: number, asset: any) {

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

@@ -1,5 +1,5 @@
 <div class="container-xl">
-  <h1 style="float: left;">Address</h1>
+  <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>
@@ -17,15 +17,15 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td>Total received</td>
+                <td i18n="address.total-received">Total received</td>
                 <td>{{ totalReceived / 100 | number: '1.2-2' }} BSQ</td>
               </tr>
               <tr>
-                <td>Total sent</td>
+                <td i18n="address.total-sent">Total sent</td>
                 <td>{{ totalSent / 100 | number: '1.2-2' }} BSQ</td>
               </tr>
               <tr>
-                <td>Final balance</td>
+                <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>
               </tr>
             </tbody>
@@ -43,7 +43,11 @@
 
     <br>
 
-    <h2>{{ transactions.length | number }} transactions</h2>
+    <h2>
+      <ng-container *ngTemplateOutlet="transactions.length === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: transactions.length}"></ng-container>
+      <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+      <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+    </h2>
 
     <ng-template ngFor let-tx [ngForOf]="transactions">
 

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

@@ -36,7 +36,7 @@ export class BisqAddressComponent implements OnInit, OnDestroy {
           this.transactions = null;
           document.body.scrollTo(0, 0);
           this.addressString = params.get('id') || '';
-          this.seoService.setTitle('Address: ' + this.addressString, true);
+          this.seoService.setTitle($localize`:@@bisq-address.component.browser-title:Address: ${this.addressString}:INTERPOLATION:`);
 
           return this.bisqApiService.getAddress$(this.addressString)
             .pipe(

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

@@ -1,7 +1,7 @@
 <div class="container-xl">
 
   <div class="title-block">
-    <h1>Block <ng-template [ngIf]="blockHeight"><a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
+    <h1><ng-template [ngIf]="blockHeight" i18n="block.block">Block <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
   </div>
 
   <div class="clearfix"></div>
@@ -14,15 +14,15 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="td-width">Hash</td>
+                <td class="td-width" i18n="block.hash">Hash</td>
                 <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" title="{{ block.hash }}">{{ block.hash | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.hash"></app-clipboard></td>
               </tr>
               <tr>
-                <td>Timestamp</td>
+                <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
                 <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> ago)</i>
+                    <i>(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since>)</i>
                   </div>
                 </td>
               </tr>
@@ -32,7 +32,7 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="td-width">Previous hash</td>
+                <td class="td-width" i18n="block.previous_hash|Transaction Previous Hash">Previous hash</td>
                 <td><a [routerLink]="['/block/' | relativeUrl, block.previousBlockHash]" title="{{ block.hash }}">{{ block.previousBlockHash | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.previousBlockHash"></app-clipboard></td>
               </tr>
           </table>
@@ -44,7 +44,11 @@
 
     <br>
 
-    <h2>{{ block.txs.length | number }} transactions</h2>
+    <h2>
+      <ng-container *ngTemplateOutlet="block.txs.length === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.txs.length| number}"></ng-container>
+      <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+      <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+    </h2>
 
     <ng-template ngFor let-tx [ngForOf]="block.txs">
 
@@ -73,11 +77,11 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="td-width">Hash</td>
+                <td class="td-width" i18n="block.hash">Hash</td>
                 <td><span class="skeleton-loader"></span></td>
               </tr>
               <tr>
-                <td>Timestamp</td>
+                <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
                 <td><span class="skeleton-loader"></span></td>
               </tr>
           </table>
@@ -86,7 +90,7 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="td-width">Previous hash</td>
+                <td class="td-width" i18n="block.previous_hash|Transaction Previous Hash">Previous hash</td>
                 <td><span class="skeleton-loader"></span></td>
               </tr>
           </table>

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

@@ -82,7 +82,7 @@ export class BisqBlockComponent implements OnInit, OnDestroy {
         }
         this.isLoading = false;
         this.blockHeight = block.height;
-        this.seoService.setTitle('Block: #' + block.height + ': ' + block.hash, true);
+        this.seoService.setTitle($localize`:@@bisq-block.component.browser-title:Block ${block.height}:BLOCK_HEIGHT:: ${block.hash}:BLOCK_HASH:`);
         this.block = block;
       });
   }

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

@@ -1,21 +1,23 @@
 <div class="container-xl">
-  <h1 style="float: left;">Blocks</h1>
+  <h1 style="float: left;" i18n="Bisq blocks header">Blocks</h1>
   <br>
 
   <div class="clearfix"></div>
 
+  <ng-container *ngIf="{ value: (blocks$ | async) } as blocks">
+
   <div class="table-responsive-sm">
     <table class="table table-borderless table-striped">
       <thead>
-        <th style="width: 25%;">Height</th>
-        <th style="width: 25%;">Confirmed</th>
-        <th style="width: 25%;">Total Sent</th>
-        <th class="d-none d-md-block" style="width: 25%;">Transactions</th>
+        <th style="width: 25%;" i18n="Bisq block height header">Height</th>
+        <th style="width: 25%;" i18n="Bisq block confirmed time header">Confirmed</th>
+        <th style="width: 25%;" i18n="Bisq block total BSQ tokens sent header">Total sent</th>
+        <th class="d-none d-md-block" style="width: 25%;" i18n="Bisq block transactions title">Transactions</th>
       </thead>
-      <tbody *ngIf="!isLoading; else loadingTmpl">
-        <tr *ngFor="let block of blocks; trackBy: trackByFn">
+      <tbody *ngIf="blocks.value; else loadingTmpl">
+        <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> ago</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 class="d-none d-md-block">{{ block.txs.length }}</td>
         </tr> 
@@ -25,12 +27,13 @@
 
   <br>
 
-  <ngb-pagination [size]="paginationSize" [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination *ngIf="blocks.value" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
+  </ng-container>
 </div>
 
 <ng-template #loadingTmpl>
   <tr *ngFor="let i of loadingItems">
-    <td *ngFor="let j of [1, 2, 3, 4, 5]"><span class="skeleton-loader"></span></td>
+    <td *ngFor="let j of [1, 2, 3, 4]"><span class="skeleton-loader"></span></td>
   </tr>
 </ng-template>

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

@@ -1,18 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { BisqApiService } from '../bisq-api.service';
-import { switchMap, tap } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { switchMap, map, take, mergeMap, tap } from 'rxjs/operators';
+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';
 
 @Component({
   selector: 'app-bisq-blocks',
   templateUrl: './bisq-blocks.component.html',
-  styleUrls: ['./bisq-blocks.component.scss']
+  styleUrls: ['./bisq-blocks.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BisqBlocksComponent implements OnInit {
-  blocks: BisqBlock[];
-  totalCount: number;
+  blocks$: Observable<[BisqBlock[], number]>;
   page = 1;
   itemsPerPage: number;
   contentSpace = window.innerHeight - (165 + 75);
@@ -23,15 +24,15 @@ export class BisqBlocksComponent implements OnInit {
   paginationSize: 'sm' | 'lg' = 'md';
   paginationMaxSize = 10;
 
-  pageSubject$ = new Subject<number>();
-
   constructor(
     private bisqApiService: BisqApiService,
     private seoService: SeoService,
+    private route: ActivatedRoute,
+    private router: Router,
   ) { }
 
   ngOnInit(): void {
-    this.seoService.setTitle('Blocks', true);
+    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) {
@@ -39,20 +40,28 @@ export class BisqBlocksComponent implements OnInit {
       this.paginationMaxSize = 3;
     }
 
-    this.pageSubject$
+    this.blocks$ = this.route.queryParams
       .pipe(
-        tap(() => this.isLoading = true),
-        switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage))
-      )
-      .subscribe((response) => {
-        this.isLoading = false;
-        this.blocks = response.body;
-        this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
-      }, (error) => {
-        console.log(error);
-      });
-
-    this.pageSubject$.next(1);
+        take(1),
+        tap((qp) => {
+          if (qp.page) {
+            this.page = parseInt(qp.page, 10);
+          }
+        }),
+        mergeMap(() => this.route.queryParams),
+        map((queryParams) => {
+          if (queryParams.page) {
+            const newPage = parseInt(queryParams.page, 10);
+            this.page = newPage;
+            return newPage;
+          } else {
+            this.page = 1;
+          }
+          return 1;
+        }),
+        switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage)),
+        map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)]),
+      );
   }
 
   calculateTotalOutput(block: BisqBlock): number {
@@ -66,6 +75,9 @@ export class BisqBlocksComponent implements OnInit {
   }
 
   pageChange(page: number) {
-    this.pageSubject$.next(page);
+    this.router.navigate([], {
+      queryParams: { page: page },
+      queryParamsHandling: 'merge',
+    });
   }
 }

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

@@ -73,9 +73,15 @@ export class BisqIconComponent implements OnChanges {
         this.iconProp[1] = 'file-alt';
         this.color = '6c8b3b';
         break;
+      case 'IRREGULAR':
+        this.iconProp[1] = 'exclamation-circle';
+        this.color = 'ffd700';
+        break;
       default:
         this.iconProp[1] = 'question';
         this.color = 'ffac00';
     }
+    // @ts-ignore
+    this.iconProp = this.iconProp.slice();
   }
 }

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

@@ -1,5 +1,5 @@
 <div class="container-xl">
-  <h1 style="float: left;">BSQ Statistics</h1>
+  <h1 style="float: left;" i18n="BSQ statistics header">BSQ statistics</h1>
   <br>
 
   <div class="clearfix"></div>
@@ -7,41 +7,37 @@
   <div class="row">
     <div class="col-sm">
       <table class="table table-borderless table-striped">
-        <thead>
-          <th>Property</th>
-          <th>Value</th>
-        </thead>
         <tbody *ngIf="!isLoading; else loadingTemplate">
           <tr>
-            <td class="td-width">Existing amount</td>
+            <td class="td-width" i18n="BSQ existing amount">Existing amount</td>
             <td>{{ (stats.minted - stats.burnt) / 100 | number: '1.2-2' }} BSQ</td>
           </tr>
           <tr>
-            <td>Minted amount</td>
+            <td i18n="BSQ minted amount">Minted amount</td>
             <td>{{ stats.minted | number: '1.2-2' }} BSQ</td>
           </tr>
           <tr>
-            <td>Burnt amount</td>
+            <td i18n="BSQ burnt amount">Burnt amount</td>
             <td>{{ stats.burnt | number: '1.2-2' }} BSQ</td>
           </tr>
           <tr>
-            <td>Addresses</td>
+            <td i18n="BSQ addresses">Addresses</td>
             <td>{{ stats.addresses | number }}</td>
           </tr>
           <tr>
-            <td>Unspent TXOs</td>
+            <td i18n="BSQ unspent transaction outputs">Unspent TXOs</td>
             <td>{{ stats.unspent_txos | number }}</td>
           </tr>
           <tr>
-            <td>Spent TXOs</td>
+            <td i18n="BSQ spent transaction outputs">Spent TXOs</td>
             <td>{{ stats.spent_txos | number }}</td>
           </tr>
           <tr>
-            <td>Price</td>
+            <td i18n="BSQ token price">Price</td>
             <td><app-fiat [value]="price"></app-fiat></td>
           </tr>
           <tr>
-            <td>Market cap</td>
+            <td i18n="BSQ token market cap">Market cap</td>
             <td><app-fiat [value]="price * (stats.minted - stats.burnt) / 100"></app-fiat></td>
           </tr>
         </tbody>
@@ -55,23 +51,23 @@
 <ng-template #loadingTemplate>
   <tbody>
     <tr>
-      <td class="td-width">Existing amount</td>
+      <td class="td-width" i18n>Existing amount</td>
       <td><span class="skeleton-loader"></span></td>
     </tr>
     <tr>
-      <td>Minted amount</td>
+      <td i18n>Minted amount</td>
       <td><span class="skeleton-loader"></span></td>
     </tr>
     <tr>
-      <td>Burnt amount</td>
+      <td i18n>Burnt amount</td>
       <td><span class="skeleton-loader"></span></td>
     </tr>
     <tr>
-      <td>Addresses</td>
+      <td i18n>Addresses</td>
       <td><span class="skeleton-loader"></span></td>
     </tr>
     <tr>
-      <td>Unspent TXOs</td>
+      <td i18n>Unspent TXOs</td>
       <td><span class="skeleton-loader"></span></td>
     </tr>
     <tr>
@@ -79,11 +75,11 @@
       <td><span class="skeleton-loader"></span></td>
     </tr>
     <tr>
-      <td>Price</td>
+      <td i18n>Price</td>
       <td><span class="skeleton-loader"></span></td>
     </tr>
     <tr>
-      <td>Market cap</td>
+      <td i18n>Market cap</td>
       <td><span class="skeleton-loader"></span></td>
     </tr>
   </tbody>

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

@@ -21,8 +21,7 @@ export class BisqStatsComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.seoService.setTitle('BSQ Statistics', false);
-
+    this.seoService.setTitle($localize`:@@2a30a4cdb123a03facc5ab8c5b3e6d8b8dbbc3d4:BSQ statistics`);
     this.stateService.bsqPrice$
       .subscribe((bsqPrice) => {
         this.price = bsqPrice;

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

@@ -4,15 +4,15 @@
       <table class="table table-borderless table-striped">
         <tbody>
           <tr>
-            <td class="td-width">Inputs</td>
+            <td class="td-width" i18n="transaction.inputs">Inputs</td>
             <td>{{ totalInput / 100 | number: '1.2-2' }} BSQ</td>
           </tr>
           <tr>
-            <td>Outputs</td>
+            <td i18n="transaction.outputs">Outputs</td>
             <td>{{ totalOutput / 100 | number: '1.2-2' }} BSQ</td>
           </tr>
           <tr>
-            <td>Issuance</td>
+            <td i18n="asset.issued-amount|Liquid Asset issued amount">Issued amount</td>
             <td>{{ totalIssued / 100 | number: '1.2-2' }} BSQ</td>
           </tr>
         </tbody>
@@ -22,11 +22,11 @@
       <table class="table table-borderless table-striped">
         <tbody class="mobile-even">
           <tr>
-            <td class="td-width">Type</td>
+            <td class="td-width" i18n>Type</td>
             <td><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
           </tr>
           <tr>
-            <td>Version</td>
+            <td i18n="transaction.version">Version</td>
             <td>{{ tx.txVersion }}</td>
           </tr>
         </tbody>

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

@@ -1,11 +1,14 @@
 <div class="container-xl">
 
-  <h1 class="float-left mr-3 mb-md-3">Transaction</h1>
+  <h1 class="float-left mr-3 mb-md-3" i18n="shared.transaction">Transaction</h1>
 
   <ng-template [ngIf]="!isLoading && !error">
 
-    <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">{{ latestBlock.height - bisqTx.blockHeight + 1 }} confirmation<ng-container *ngIf="latestBlock.height - bisqTx.blockHeight + 1 > 1">s</ng-container></button>
-
+    <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">
+      <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
+      <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
+      <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
+    </button>
     <div>
       <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]" style="line-height: 56px;">
         <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
@@ -21,14 +24,22 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="td-width">Included in block</td>
+                <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
                 <td>
-                  <a [routerLink]="['/block/' | relativeUrl, bisqTx.blockHash]" [state]="{ data: { blockHeight: bisqTx.blockHeight } }">{{ bisqTx.blockHeight }}</a>
-                  <i> (<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since> ago)</i>
+                  {{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
+                  <div class="lg-inline">
+                    <i>(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since>)</i>
+                  </div>
                 </td>
               </tr>
               <tr>
-                <td class="td-width">Features</td>
+                <td class="td-width" i18n="transaction.included-in-block|Transaction included in block">Included in block</td>
+                <td>
+                  <a [routerLink]="['/block/' | relativeUrl, bisqTx.blockHash]" [state]="{ data: { blockHeight: bisqTx.blockHeight } }">{{ bisqTx.blockHeight }}</a>
+                </td>
+              </tr>
+              <tr>
+                <td class="td-width" i18n="transaction.features|Transaction features">Features</td>
                 <td>
                   <app-tx-features *ngIf="tx; else loadingTx" [tx]="tx"></app-tx-features>
                   <ng-template #loadingTx>
@@ -43,12 +54,12 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="td-width">Burnt</td>
+                <td class="td-width" i18n="BSQ burnt amount">Burnt amount</td>
                 <td>
                   {{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
               </tr>
               <tr>
-                <td>Fee per vByte</td>
+                <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
                 <td *ngIf="!isLoadingTx; else loadingTxFee">
                   {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB
                   &nbsp;
@@ -67,14 +78,14 @@
 
     <br>
 
-    <h2>Details</h2>
+    <h2 i18n="transaction.details">Details</h2>
 
 
     <app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
 
     <br>
 
-    <h2>Inputs & Outputs</h2>
+    <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
 
     <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
 
@@ -113,7 +124,7 @@
 
     <br>
 
-    <h2>Details</h2>
+    <h2 i18n="transaction.details">Details</h2>
     <div class="box">
       <table class="table table-borderless table-striped">
         <tbody>
@@ -134,7 +145,7 @@
 
     <br>
 
-    <h2>Inputs & Outputs</h2>
+    <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
 
     <div class="box">
       <div class="row">
@@ -155,7 +166,7 @@
     <div class="clearfix"></div>
 
     <div class="text-center">
-      Error loading transaction
+      Error loading Bisq transaction
       <br><br>
       <i>{{ error.status }}: {{ error.statusText }}</i>
     </div>

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

@@ -43,7 +43,7 @@ export class BisqTransactionComponent implements OnInit, OnDestroy {
         this.error = null;
         document.body.scrollTo(0, 0);
         this.txId = params.get('id') || '';
-        this.seoService.setTitle('Transaction: ' + this.txId, true);
+        this.seoService.setTitle($localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`);
         if (history.state.data) {
           return of(history.state.data);
         }

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

@@ -1,75 +1,28 @@
 <div class="container-xl">
-  <h1 style="float: left;">Transactions</h1>
+  <h1 style="float: left;" i18n>Transactions</h1>
 
-  <div ngbDropdown class="d-block float-right">
-    <button class="btn btn-primary" id="dropdownForm1" ngbDropdownToggle>Filter</button>
-    <div ngbDropdownMenu aria-labelledby="dropdownForm1">
-      <form [formGroup]="radioGroupForm">
-        <label>
-          <input type="checkbox" formControlName="ASSET_LISTING_FEE"> Asset listing fee
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="BLIND_VOTE"> Blind vote
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="COMPENSATION_REQUEST"> Compensation request
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="GENESIS"> Genesis
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="LOCKUP"> Lockup
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="PAY_TRADE_FEE"> Pay trade fee
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="PROOF_OF_BURN"> Proof of burn
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="PROPOSAL"> Proposal
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="REIMBURSEMENT_REQUEST"> Reimbursement request
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="TRANSFER_BSQ"> Transfer BSQ
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="UNLOCK"> Unlock
-        </label>
-        <br>
-        <label>
-          <input type="checkbox" formControlName="VOTE_REVEAL"> Vote reveal
-        </label>
-      </form>
-    </div>
+  <div class="d-block float-right">
+    <form [formGroup]="radioGroupForm">
+      <ngx-bootrap-multiselect [options]="txTypeOptions" [settings]="txTypeDropdownSettings" [texts]="txTypeDropdownTexts" formControlName="txTypes"></ngx-bootrap-multiselect>
+    </form>
   </div>
 
   <br>
 
   <div class="clearfix"></div>
 
+  <ng-container *ngIf="{ value: (transactions$ | async) } as transactions">
+
   <table class="table table-borderless table-striped">
     <thead>
-      <th style="width: 20%;">Transaction</th>
-      <th class="d-none d-md-block" style="width: 20%;">Type</th>
-      <th style="width: 20%;">Amount</th>
-      <th style="width: 20%;">Confirmed</th>
-      <th class="d-none d-md-block" style="width: 20%;">Height</th>
+      <th style="width: 20%;" i18n>Transaction</th>
+      <th class="d-none d-md-block" style="width: 100%;" i18n>Type</th>
+      <th style="width: 20%;" i18n>Amount</th>
+      <th style="width: 20%;" i18n>Confirmed</th>
+      <th class="d-none d-md-block" i18n>Height</th>
     </thead>
-    <tbody *ngIf="!isLoading; else loadingTmpl">
-      <tr *ngFor="let tx of transactions; trackBy: trackByFn">
+    <tbody *ngIf="transactions.value; else loadingTmpl">
+      <tr *ngFor="let tx of transactions.value[0]; trackBy: trackByFn">
         <td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">{{ tx.id | slice : 0 : 8 }}</a></td>
         <td class="d-none d-md-block">
           <app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon>
@@ -77,14 +30,14 @@
         </td>
         <td>
           <app-bisq-icon class="d-inline d-md-none mr-1" [txType]="tx.txType"></app-bisq-icon>
-          <ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE'" [ngIfElse]="defaultTxType">
+          <ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE' || tx.txType === 'ASSET_LISTING_FEE'" [ngIfElse]="defaultTxType">
             {{ tx.burntFee / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span>
           </ng-template>
           <ng-template #defaultTxType>
             {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span>
           </ng-template>
         </td>
-        <td><app-time-since [time]="tx.time / 1000" [fastRender]="true"></app-time-since> ago</td>
+        <td><app-time-since [time]="tx.time / 1000" [fastRender]="true"></app-time-since></td>
         <td class="d-none d-md-block"><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]" [state]="{ data: { blockHeight: tx.blockHeight } }">{{ tx.blockHeight }}</a></td>
       </tr> 
     </tbody>
@@ -92,8 +45,9 @@
 
   <br>
 
-  <ngb-pagination [size]="paginationSize" [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination *ngIf="transactions.value" [size]="paginationSize" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
+  </ng-container>
 </div>
 
 <ng-template #loadingTmpl>

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

@@ -2,3 +2,8 @@ label {
   padding: 0.25rem 1rem;
   white-space: nowrap;
 }
+
+:host ::ng-deep .dropdown-menu {
+  right: 0px;
+  left: inherit;
+}

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

@@ -1,60 +1,85 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
-import { Subject, merge } from 'rxjs';
-import { switchMap, tap, map } from 'rxjs/operators';
+
+import { merge, Observable } from 'rxjs';
+import { switchMap, map, tap, filter } from 'rxjs/operators';
 import { BisqApiService } from '../bisq-api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { FormGroup, FormBuilder } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts } from 'ngx-bootrap-multiselect';
 
 @Component({
   selector: 'app-bisq-transactions',
   templateUrl: './bisq-transactions.component.html',
-  styleUrls: ['./bisq-transactions.component.scss']
+  styleUrls: ['./bisq-transactions.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BisqTransactionsComponent implements OnInit {
-  transactions: BisqTransaction[];
-  totalCount: number;
+  transactions$: Observable<[BisqTransaction[], number]>;
   page = 1;
-  itemsPerPage: number;
-  contentSpace = window.innerHeight - (165 + 75);
+  itemsPerPage = 50;
   fiveItemsPxSize = 250;
   isLoading = true;
   loadingItems: number[];
-  pageSubject$ = new Subject<number>();
   radioGroupForm: FormGroup;
   types: string[] = [];
 
+  txTypeOptions: IMultiSelectOption[] = [
+      { id: 1, name: 'Asset listing fee' },
+      { id: 2, name: 'Blind vote' },
+      { id: 3, name: 'Compensation request' },
+      { id: 4, name: 'Genesis' },
+      { id: 13, name: 'Irregular' },
+      { id: 5, name: 'Lockup' },
+      { id: 6, name: 'Pay trade fee' },
+      { id: 7, name: 'Proof of burn' },
+      { id: 8, name: 'Proposal' },
+      { id: 9, name: 'Reimbursement request' },
+      { id: 10, name: 'Transfer BSQ' },
+      { id: 11, name: 'Unlock' },
+      { id: 12, name: 'Vote reveal' },
+  ];
+  txTypesDefaultChecked = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
+
+  txTypeDropdownSettings: IMultiSelectSettings = {
+    buttonClasses: 'btn btn-primary btn-sm',
+    displayAllSelectedText: true,
+    showCheckAll: true,
+    showUncheckAll: true,
+    maxHeight: '500px',
+    fixedTitle: true,
+  };
+
+  txTypeDropdownTexts: IMultiSelectTexts = {
+    defaultTitle: $localize`:@@bisq-transactions.filter:Filter`,
+    checkAll: $localize`:@@bisq-transactions.selectall:Select all`,
+    uncheckAll: $localize`:@@bisq-transactions.unselectall:Unselect all`,
+  };
+
   // @ts-ignore
   paginationSize: 'sm' | 'lg' = 'md';
   paginationMaxSize = 10;
 
+  txTypes = ['ASSET_LISTING_FEE', 'BLIND_VOTE', 'COMPENSATION_REQUEST', 'GENESIS', 'LOCKUP', 'PAY_TRADE_FEE',
+    'PROOF_OF_BURN', 'PROPOSAL', 'REIMBURSEMENT_REQUEST', 'TRANSFER_BSQ', 'UNLOCK', 'VOTE_REVEAL', 'IRREGULAR'];
+
   constructor(
     private bisqApiService: BisqApiService,
     private seoService: SeoService,
     private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
-    this.seoService.setTitle('Transactions', true);
+    this.seoService.setTitle($localize`:@@add4cd82e3e38a3110fe67b3c7df56e9602644ee:Transactions`);
 
     this.radioGroupForm = this.formBuilder.group({
-      UNVERIFIED: false,
-      INVALID: false,
-      GENESIS: false,
-      TRANSFER_BSQ: false,
-      PAY_TRADE_FEE: false,
-      PROPOSAL: false,
-      COMPENSATION_REQUEST: false,
-      REIMBURSEMENT_REQUEST: false,
-      BLIND_VOTE: false,
-      VOTE_REVEAL: false,
-      LOCKUP: false,
-      UNLOCK: false,
-      ASSET_LISTING_FEE: false,
-      PROOF_OF_BURN: false,
+      txTypes: [this.txTypesDefaultChecked],
     });
 
-    this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
     this.loadingItems = Array(this.itemsPerPage);
 
     if (document.body.clientWidth < 768) {
@@ -62,39 +87,70 @@ export class BisqTransactionsComponent implements OnInit {
       this.paginationMaxSize = 3;
     }
 
-    merge(
-      this.pageSubject$,
+    this.transactions$ = merge(
+      this.route.queryParams
+        .pipe(
+          filter((queryParams) => {
+            const newPage = parseInt(queryParams.page, 10);
+            const types = queryParams.types;
+            if (newPage !== this.page || types !== this.types.map((type) => this.txTypes.indexOf(type) + 1).join(',')) {
+              return true;
+            }
+            return false;
+          }),
+          tap((queryParams) => {
+            if (queryParams.page) {
+              const newPage = parseInt(queryParams.page, 10);
+              this.page = newPage;
+            } else {
+              this.page = 1;
+            }
+            if (queryParams.types) {
+              const types = queryParams.types.split(',').map((str: string) => parseInt(str, 10));
+              this.types = types.map((id: number) => this.txTypes[id - 1]);
+              this.radioGroupForm.get('txTypes').setValue(types, { emitEvent: false });
+            } else {
+              this.types = [];
+              this.radioGroupForm.get('txTypes').setValue(this.txTypesDefaultChecked, { emitEvent: false });
+            }
+            this.cd.markForCheck();
+          })
+        ),
       this.radioGroupForm.valueChanges
         .pipe(
-          map((data) => {
-            const types: string[] = [];
-            for (const i in data) {
-              if (data[i]) {
-                types.push(i);
-              }
+          tap((data) => {
+            this.types = data.txTypes.map((id: number) => this.txTypes[id - 1]);
+            if (this.types.length === this.txTypes.length) {
+              this.types = [];
             }
-            this.types = types;
-            return 1;
+            this.page = 1;
+            this.typesChanged(data.txTypes);
+            this.cd.markForCheck();
           })
-        )
+        ),
       )
       .pipe(
-        tap(() => this.isLoading = true),
-        switchMap((page) => this.bisqApiService.listTransactions$((page - 1) * this.itemsPerPage, this.itemsPerPage, this.types))
-      )
-      .subscribe((response) => {
-        this.isLoading = false;
-        this.transactions = response.body;
-        this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
-      }, (error) => {
-        console.log(error);
-      });
-
-    this.pageSubject$.next(1);
+        switchMap(() => this.bisqApiService.listTransactions$((this.page - 1) * this.itemsPerPage, this.itemsPerPage, this.types)),
+        map((response) =>  [response.body, parseInt(response.headers.get('x-total-count'), 10)])
+      );
   }
 
   pageChange(page: number) {
-    this.pageSubject$.next(page);
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { page: page },
+      queryParamsHandling: 'merge',
+    });
+    // trigger queryParams change
+    this.page = -1;
+  }
+
+  typesChanged(types: number[]) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { types: types.join(','), page: 1 },
+      queryParamsHandling: 'merge',
+    });
   }
 
   calculateTotalOutput(outputs: BisqOutput[]): number {

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

@@ -59,12 +59,16 @@
 
   <div>
     <div class="float-left mt-2-5" *ngIf="showConfirmations && tx.burntFee">
-      Burnt: {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="tx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
+      <ng-container i18n="BSQ burnt amount">Burnt amount</ng-container>: {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="tx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
     </div>
 
     <div class="float-right">
       <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
-        <button type="button" class="btn btn-sm btn-success mt-2">{{ latestBlock.height - tx.blockHeight + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.blockHeight + 1 > 1">s</ng-container></button>
+        <button type="button" class="btn btn-sm btn-success mt-2">
+          <ng-container *ngTemplateOutlet="latestBlock.height - tx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.blockHeight + 1}"></ng-container>
+          <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
+          <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
+        </button>
         &nbsp;
       </span>
       <button type="button" class="btn btn-sm btn-primary mt-2" (click)="switchCurrency()">

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { BisqRoutingModule } from './bisq.routing.module';
 import { SharedModule } from '../shared/shared.module';
+import { NgxBootstrapMultiselectModule } from 'ngx-bootrap-multiselect';
+
 import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { BisqTransactionComponent } from './bisq-transaction/bisq-transaction.component';
@@ -10,7 +12,7 @@ import { BisqTransactionDetailsComponent } from './bisq-transaction-details/bisq
 import { BisqTransfersComponent } from './bisq-transfers/bisq-transfers.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faLeaf, faQuestion, faExclamationTriangle, faRocket, faRetweet, faFileAlt, faMoneyBill,
-  faEye, faEyeSlash, faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons';
+  faEye, faEyeSlash, faLock, faLockOpen, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { BisqBlocksComponent } from './bisq-blocks/bisq-blocks.component';
 import { BisqExplorerComponent } from './bisq-explorer/bisq-explorer.component';
 import { BisqApiService } from './bisq-api.service';
@@ -38,6 +40,7 @@ import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
     SharedModule,
     NgbPaginationModule,
     FontAwesomeModule,
+    NgxBootstrapMultiselectModule,
   ],
   providers: [
     BisqApiService,
@@ -46,6 +49,7 @@ import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
 export class BisqModule {
   constructor(library: FaIconLibrary) {
     library.addIcons(faQuestion);
+    library.addIcons(faExclamationCircle);
     library.addIcons(faExclamationTriangle);
     library.addIcons(faRocket);
     library.addIcons(faRetweet);

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

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AboutComponent } from '../components/about/about.component';
-import { AddressComponent } from '../components/address/address.component';
 import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
 import { BisqTransactionComponent } from './bisq-transaction/bisq-transaction.component';
 import { BisqBlockComponent } from './bisq-block/bisq-block.component';
@@ -9,6 +8,7 @@ import { BisqBlocksComponent } from './bisq-blocks/bisq-blocks.component';
 import { BisqExplorerComponent } from './bisq-explorer/bisq-explorer.component';
 import { BisqAddressComponent } from './bisq-address/bisq-address.component';
 import { BisqStatsComponent } from './bisq-stats/bisq-stats.component';
+import { ApiDocsComponent } from '../components/api-docs/api-docs.component';
 
 const routes: Routes = [
   {
@@ -44,6 +44,10 @@ const routes: Routes = [
         path: 'about',
         component: AboutComponent,
       },
+      {
+        path: 'api',
+        component: ApiDocsComponent,
+      },
       {
         path: '**',
         redirectTo: ''

frontend/src/app/bitcoin.utils.ts

@@ -63,6 +63,68 @@ export function calcSegwitFeeGains(tx: Transaction) {
          };
 }
 
+// https://github.com/shesek/move-decimal-point
+export function moveDec(num: number, n: number) {
+  let frac, int, neg, ref;
+  if (n === 0) {
+    return num;
+  }
+  ref = ('' + num).split('.'), int = ref[0], frac = ref[1];
+  int || (int = '0');
+  frac || (frac = '0');
+  neg = (int[0] === '-' ? '-' : '');
+  if (neg) {
+    int = int.slice(1);
+  }
+  if (n > 0) {
+    if (n > frac.length) {
+      frac += zeros(n - frac.length);
+    }
+    int += frac.slice(0, n);
+    frac = frac.slice(n);
+  } else {
+    n = n * -1;
+    if (n > int.length) {
+      int = (zeros(n - int.length)) + int;
+    }
+    frac = int.slice(n * -1) + frac;
+    int = int.slice(0, n * -1);
+  }
+  while (int[0] === '0') {
+    int = int.slice(1);
+  }
+  while (frac[frac.length - 1] === '0') {
+    frac = frac.slice(0, -1);
+  }
+  return neg + (int || '0') + (frac.length ? '.' + frac : '');
+}
+
+function zeros(n) {
+  return new Array(n + 1).join('0');
+}
+
+// Formats a number for display. Treats the number as a string to avoid rounding errors.
+export const formatNumber = (s, precision = null) => {
+  let [ whole, dec ] = s.toString().split('.');
+
+  // divide numbers into groups of three separated with a thin space (U+202F, "NARROW NO-BREAK SPACE"),
+  // but only when there are more than a total of 5 non-decimal digits.
+  if (whole.length >= 5) {
+    whole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, '\u202F');
+  }
+
+  if (precision != null && precision > 0) {
+    if (dec == null) {
+      dec = '0'.repeat(precision);
+    }
+    else if (dec.length < precision) {
+      dec += '0'.repeat(precision - dec.length);
+    }
+  }
+
+  return whole + (dec != null ? '.' + dec : '');
+};
+
 // Utilities for segwitFeeGains
 const witnessSize = (vin: Vin) => vin.witness.reduce((S, w) => S + (w.length / 2), 0);
 const scriptSigSize = (vin: Vin) => vin.scriptsig ? vin.scriptsig.length / 2 : 0;

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

@@ -1,117 +1,209 @@
 <div class="container-xl">
   <div class="text-center">
-    <br />
-    <img src="./resources/mempool-tube.png" width="63" height="63" />
-    <br /><br />
+    <br>
+    <img src="./resources/mempool-logo-bigger.png" height="67.5" width="251">
+    <br>
 
-    <h2>Contributors</h2>
+    <div class="text-small text-center offset-md-1">
+      v2.0.1 ({{ gitCommit$ | async }})
+    </div>
 
-    <p>Development <a href="https://twitter.com/softsimon_">@softsimon_</a>
-    <br />Operations <a href="https://twitter.com/wiz">@wiz</a>
-    <br />Logo & theme design <a href="https://instagram.com/markjborg">@markjborg</a>
+    <br>
+
+    <h2 i18n="about.about-the-project">About the project</h2>
+    <div class="row row-cols-1">
+      <div class="col col-md-6 mx-auto">
+        <p i18n>The mempool open-source project aims to implement a high quality explorer and visualization website for the entire Bitcoin ecosystem, without distractions like altcoins, advertising, or third-party trackers.</p>
+      </div>
+    </div>
+
+    <br>
+
+    <h2 i18n="about.maintainers">Maintainers</h2>
+
+    <div class="container text-center">
+      <div class="row row-cols-2" dir="ltr">
+        <div class="col col-md-2 offset-md-4">
+          <a href="https://twitter.com/softsimon_">
+            <div class="profile_photo mx-auto" style="background-image: url(/resources/profile_softsimon.jpg)"></div>
+            @softsimon_
+          </a>
+          <br>
+          <span i18n="about.development">Development</span>
+        </div>
+        <div class="col col-md-2">
+          <a href="https://twitter.com/wiz">
+            <div class="profile_photo mx-auto" style="background-image: url(/resources/profile_wiz.png)"></div>
+            @wiz
+          </a>
+          <br>
+          <span i18n="about.operations">Operations</span>
+        </div>
+      </div>
+    </div>
 
     <br><br>
 
-    <h2>Open source</h2>
+    <h2 i18n="about.sponsors.withHeart">Sponsors ❤️</h2>
 
-    <a target="_blank" class="b2812e30 f2874b88 fw6 mb3 mt2 truncate black-80 f4 link" rel="noopener noreferrer nofollow" href="https://github.com/mempool/mempool">
-      <span class="_9e13d83d dib v-mid">
-        <svg style="height: 16px;margin-right: 8px;" viewBox="0 0 92 92" version="1.1" xmlns="http://www.w3.org/2000/svg">
-          <title>Git</title>
-          <g stroke="none" fill="#FFFFFF">
-            <path d="M90.155,41.965 L50.036,1.847 C47.726,-0.464 43.979,-0.464 41.667,1.847 L33.336,10.179 L43.904,20.747 C46.36,19.917 49.176,20.474 51.133,22.431 C53.102,24.401 53.654,27.241 52.803,29.706 L62.989,39.891 C65.454,39.041 68.295,39.59 70.264,41.562 C73.014,44.311 73.014,48.768 70.264,51.519 C67.512,54.271 63.056,54.271 60.303,51.519 C58.235,49.449 57.723,46.409 58.772,43.861 L49.272,34.362 L49.272,59.358 C49.942,59.69 50.575,60.133 51.133,60.69 C53.883,63.44 53.883,67.896 51.133,70.65 C48.383,73.399 43.924,73.399 41.176,70.65 C38.426,67.896 38.426,63.44 41.176,60.69 C41.856,60.011 42.643,59.497 43.483,59.153 L43.483,33.925 C42.643,33.582 41.858,33.072 41.176,32.389 C39.093,30.307 38.592,27.249 39.661,24.691 L29.243,14.271 L1.733,41.779 C-0.578,44.092 -0.578,47.839 1.733,50.15 L41.854,90.268 C44.164,92.578 47.91,92.578 50.223,90.268 L90.155,50.336 C92.466,48.025 92.466,44.275 90.155,41.965"></path>
-          </g>
-        </svg>
+    <div *ngIf="sponsors === null">
+      <br>
+      <div class="spinner-border text-light"></div>
+    </div>
+
+    <ng-template ngFor let-sponsor [ngForOf]="sponsors">
+      <a [href]="'https://twitter.com/' + sponsor.handle" target="_blank" rel="sponsored">
+        <div class="profile_photo d-inline-block" [title]="sponsor.handle">
+          <img class="profile_img" [src]="'/api/v1/donations/images/' + sponsor.handle" />
+        </div>
+      </a>
+    </ng-template>
+    <br><br>
+    
+    <button type="button" class="btn btn-primary" (click)="donationStatus = 2" [hidden]="donationStatus !== 1" i18n="about.become-a-sponsor">Become a sponsor ❤️</button>
+    <p *ngIf="donationStatus === 2 && !sponsorsEnabled">
+      <ng-container i18n="about.navigate-to-sponsor">Navigate to <a href="https://mempool.space/about" target="_blank">https://mempool.space/about</a> to sponsor</ng-container>
+    </p>
+
+    <div style="max-width: 300px;" class="mx-auto" [hidden]="donationStatus !== 2 || !sponsorsEnabled">
+      <form [formGroup]="donationForm" (submit)="submitDonation()" class="form">
+        <div class="input-group mb-2">
+          <div class="input-group-prepend" style="width: 42px;">
+            <span class="input-group-text">₿</span>
+          </div>
+          <input formControlName="amount" class="form-control" type="number" min="0.001" step="1E-03">
+        </div>
+        <div class="input-group" *ngIf="donationForm.get('amount').value >= 0.01; else lowAmount">
+          <div class="input-group-prepend" style="width: 42px;">
+            <span class="input-group-text">@</span>
+          </div>
+          <input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
+        </div>
+        <div class="required" *ngIf="donationForm.get('amount').hasError('required')" i18n="about.sponsor.amount-required">Amount required</div>
+        <div class="required" *ngIf="donationForm.get('amount').hasError('min')" i18n="about.sponsor.minimum-amount">Minimum amount is 0.001 BTC</div>
+        <div class="input-group mt-4">
+          <button class="btn btn-primary mx-auto" type="submit" [disabled]="donationForm.invalid" i18n="about.sponsor.request-invoice">Request invoice</button>
+        </div>
+      </form>
+    </div>
+
+    <ng-template #lowAmount>
+      <div class="input-group mb-4 text-small">
+        <span i18n="about.sponsor.description">If you donate 0.01 BTC or more, your profile photo will be added to the list of sponsors above :)</span>
+      </div>
+    </ng-template>
+
+    <div *ngIf="donationStatus === 3" class="text-center">
+
+      <form [formGroup]="paymentForm">
+        <div class="btn-group btn-group-toggle mb-2" ngbRadioGroup formControlName="method">
+          <label ngbButtonLabel class="btn-primary">
+            <input ngbButton type="radio" value="chain"> <fa-icon [icon]="['fas', 'link']" [fixedWidth]="true" title="Onchain"></fa-icon>
+          </label>
+          <label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.BTC_LightningLike">
+            <input ngbButton type="radio" value="lightning"> <fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" title="Lightning"></fa-icon>
+          </label>
+          <label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.LBTC">
+            <input ngbButton type="radio" value="lbtc"> <fa-icon [icon]="['fas', 'tint']" [fixedWidth]="true" title="Liquid Bitcoin"></fa-icon>
+          </label>
+        </div>
+      </form>
+
+      <ng-template [ngIf]="paymentForm.get('method').value === 'chain'">
+        <div class="qr-wrapper mt-2 mb-2">
+          <a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount)" target="_blank">
+            <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
+          </a>
+        </div>
+        <br>
+        <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+          <input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.BTC"></app-clipboard></button>
+          </div>
+        </div>
+        <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
+      </ng-template>
+
+      <ng-template [ngIf]="paymentForm.get('method').value === 'lightning'">
+        <div class="qr-wrapper mt-2 mb-2">
+          <a [href]="bypassSecurityTrustUrl('lightning:' + donationObj.addresses.BTC_LightningLike)" target="_blank">
+            <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
+          </a>
+        </div>
+        <br>
+
+        <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+          <input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC_LightningLike">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="donationObj.addresses.BTC_LightningLike"></app-clipboard></button>
+          </div>
+        </div>
+
+        <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+          <input type="text" class="form-control" readonly value="0334ac407769a00334afac4231a6e4c0faa31328b67b42c0c59e722e083ed5e6cf@103.99.170.180:9735">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="'0334ac407769a00334afac4231a6e4c0faa31328b67b42c0c59e722e083ed5e6cf@103.99.170.180:9735'"></app-clipboard></button>
+          </div>
+        </div>
+
+        <p style="font-size: 10px;"></p>
+        <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
+      </ng-template>
+
+      <ng-template [ngIf]="paymentForm.get('method').value === 'lbtc'">
+        <div class="qr-wrapper mt-2 mb-2">
+          <a [href]="bypassSecurityTrustUrl('liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d')" target="_blank">
+            <app-qrcode imageUrl="./resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></app-qrcode>
+          </a>
+        </div>
+        <br>
+        <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
+          <input type="text" class="form-control" readonly [value]="donationObj.addresses.LBTC">
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.LBTC"></app-clipboard></button>
+          </div>
+        </div>
+        <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
+      </ng-template>
+
+      <p i18n="about.sponsor.waiting-for-transaction">Waiting for transaction... </p>
+      <div class="spinner-border text-light"></div>
+    </div>
+
+    <div *ngIf="donationStatus === 4" class="text-center">
+      <h2><span i18n="about.sponsor.donation-confirmed">Donation confirmed!</span><br><span i18n="about.sponsor.thank-you">Thank you!</span></h2>
+      <p i18n="about.sponsor.sponsor-completed">If you specified a Twitter handle, the profile photo should now be visible on this page when you reload.</p>
+    </div>
+
+    <br><br><br><br>
+
+    <a target="_blank" class="m-2 fw6 mb3 mt2 truncate black-80 f4 link" href="https://github.com/mempool/mempool">
+      <span class="dib v-mid">
+        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-3x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
       </span>
-      <span>github.com/mempool/mempool</span></a>
+    </a>
+
+    <a target="_blank" class="m-2 fw6 mb3 mt2 truncate black-80 f4 link" href="https://twitter.com/mempoolspace">
+      <span class="dib v-mid">
+        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16 fa-3x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
+      </span>
+    </a>
+
+    <a target="_blank" class="m-2 fw6 mb3 mt2 truncate black-80 f4 link" href="https://keybase.io/team/mempool">
+      <span class="dib v-mid">
+        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="keybase" class="svg-inline--fa fa-keybase fa-w-14 fa-3x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M286.17 419a18 18 0 1 0 18 18 18 18 0 0 0-18-18zm111.92-147.6c-9.5-14.62-39.37-52.45-87.26-73.71q-9.1-4.06-18.38-7.27a78.43 78.43 0 0 0-47.88-104.13c-12.41-4.1-23.33-6-32.41-5.77-.6-2-1.89-11 9.4-35L198.66 32l-5.48 7.56c-8.69 12.06-16.92 23.55-24.34 34.89a51 51 0 0 0-8.29-1.25c-41.53-2.45-39-2.33-41.06-2.33-50.61 0-50.75 52.12-50.75 45.88l-2.36 36.68c-1.61 27 19.75 50.21 47.63 51.85l8.93.54a214 214 0 0 0-46.29 35.54C14 304.66 14 374 14 429.77v33.64l23.32-29.8a148.6 148.6 0 0 0 14.56 37.56c5.78 10.13 14.87 9.45 19.64 7.33 4.21-1.87 10-6.92 3.75-20.11a178.29 178.29 0 0 1-15.76-53.13l46.82-59.83-24.66 74.11c58.23-42.4 157.38-61.76 236.25-38.59 34.2 10.05 67.45.69 84.74-23.84.72-1 1.2-2.16 1.85-3.22a156.09 156.09 0 0 1 2.8 28.43c0 23.3-3.69 52.93-14.88 81.64-2.52 6.46 1.76 14.5 8.6 15.74 7.42 1.57 15.33-3.1 18.37-11.15C429 443 434 414 434 382.32c0-38.58-13-77.46-35.91-110.92zM142.37 128.58l-15.7-.93-1.39 21.79 13.13.78a93 93 0 0 0 .32 19.57l-22.38-1.34a12.28 12.28 0 0 1-11.76-12.79L107 119c1-12.17 13.87-11.27 13.26-11.32l29.11 1.73a144.35 144.35 0 0 0-7 19.17zm148.42 172.18a10.51 10.51 0 0 1-14.35-1.39l-9.68-11.49-34.42 27a8.09 8.09 0 0 1-11.13-1.08l-15.78-18.64a7.38 7.38 0 0 1 1.34-10.34l34.57-27.18-14.14-16.74-17.09 13.45a7.75 7.75 0 0 1-10.59-1s-3.72-4.42-3.8-4.53a7.38 7.38 0 0 1 1.37-10.34L214 225.19s-18.51-22-18.6-22.14a9.56 9.56 0 0 1 1.74-13.42 10.38 10.38 0 0 1 14.3 1.37l81.09 96.32a9.58 9.58 0 0 1-1.74 13.44zM187.44 419a18 18 0 1 0 18 18 18 18 0 0 0-18-18z"></path></svg>
+      </span>
+    </a>
+
+    <br>
+
   </div>
 
   <br><br>
 
   <div class="text-center">
-    <h2>API</h2>
+    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
   </div>
 
-  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
-    <li [ngbNavItem]="1">
-      <a ngbNavLink>Mainnet</a>
-      <ng-template ngbNavContent>
-
-        <table class="table">
-          <tr>
-            <th style="border-top: 0;">Endpoint</th>
-            <th style="border-top: 0;">Description</th>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/api/v1/fees/recommended" target="_blank">GET /api/v1/fees/recommended</a></td>
-            <td>Recommended fees</td>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/api/v1/fees/mempool-blocks" target="_blank">GET /api/v1/fees/mempool-blocks</a></td>
-            <td>The current mempool blocks</td>
-          </tr>
-          <tr>
-            <td class="nowrap">wss://{{ hostname }}/api/v1/ws</td>
-            <td>
-              <span class="text-small">
-                Default push: <span class="code">{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</span>
-                to express what you want pushed. Available: 'blocks', 'mempool-blocks', 'live-2h-chart' and 'stats'.
-              </span>
-              <br><br>
-              <span class="text-small">
-                Push transactions related to address: <span class="code">{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</span>
-                to receive all new transactions containing that address as input or output. Returns an array of transactions. 'address-transactions' for new mempool transactions and 'block-transactions' for new block confirmed transactions.
-              </span>
-            </td>
-          </tr>
-        </table>
-
-      </ng-template>
-    </li>
-    <li [ngbNavItem]="2">
-      <a ngbNavLink>Bisq</a>
-      <ng-template ngbNavContent>
-        
-        <table class="table">
-          <tr>
-            <th style="border-top: 0;">Endpoint</th>
-            <th style="border-top: 0;">Description</th>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/bisq/api/stats" target="_blank">GET /bisq/api/stats</a></td>
-            <td>Stats</td>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/bisq/api/tx/4b5417ec5ab6112bedf539c3b4f5a806ed539542d8b717e1c4470aa3180edce5" target="_blank">GET /bisq/api/tx/:txId</a></td>
-            <td>Transaction</td>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/bisq/api/txs/0/25" target="_blank">GET /bisq/api/txs/:index/:length</a></td>
-            <td>Transactions</td>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/bisq/api/block/000000000000000000079aa6bfa46eb8fc20474e8673d6e8a123b211236bf82d" target="_blank">GET /bisq/api/block/:hash</a></td>
-            <td>Block</td>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/bisq/api/blocks/0/25" target="_blank">GET /bisq/api/blocks/:index/:length</a></td>
-            <td>Blocks</td>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/bisq/api/blocks/tip/height" target="_blank">GET /bisq/api/blocks/tip/height</a></td>
-            <td>Latest block height</td>
-          </tr>
-          <tr>
-            <td class="nowrap"><a href="/bisq/api/address/B1DgwRN92rdQ9xpEVCdXRfgeqGw9X4YtrZz" target="_blank">GET /bisq/api/address/:address</a></td>
-            <td>Address</td>
-          </tr>
-        </table>
-      </ng-template>
-    </li>
-  </ul>
-
-  <div [ngbNavOutlet]="nav" class="mt-2"></div>
-
-  <br> <br>
-
 </div>

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

@@ -1,16 +1,35 @@
+.qr-wrapper {
+  background-color: #FFF;
+  padding: 10px;
+  display: inline-block;
+  padding-bottom: 5px;
+}
+
+.profile_photo {
+  width: 80px;
+  height: 80px;
+  background-size: 100%, 100%;
+  border-radius: 50%;
+  margin: 10px;
+}
+
+.profile_img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 0;
+}
+
 .text-small {
   font-size: 12px;
 }
 
-.code {
-  background-color: #1d1f31;
-  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
+.info-group {
+  max-width: 400px;
 }
 
-tr {
-  white-space: inherit;
-}
 
-.nowrap {
-  white-space: nowrap;
-}
+.required {
+  color: #FF0000;
+  font-weight: bold;
+}

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

@@ -2,31 +2,75 @@ import { Component, OnInit } from '@angular/core';
 import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
+import { Observable } from 'rxjs';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ApiService } from 'src/app/services/api.service';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.scss']
+  styleUrls: ['./about.component.scss'],
 })
 export class AboutComponent implements OnInit {
-  active = 1;
-  hostname = document.location.hostname;
-
+  gitCommit$: Observable<string>;
+  donationForm: FormGroup;
+  paymentForm: FormGroup;
+  donationStatus = 1;
+  sponsors$: Observable<any>;
+  donationObj: any;
+  sponsorsEnabled = this.stateService.env.SPONSORS_ENABLED;
+  sponsors = null;
 
   constructor(
     private websocketService: WebsocketService,
     private seoService: SeoService,
     private stateService: StateService,
+    private formBuilder: FormBuilder,
+    private apiService: ApiService,
+    private sanitizer: DomSanitizer,
   ) { }
 
   ngOnInit() {
-    this.seoService.setTitle('Contributors');
+    this.gitCommit$ = this.stateService.gitCommit$.pipe(map((str) => str.substr(0, 8)));
+    this.seoService.setTitle($localize`:@@004b222ff9ef9dd4771b777950ca1d0e4cd4348a:About`);
     this.websocketService.want(['blocks']);
-    if (this.stateService.network === 'bisq') {
-      this.active = 2;
-    }
-    if (document.location.port !== '') {
-      this.hostname = this.hostname + ':' + document.location.port;
+
+    this.donationForm = this.formBuilder.group({
+      amount: [0.01, [Validators.min(0.001), Validators.required]],
+      handle: [''],
+    });
+
+    this.paymentForm = this.formBuilder.group({
+      'method': 'chain'
+    });
+
+    this.apiService.getDonation$()
+      .subscribe((sponsors) => {
+        this.sponsors = sponsors;
+      });
+
+    this.apiService.getDonation$()
+    this.stateService.donationConfirmed$.subscribe(() => this.donationStatus = 4);
+  }
+
+  submitDonation() {
+    if (this.donationForm.invalid) {
+      return;
     }
+    this.apiService.requestDonation$(
+      this.donationForm.get('amount').value,
+      this.donationForm.get('handle').value
+    )
+    .subscribe((response) => {
+      this.websocketService.trackDonation(response.id);
+      this.donationObj = response;
+      this.donationStatus = 3;
+    });
+  }
+
+  bypassSecurityTrustUrl(text: string): SafeUrl {
+    return this.sanitizer.bypassSecurityTrustUrl(text);
   }
 }

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

@@ -1,2 +1,2 @@
-<span *ngIf="multisig" class="badge badge-pill badge-warning">multisig {{ multisigM }} of {{ multisigN }}</span>
-<span *ngIf="secondLayerClose" class="badge badge-pill badge-warning">Layer{{ network === 'liquid' ? '3' : '2' }} Peg-out</span>
+<span *ngIf="multisig" class="badge badge-pill badge-warning" i18n="address-labels.multisig">multisig {{ multisigM }} of {{ multisigN }}</span>
+<span *ngIf="secondLayerClose" class="badge badge-pill badge-warning" i18n="address-labels.upper-layer-peg-out">Layer{{ network === 'liquid' ? '3' : '2' }} Peg-out</span>

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

@@ -1,5 +1,5 @@
 <div class="container-xl">
-  <h1 style="float: left;">Address</h1>
+  <h1 class="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>
@@ -17,16 +17,16 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td>Total received</td>
-                <td><app-amount [satoshis]="receieved" [noFiat]="true"></app-amount></td>
+                <td i18n="address.total-received">Total received</td>
+                <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="receieved" [noFiat]="true"></app-amount></td>
               </tr>
               <tr>
-                <td>Total sent</td>
-                <td><app-amount [satoshis]="sent" [noFiat]="true"></app-amount></td>
+                <td i18n="address.total-sent">Total sent</td>
+                <td *ngIf="address.chain_stats.spent_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="sent" [noFiat]="true"></app-amount></td>
               </tr>
               <tr>
-                <td>Balance</td>
-                <td><app-amount [satoshis]="receieved - sent" [noFiat]="true"></app-amount> (<app-fiat [value]="receieved - sent"></app-fiat>)</td>
+                <td i18n="address.balance">Balance</td>
+                <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="receieved - sent" [noFiat]="true"></app-amount> (<app-fiat [value]="receieved - sent"></app-fiat>)</td>
               </tr>
             </tbody>
           </table>
@@ -43,7 +43,11 @@
 
     <br>
 
-    <h2><ng-template [ngIf]="transactions?.length">{{ (transactions?.length | number) || '?' }} of </ng-template>{{ txCount | number }} transactions</h2>
+    <h2>
+      <ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
+      <ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
+      <ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
+    </h2>
 
     <app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
 
@@ -63,6 +67,14 @@
             </div>
           </div>
         </div>
+
+        <ng-container *ngIf="addressLoadingStatus$ | async as addressLoadingStatus">
+          <br>
+          <div  class="progress position-relative progress-dark">
+            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': addressLoadingStatus + '%' }"></div>
+          </div>
+        </ng-container>
+
       </ng-template>
     </div>
 
@@ -98,12 +110,24 @@
 
   <ng-template [ngIf]="error">
     <div class="text-center">
-      Error loading address data.
+      <span i18n="address.error.loading-address-data">Error loading address data.</span>
       <br>
       <i>{{ error.error }}</i>
+      <ng-template [ngIf]="error.status === 413 || error.status === 405">
+        <br><br>
+        Consider view this address on the official Mempool website instead:
+        <br>
+        <a href="https://mempool.space/address/{{ addressString }}" target="_blank">https://mempool.space/address/{{ addressString }}</a>
+        <br>
+        <a href="http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/address/{{ addressString }}" target="_blank">http://mempoolhqx4isw62xs7abwphsq7ldayuidyx2v2oethdhhj6mlo2r6ad.onion/address/{{ addressString }}</a>
+      </ng-template>
     </div>
   </ng-template>
 
 </div>
 
-<br>
+<br>
+
+<ng-template #confidentialTd>
+  <td i18n="shared.confidential">Confidential</td>
+</ng-template>

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

@@ -1,13 +1,13 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
-import { switchMap, filter, catchError } from 'rxjs/operators';
+import { switchMap, filter, catchError, map, tap } from 'rxjs/operators';
 import { Address, Transaction } from '../../interfaces/electrs.interface';
 import { WebsocketService } from 'src/app/services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
 import { AudioService } from 'src/app/services/audio.service';
 import { ApiService } from 'src/app/services/api.service';
-import { of, merge, Subscription } from 'rxjs';
+import { of, merge, Subscription, Observable } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
 
 @Component({
@@ -25,6 +25,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   isLoadingTransactions = true;
   error: any;
   mainSubscription: Subscription;
+  addressLoadingStatus$: Observable<number>;
 
   totalConfirmedTxCount = 0;
   loadedConfirmedTxCount = 0;
@@ -48,7 +49,13 @@ export class AddressComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
-    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
+    this.websocketService.want(['blocks']);
+
+    this.addressLoadingStatus$ = this.route.paramMap
+      .pipe(
+        switchMap(() => this.stateService.loadingIndicators$),
+        map((indicators) => indicators['address-' + this.addressString] !== undefined ? indicators['address-' + this.addressString] : 0)
+      );
 
     this.mainSubscription = this.route.paramMap
       .pipe(
@@ -61,7 +68,7 @@ export class AddressComponent implements OnInit, OnDestroy {
           this.transactions = null;
           document.body.scrollTo(0, 0);
           this.addressString = params.get('id') || '';
-          this.seoService.setTitle('Address: ' + this.addressString, true);
+          this.seoService.setTitle($localize`:@@address.component.browser-title:Address: ${this.addressString}:INTERPOLATION:`);
 
           return merge(
             of(true),

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

@@ -2,11 +2,11 @@
   <span>{{ conversions.USD * (satoshis / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span>
 </ng-container>
 <ng-template #viewFiatVin>
-  <ng-template [ngIf]="network === 'liquid' && satoshis === undefined" [ngIfElse]="default">
-    Confidential
+  <ng-template [ngIf]="network === 'liquid' && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
+    <span i18n="shared.confidential">Confidential</span>
   </ng-template>
   <ng-template #default>
-    {{ satoshis / 100000000 | number : digitsInfo }}
+    &lrm;{{ satoshis / 100000000 | number : digitsInfo }}
     <ng-template [ngIf]="network === 'liquid'">L-</ng-template>
     <ng-template [ngIf]="network === 'testnet'">t</ng-template>BTC
   </ng-template>

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

@@ -0,0 +1,288 @@
+<ng-container *ngIf="{ val: network$ | async } as network">
+<div class="container-xl">
+  <div class="text-center">
+    <h2>{{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API Service</ng-container></h2>
+  </div>
+
+  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="0">
+      <a ngbNavLink i18n="api-docs.tab.websocket|API Docs tab for Websocket">Websocket</a>
+      <ng-template ngbNavContent>
+
+        <table class="table">
+          <tr>
+            <th style="border-top: 0;" i18n="api-docs.shared.endpoint|API Docs Endpoint">Endpoint</th>
+            <th style="border-top: 0;" i18n="api-docs.shared.description|API Docs Description">Description</th>
+          </tr>
+          <tr>
+            <td class="nowrap">wss://{{ hostname }}{{ network.val === '' ? '' : '/' + network.val }}/api/v1/ws</td>
+            <td i18n="api-docs.websocket.websocket">Default push: <code>{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</code> to express what you want pushed. Available: <code>blocks</code>, <code>mempool-block</code>, <code>live-2h-chart</code>, and <code>stats</code>.<br><br>Push transactions related to address: <code>{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</code> to receive all new transactions containing that address as input or output. Returns an array of transactions. <code>address-transactions</code> for new mempool transactions, and <code>block-transactions</code> for new block confirmed transactions.</td>
+          </tr>
+        </table>
+
+      </ng-template>
+    </li>
+
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="1">
+      <a ngbNavLink i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</a>
+      <ng-template ngbNavContent>
+
+        <table class="table">
+          <tr>
+            <th style="border-top: 0;" i18n="api-docs.shared.endpoint|API Docs Endpoint">Endpoint</th>
+            <th style="border-top: 0;" i18n="api-docs.shared.description|API Docs Description">Description</th>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended</a></td>
+            <td i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks</a></td>
+            <td i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</td>
+          </tr>
+        </table>
+
+      </ng-template>
+    </li>
+
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="2">
+      <a ngbNavLink i18n="api-docs.tab.mempool|API Docs tab for Mempool">Mempool</a>
+      <ng-template ngbNavContent>
+
+        <table class="table">
+          <tr>
+            <th style="border-top: 0;" i18n="api-docs.shared.endpoint|API Docs Endpoint">Endpoint</th>
+            <th style="border-top: 0;" i18n="api-docs.shared.description|API Docs Description">Description</th>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/mempool" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/mempool</a></td>
+            <td i18n="api-docs.mempool.mempool|API Docs for /api/mempool">Returns current mempool backlog statistics.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/mempool/txids" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/mempool/txids</a></td>
+            <td i18n="api-docs.mempool.txids|API Docs for /api/mempool/txids">Get the full list of txids in the mempool as an array. The order of the txids is arbitrary and does not match bitcoind.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/mempool/recent" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/mempool/recent</a></td>
+            <td i18n="api-docs.mempool.recent|API Docs for /api/mempool/recent">Get a list of the last 10 transactions to enter the mempool. Each transaction object contains simplified overview data, with the following fields: <code>txid</code>, <code>fee</code>, <code>vsize</code>, and <code>value</code>.</td>
+          </tr>
+        </table>
+
+      </ng-template>
+    </li>
+
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="3">
+      <a ngbNavLink i18n="api-docs.tab.blocks|API Docs tab for Blocks">Blocks</a>
+      <ng-template ngbNavContent>
+
+        <table class="table">
+          <tr>
+            <th style="border-top: 0;" i18n="api-docs.shared.endpoint|API Docs Endpoint">Endpoint</th>
+            <th style="border-top: 0;" i18n="api-docs.shared.description|API Docs Description">Description</th>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash</a></td>
+            <td i18n>Returns details about a block. Available fields: <code>id</code>, <code>height</code>, <code>version</code>, <code>timestamp</code>, <code>bits</code>, <code>nonce</code>, <code>merkle_root</code>, <code>tx_count</code>, <code>size</code>, <code>weight</code>,<ng-container *ngIf="network.val === 'liquid'"> <code>proof</code>,</ng-container> and <code>previousblockhash</code>.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/status" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/status</a></td>
+            <td i18n>Returns the confirmation status of a block. Available fields: <code>in_best_chain</code> (boolean, false for orphaned blocks), <code>next_best</code> (the hash of the next block, only available for blocks in the best chain).</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/txs" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/txs[/:start_index]</a></td>
+            <td i18n>Returns a list of transactions in the block (up to 25 transactions beginning at <code>start_index</code>). Transactions returned here do not have the <code>status</code> field, since all the transactions share the same block and confirmation status.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/txids" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/txids</a></td>
+            <td i18n>Returns a list of all txids in the block.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/txid/218" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/txid/:index</a></td>
+            <td i18n>Returns the transaction at index <code>:index</code> within the specified block.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/raw" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/txid/raw</a></td>
+            <td i18n>Returns the raw block representation in binary.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block-height/0" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block-height/:height</a></td>
+            <td i18n>Returns the hash of the block currently at <code>:height</code>.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/blocks" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/blocks[/:start_height]</a></td>
+            <td i18n>Returns the 10 newest blocks starting at the tip or at <code>:start_height</code> if specified.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/blocks/tip/height" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/blocks/tip/height</a></td>
+            <td i18n>Returns the height of the last block.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/blocks/tip/hash" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/blocks/tip/hash</a></td>
+            <td i18n>Returns the hash of the last block.</td>
+          </tr>
+        </table>
+
+      </ng-template>
+    </li>
+
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="4">
+      <a ngbNavLink i18n="api-docs.tab.transactions|API Docs tab for Transactions">Transactions</a>
+      <ng-template ngbNavContent>
+
+        <table class="table">
+          <tr>
+            <th style="border-top: 0;" i18n="api-docs.shared.endpoint|API Docs Endpoint">Endpoint</th>
+            <th style="border-top: 0;" i18n="api-docs.shared.description|API Docs Description">Description</th>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid</a></td>
+            <td i18n>Returns details about a transaction. Available fields: <code>txid</code>, <code>version</code>, <code>locktime</code>, <code>size</code>, <code>weight</code>, <code>fee</code>, <code>vin</code>, <code>vout</code>, and <code>status</code>.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/status" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/status</a></td>
+            <td i18n>Returns the confirmation status of a transaction. Available fields: <code>confirmed</code> (boolean), <code>block_height</code> (optional), and <code>block_hash</code> (optional).</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/hex" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/hex</a></td>
+            <td i18n>Returns a transaction serialized as hex.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/raw" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/raw</a></td>
+            <td i18n>Returns a transaction as binary data.</td>
+          </tr>
+          <tr *ngIf="network.val !== 'liquid'">
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/merkleblock-proof" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/merkleblock-proof</a></td>
+            <td i18n>Returns a merkle inclusion proof for the transaction using <a href="https://bitcoin.org/en/glossary/merkle-block">bitcoind's merkleblock</a> format.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/merkle-proof" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/merkle-proof</a></td>
+            <td i18n>Returns a merkle inclusion proof for the transaction using <a href="https://electrumx.readthedocs.io/en/latest/protocol-methods.html#blockchain-transaction-get-merkle">Electrum's blockchain.transaction.get_merkle format.</a></td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/outspend/3" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/outspend/:vout</a></td>
+            <td i18n>Returns the spending status of a transaction output. Available fields: <code>spent</code> (boolean), <code>txid</code> (optional), <code>vin</code> (optional), and <code>status</code> (optional, the status of the spending tx).</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/outspends" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/outspends</a></td>
+            <td i18n>Returns the spending status of all transaction outputs.</td>
+          </tr>
+          <tr>
+            <td class="nowrap">POST {{ network.val === '' ? '' : '/' + network.val }}/api/tx</td>
+            <td i18n>Broadcast a raw transaction to the network. The transaction should be provided as hex in the request body. The <code>txid</code> will be returned on success.</td>
+          </tr>
+        </table>
+
+      </ng-template>
+    </li>
+
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="5">
+      <a ngbNavLink i18n="api-docs.tab.addresses|API Docs tab for Addresses">Addresses</a>
+      <ng-template ngbNavContent>
+
+        <table class="table">
+          <tr>
+            <th style="border-top: 0;" i18n="api-docs.shared.endpoint|API Docs Endpoint">Endpoint</th>
+            <th style="border-top: 0;" i18n="api-docs.shared.description|API Docs Description">Description</th>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address</a></td>
+            <td i18n>Returns details about an address. Available fields: <code>address</code>, <code>chain_stats</code>, and <code>mempool_stats</code>. {{ '{' }}chain,mempool{{ '}' }}_stats each contain an object with <code>tx_count</code>, <code>funded_txo_count</code>, <code>funded_txo_sum</code>, <code>spent_txo_count</code>, and <code>spent_txo_sum</code>.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC/txs" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address/txs</a></td>
+            <td i18n>Get transaction history for the specified address/scripthash, sorted with newest first. Returns up to 50 mempool transactions plus the first 25 confirmed transactions. You can request more confirmed transactions using <code>:last_seen_txid</code> (see below).
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC/txs/chain" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address/txs/chain</a></td>
+            <td i18n>Get confirmed transaction history for the specified address/scripthash, sorted with newest first. Returns 25 transactions per page. More can be requested by specifying the last txid seen by the previous query.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC/txs/mempool" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address/txs/mempool</a></td>
+            <td i18n>Get unconfirmed transaction history for the specified address/scripthash. Returns up to 50 transactions (no paging).</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC/utxo" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address/utxo</a></td>
+            <td i18n>Get the list of unspent transaction outputs associated with the address/scripthash. Available fields: <code>txid</code>, <code>vout</code>, <code>value</code>, and <code>status</code> (with the status of the funding tx).<ng-container *ngIf="network.val === 'liquid'">There is also a <code>valuecommitment</code> field that may appear in place of <code>value</code>, plus the following additional fields: <code>asset</code>/<code>assetcommitment</code>, <code>nonce</code>/<code>noncecommitment</code>, <code>surjection_proof</code>, and <code>range_proof</code>.</ng-container></td>
+          </tr>
+        </table>
+
+      </ng-template>
+    </li>
+
+    <li *ngIf="network.val === 'liquid'" [ngbNavItem]="6">
+      <a ngbNavLink i18n="api-docs.tab.assets|API Docs tab for Assets">Assets</a>
+      <ng-template ngbNavContent>
+
+        <table class="table">
+          <tr>
+            <th style="border-top: 0;" i18n="api-docs.shared.endpoint|API Docs Endpoint">Endpoint</th>
+            <th style="border-top: 0;" i18n="api-docs.shared.description|API Docs Description">Description</th>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/liquid/api/asset/6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d" target="_blank">GET /liquid/api/asset/:asset_id</a></td>
+            <td i18n>Returns information about a Liquid asset.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/liquid/api/asset/4b5417ec5ab6112bedf539c3b4f5a806ed539542d8b717e1c4470aa3180edce5/txs" target="_blank">GET /liquid/api/asset/:asset_id/txs[/mempool|/chain]</a></td>
+            <td i18n>Returns transactions associated with the specified Liquid asset. For the network's native asset, returns a list of peg in, peg out, and burn transactions. For user-issued assets, returns a list of issuance, reissuance, and burn transactions. Does not include regular transactions transferring this asset.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/liquid/api/asset/4b5417ec5ab6112bedf539c3b4f5a806ed539542d8b717e1c4470aa3180edce5/supply" target="_blank">GET /liquid/api/asset/:asset_id/supply[/decimal]</a></td>
+            <td i18n>Get the current total supply of the specified asset. For the native asset (L-BTC), this is calculated as [chain,mempool]_stats.peg_in_amount - [chain,mempool]_stats.peg_out_amount - [chain,mempool]_stats.burned_amount. For issued assets, this is calculated as [chain,mempool]_stats.issued_amount - [chain,mempool]_stats.burned_amount. Not available for assets with blinded issuances. If /decimal is specified, returns the supply as a decimal according to the asset's divisibility. Otherwise, returned in base units.</td>
+          </tr>
+        </table>
+      </ng-template>
+    </li>
+
+    <li *ngIf="network.val === 'bisq'" [ngbNavItem]="1">
+      <a ngbNavLink i18n="api-docs.tab.bsq|API Docs tab for BSQ">BSQ</a>
+      <ng-template ngbNavContent>
+
+        <table class="table">
+          <tr>
+            <th style="border-top: 0;" i18n="api-docs.shared.endpoint|API Docs Endpoint">Endpoint</th>
+            <th style="border-top: 0;" i18n="api-docs.shared.description|API Docs Description">Description</th>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/bisq/api/stats" target="_blank">GET /bisq/api/stats</a></td>
+            <td i18n>Returns statistics about all Bisq transactions.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/bisq/api/tx/4b5417ec5ab6112bedf539c3b4f5a806ed539542d8b717e1c4470aa3180edce5" target="_blank">GET /bisq/api/tx/:txid</a></td>
+            <td i18n>Returns details about a Bisq transaction.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/bisq/api/txs/0/25" target="_blank">GET /bisq/api/txs/:index/:length</a></td>
+            <td i18n>Returns :length of latest Bisq transactions, starting from :index.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/bisq/api/block/000000000000000000079aa6bfa46eb8fc20474e8673d6e8a123b211236bf82d" target="_blank">GET /bisq/api/block/:hash</a></td>
+            <td i18n>Returns all Bisq transactions that exist in a Bitcoin block.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/bisq/api/blocks/0/25" target="_blank">GET /bisq/api/blocks/:index/:length</a></td>
+            <td i18n>Returns :length Bitcoin blocks that contain Bisq transactions, starting from :index.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/bisq/api/blocks/tip/height" target="_blank">GET /bisq/api/blocks/tip/height</a></td>
+            <td i18n>Returns the most recently processed Bitcoin block height processed by Bisq.</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/bisq/api/address/B1DgwRN92rdQ9xpEVCdXRfgeqGw9X4YtrZz" target="_blank">GET /bisq/api/address/:address</a></td>
+            <td i18n>Returns all Bisq transactions belonging to a Bitcoin address, with 'B' prefixed in front of the address.</td>
+          </tr>
+        </table>
+      </ng-template>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+
+  <br>
+
+  <div class="text-center">
+    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+  </div>
+
+</div>
+</ng-container>

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

@@ -0,0 +1,16 @@
+.text-small {
+  font-size: 12px;
+}
+
+code {
+  background-color: #1d1f31;
+  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
+}
+
+tr {
+  white-space: inherit;
+}
+
+.nowrap {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { StateService } from 'src/app/services/state.service';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { Observable, merge, of } from 'rxjs';
+import { SeoService } from 'src/app/services/seo.service';
+
+@Component({
+  selector: 'app-api-docs',
+  templateUrl: './api-docs.component.html',
+  styleUrls: ['./api-docs.component.scss']
+})
+export class ApiDocsComponent implements OnInit {
+  hostname = document.location.hostname;
+  network$: Observable<string>;
+  active = 1;
+
+  constructor(
+    private stateService: StateService,
+    private websocketService: WebsocketService,
+    private seoService: SeoService,
+  ) { }
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);
+    this.network$ = merge(of(''), this.stateService.networkChanged$);
+    this.websocketService.want(['blocks']);
+
+    if (document.location.port !== '') {
+      this.hostname = this.hostname + ':' + document.location.port;
+    }
+  }
+
+}

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

@@ -1,4 +1,5 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { Component, HostListener, OnInit, Inject, LOCALE_ID, HostBinding } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
@@ -15,7 +16,17 @@ export class AppComponent implements OnInit {
     public router: Router,
     private websocketService: WebsocketService,
     private stateService: StateService,
-  ) { }
+    private location: Location,
+    @Inject(LOCALE_ID) private locale: string,
+  ) {
+    if (this.locale.startsWith('ar') || this.locale.startsWith('fa')) {
+      this.dir = 'rtl';
+      this.class = 'rtl-layout';
+    }
+  }
+
+  @HostBinding('attr.dir') dir = 'ltr';
+  @HostBinding('class') class;
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvents(event: KeyboardEvent) {
@@ -28,7 +39,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.router.events.subscribe((val) => {
       if (val instanceof NavigationEnd) {
-        this.link.setAttribute('href', 'https://mempool.space' + (location.pathname === '/' ? '' : location.pathname));
+        this.link.setAttribute('href', 'https://mempool.space' + (this.location.path() === '/' ? '' : this.location.path()));
       }
     });
   }

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

@@ -17,19 +17,19 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td>Name</td>
+                <td i18n="asset.name|Liquid Asset name">Name</td>
                 <td>{{ assetContract[2] }} ({{ assetContract[1] }})</td>
               </tr>
               <tr>
-                <td>Precision</td>
+                <td i18n="asset.precision|Liquid Asset precision">Precision</td>
                 <td>{{ assetContract[3] }}</td>
               </tr>
-              <tr *ngIf="!isNativeAsset">
-                <td>Issuer</td>
+              <tr *ngIf="!isNativeAsset && assetContract[0]">
+                <td i18n="asset.issuer|Liquid Asset issuer">Issuer</td>
                 <td><a target="_blank" href="{{ 'http://' + assetContract[0] }}">{{ assetContract[0] }}</a></td>
               </tr>
               <tr *ngIf="!isNativeAsset">
-                <td>Issuance tx</td>
+                <td i18n="asset.issuance-tx|Liquid Asset issuance TX">Issuance TX</td>
                 <td><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></td>
               </tr>
             </tbody>
@@ -40,28 +40,28 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr *ngIf="isNativeAsset">
-                <td>Pegged in</td>
-                <td>{{ asset.chain_stats.peg_in_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td i18n="asset.pegged-in|Liquid Asset pegged-in amount">Pegged in</td>
+                <td>{{ formatAmount(asset.chain_stats.peg_in_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr *ngIf="isNativeAsset">
-                <td>Pegged out</td>
-                <td>{{ asset.chain_stats.peg_out_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td i18n="asset.pegged-out|Liquid Asset pegged-out amount">Pegged out</td>
+                <td>{{ formatAmount(asset.chain_stats.peg_out_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr *ngIf="!isNativeAsset">
-                <td>Issued amount</td>
-                <td>{{ asset.chain_stats.issued_amount | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td i18n="asset.issued-amount|Liquid Asset issued amount">Issued amount</td>
+                <td *ngIf="!blindedIssuance; else confidentialTd">{{ formatAmount(asset.chain_stats.issued_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr>
-                <td>Burned amount</td>
-                <td>{{ asset.chain_stats.burned_amount | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td i18n="asset.burned-amount|Liquid Asset burned amount">Burned amount</td>
+                <td *ngIf="!blindedIssuance; else confidentialTd">{{ formatAmount(asset.chain_stats.burned_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr *ngIf="!isNativeAsset">
-                <td>Circulating amount</td>
-                <td>{{ (asset.chain_stats.issued_amount - asset.chain_stats.burned_amount) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td i18n="asset.circulating-amount|Liquid Asset circulating amount">Circulating amount</td>
+                <td *ngIf="!blindedIssuance; else confidentialTd">{{ formatAmount(asset.chain_stats.issued_amount - asset.chain_stats.burned_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr *ngIf="isNativeAsset">
-                <td>Circulating amount</td>
-                <td>{{ (asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount - asset.chain_stats.peg_out_amount) / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td i18n="asset.circulating-amount|Liquid Asset circulating amount">Circulating amount</td>
+                <td>{{ formatAmount(asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount - asset.chain_stats.peg_out_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
             </tbody>
           </table>
@@ -72,7 +72,7 @@
 
     <br>
 
-    <h2><ng-template [ngIf]="transactions?.length">{{ (transactions?.length | number) || '?' }} of </ng-template>{{ txCount | number }} <ng-template [ngIf]="isNativeAsset" [ngIfElse]="defaultAsset">Peg In/Out and Burn Transactions</ng-template><ng-template #defaultAsset>In/Out and Burn Transactions</ng-template></h2>
+    <h2><ng-template [ngIf]="transactions?.length">{{ (transactions?.length | number) || '?' }} of </ng-template>{{ txCount | number }} <ng-template [ngIf]="isNativeAsset" [ngIfElse]="defaultAsset" i18n="Liquid native asset transactions title">Peg In/Out and Burn Transactions</ng-template><ng-template #defaultAsset i18n="Default asset transactions title">Issuance and Burn Transactions</ng-template></h2>
 
     <app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
 
@@ -129,7 +129,7 @@
 
   <ng-template [ngIf]="error">
     <div class="text-center">
-      Error loading asset data.
+      <span i18n="asset.error.loading-asset-data">Error loading asset data.</span>
       <br>
       <i>{{ error.error }}</i>
     </div>
@@ -137,4 +137,8 @@
 
 </div>
 
-<br>
+<br>
+
+<ng-template #confidentialTd>
+  <td i18n="shared.confidential">Confidential</td>
+</ng-template>

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

@@ -11,6 +11,7 @@ import { of, merge, Subscription, combineLatest } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
 import { environment } from 'src/environments/environment';
 import { AssetsService } from 'src/app/services/assets.service';
+import { moveDec } from 'src/app/bitcoin.utils';
 
 @Component({
   selector: 'app-asset',
@@ -22,6 +23,7 @@ export class AssetComponent implements OnInit, OnDestroy {
   nativeAssetId = environment.nativeAssetId;
 
   asset: Asset;
+  blindedIssuance: boolean;
   assetContract: any;
   assetString: string;
   isLoadingAsset = true;
@@ -53,7 +55,7 @@ export class AssetComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
+    this.websocketService.want(['blocks', 'mempool-blocks']);
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
 
     this.mainSubscription = this.route.paramMap
@@ -68,7 +70,7 @@ export class AssetComponent implements OnInit, OnDestroy {
           this.transactions = null;
           document.body.scrollTo(0, 0);
           this.assetString = params.get('id') || '';
-          this.seoService.setTitle('Asset: ' + this.assetString, true);
+          this.seoService.setTitle($localize`:@@asset.component.asset-browser-title:Asset: ${this.assetString}:INTERPOLATION:`);
 
           return merge(
             of(true),
@@ -97,6 +99,10 @@ export class AssetComponent implements OnInit, OnDestroy {
         switchMap(([asset, assetsData]) => {
           this.asset = asset;
           this.assetContract = assetsData[this.asset.asset_id];
+          if (!this.assetContract) {
+            this.assetContract = [null, '?', 'Unknown', 0];
+          }
+          this.blindedIssuance = this.asset.chain_stats.has_blinded_issuances || this.asset.mempool_stats.has_blinded_issuances;
           this.isNativeAsset = asset.asset_id === this.nativeAssetId;
           this.updateChainStats();
           this.websocketService.startTrackAsset(asset.asset_id);
@@ -189,6 +195,10 @@ export class AssetComponent implements OnInit, OnDestroy {
     this.totalConfirmedTxCount = this.asset.chain_stats.tx_count;
   }
 
+  formatAmount(value: number, precision = 0): number | string {
+    return moveDec(value, -precision);
+  }
+
   ngOnDestroy() {
     this.mainSubscription.unsubscribe();
     this.websocketService.stopTrackingAsset();

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

@@ -1,7 +1,7 @@
 <div class="container-xl">
 
   <div class="title-block">
-    <h1 class="float-left">Block <ng-template [ngIf]="blockHeight"><a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
+    <h1 class="float-left"><ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis </ng-template><ng-template [ngIf]="blockHeight" i18n="block.block">Block <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
     <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right mr-2 mt-2">&#10005;</button>
   </div>
 
@@ -15,24 +15,24 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="td-width">Hash</td>
+                <td class="td-width" i18n="block.hash">Hash</td>
                 <td><a [routerLink]="['/block/' | relativeUrl, block.id]" title="{{ block.id }}">{{ block.id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.id"></app-clipboard></td>
               </tr>
               <tr>
-                <td>Timestamp</td>
+                <td i18n="block.timestamp">Timestamp</td>
                 <td>
                   {{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
                   <div class="lg-inline">
-                    <i>(<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago)</i>
+                    <i>(<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>)</i>
                   </div>
                 </td>
               </tr>
               <tr>
-                <td>Size</td>
+                <td i18n="block.size">Size</td>
                 <td>{{ block.size | bytes: 2 }}</td>
               </tr>
               <tr>
-                <td>Weight</td>
+                <td i18n="block.weight">Weight</td>
                 <td>{{ block.weight | wuBytes: 2 }}</td>
               </tr>
             </tbody>
@@ -42,19 +42,19 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr *ngIf="block.medianFee !== undefined">
-                <td class="td-width">Median fee</td>
-                <td>~{{ block.medianFee | number:'1.0-0' }} sat/vB (<app-fiat [value]="block.medianFee * 250" digitsInfo="1.2-2"></app-fiat>)</td>
+                <td class="td-width" i18n="block.median-fee">Median fee</td>
+                <td>~{{ block.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> (<app-fiat [value]="block.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)</td>
               </tr>
               <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
                 <tr>
-                  <td>Total fees</td>
+                  <td i18n="block.total-fees|Total fees in a block">Total fees</td>
                   <td *ngIf="network !== 'liquid'; else liquidTotalFees"><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td>
                   <ng-template #liquidTotalFees>
                     <td>{{ fees * 100000000 | number }} L-sat (<app-fiat [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>)</td>
                   </ng-template>
                 </tr>
                 <tr *ngIf="network !== 'liquid'">
-                  <td>Subsidy + fees:</td>
+                  <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
                   <td>
                     <app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>)
                   </td>
@@ -62,16 +62,16 @@
               </ng-template>
               <ng-template #loadingFees>
                 <tr>
-                  <td>Total fees</td>
+                  <td i18n="block.total-fees|Total fees in a block">Total fees</td>
                   <td style="width: 75%;"><span class="skeleton-loader"></span></td>
                 </tr>
                 <tr *ngIf="network !== 'liquid'">
-                  <td>Subsidy + fees:</td>
+                  <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
                   <td><span class="skeleton-loader"></span></td>
                 </tr>
               </ng-template>
               <tr>
-                <td>Miner</td>
+                <td i18n="block.miner">Miner</td>
                 <td><app-miner [coinbaseTransaction]="coinbaseTx"></app-miner></td>
               </tr>
             </tbody>
@@ -82,7 +82,11 @@
 
     <br>
 
-    <h2 class="float-left">{{ block.tx_count | number }} transactions</h2>
+    <h2 class="float-left">
+      <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
+      <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+      <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+    </h2>
 
     <ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
@@ -108,6 +112,13 @@
             </div>
           </div>
         </div>
+
+        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus">
+          <br>
+          <div class="progress position-relative progress-dark">
+            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
+          </div>
+        </ng-container>
         
       </div>
     </ng-template>
@@ -162,7 +173,7 @@
 
   <ng-template [ngIf]="error">
     <div class="text-center">
-      Error loading block data.
+      <span i18n="block.error.loading-block-data">Error loading block data.</span>
       <br><br>
       <i>{{ error.error }}</i>
     </div>

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

@@ -2,12 +2,12 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
-import { switchMap, tap, debounceTime, catchError } from 'rxjs/operators';
+import { switchMap, tap, debounceTime, catchError, map } from 'rxjs/operators';
 import { Block, Transaction, Vout } from '../../interfaces/electrs.interface';
-import { of, Subscription } from 'rxjs';
+import { Observable, of, Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { SeoService } from 'src/app/services/seo.service';
-import { env } from 'src/app/app.constants';
+import { WebsocketService } from 'src/app/services/websocket.service';
 
 @Component({
   selector: 'app-block',
@@ -30,7 +30,8 @@ export class BlockComponent implements OnInit, OnDestroy {
   paginationMaxSize: number;
   coinbaseTx: Transaction;
   page = 1;
-  itemsPerPage = env.ELCTRS_ITEMS_PER_PAGE;
+  itemsPerPage: number;
+  txsLoadingStatus$: Observable<number>;
 
   constructor(
     private route: ActivatedRoute,
@@ -39,11 +40,20 @@ export class BlockComponent implements OnInit, OnDestroy {
     private electrsApiService: ElectrsApiService,
     private stateService: StateService,
     private seoService: SeoService,
+    private websocketService: WebsocketService,
   ) { }
 
   ngOnInit() {
+    this.websocketService.want(['blocks', 'mempool-blocks']);
     this.paginationMaxSize = window.matchMedia('(max-width: 700px)').matches ? 3 : 5;
     this.network = this.stateService.network;
+    this.itemsPerPage = this.stateService.env.ITEMS_PER_PAGE;
+
+    this.txsLoadingStatus$ = this.route.paramMap
+      .pipe(
+        switchMap(() => this.stateService.loadingIndicators$),
+        map((indicators) => indicators['blocktxs-' + this.blockHash] !== undefined ? indicators['blocktxs-' + this.blockHash] : 0)
+      );
 
     this.subscription = this.route.paramMap
     .pipe(
@@ -92,7 +102,7 @@ export class BlockComponent implements OnInit, OnDestroy {
       tap((block: Block) => {
         this.block = block;
         this.blockHeight = block.height;
-        this.seoService.setTitle('Block: #' + block.height + ': ' + block.id, true);
+        this.seoService.setTitle($localize`:@@block.component.browser-title:Block ${block.height}:BLOCK_HEIGHT:: ${block.id}:BLOCK_ID:`);
         this.isLoadingBlock = false;
         if (block.coinbaseTx) {
           this.coinbaseTx = block.coinbaseTx;

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

@@ -7,14 +7,18 @@
       </div>
       <div class="block-body">
         <div class="fees">
-          ~{{ block.medianFee | number:'1.0-0' }} sat/vB
+          ~{{ block.medianFee | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
         <div class="fee-span">
-          {{ block.feeRange[1] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} sat/vB
+          {{ block.feeRange[1] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
-        <div class="block-size">{{ block.size | bytes: 2 }}</div>
-        <div class="transaction-count">{{ block.tx_count | number }} transactions</div>
-        <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</div>
+        <div class="block-size">&lrm;{{ block.size | bytes: 2 }}</div>
+        <div class="transaction-count">
+          <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
+          <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+          <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+        </div>
+        <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
       </div>
     </div>
   </div>