From 0400deacf29e2141f856cd5806955010025195e1 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Thu, 3 Feb 2022 23:14:56 -0800
Subject: [PATCH 01/25] Add socks-proxy-agent dependency

---
 backend/package-lock.json | 161 ++++++++++++++++++++++++++++++++++++++
 backend/package.json      |   1 +
 2 files changed, 162 insertions(+)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index a93e977a3..f2ef1abb3 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -19,6 +19,7 @@
         "locutus": "^2.0.12",
         "mysql2": "2.3.3",
         "node-worker-threads-pool": "^1.4.3",
+        "socks-proxy-agent": "^6.1.1",
         "typescript": "4.4.4",
         "ws": "8.3.0"
       },
@@ -181,6 +182,38 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/agent-base/node_modules/debug": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+      "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/agent-base/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -731,6 +764,11 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/ip": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
+      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo="
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -1189,6 +1227,62 @@
         "sha.js": "bin.js"
       }
     },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.1.tgz",
+      "integrity": "sha512-kLQ9N5ucj8uIcxrDwjm0Jsqk06xdpBjGNQtpXy4Q8/QY2k+fY7nZH8CARy+hkbG+SGAovmzzuauCpBlb8FrnBA==",
+      "dependencies": {
+        "ip": "^1.1.5",
+        "smart-buffer": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.1.1.tgz",
+      "integrity": "sha512-t8J0kG3csjA4g6FTbsMOWws+7R7vuRC8aQ/wy3/1OWmsgwA68zs/+cExQ0koSitUDXqhufF/YJr9wtNMZHw5Ew==",
+      "dependencies": {
+        "agent-base": "^6.0.2",
+        "debug": "^4.3.1",
+        "socks": "^2.6.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/socks-proxy-agent/node_modules/debug": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+      "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socks-proxy-agent/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -1538,6 +1632,29 @@
         "negotiator": "0.6.2"
       }
     },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "requires": {
+        "debug": "4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.3",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+          "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1992,6 +2109,11 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "ip": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
+      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo="
+    },
     "ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -2352,6 +2474,45 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg=="
+    },
+    "socks": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.1.tgz",
+      "integrity": "sha512-kLQ9N5ucj8uIcxrDwjm0Jsqk06xdpBjGNQtpXy4Q8/QY2k+fY7nZH8CARy+hkbG+SGAovmzzuauCpBlb8FrnBA==",
+      "requires": {
+        "ip": "^1.1.5",
+        "smart-buffer": "^4.1.0"
+      }
+    },
+    "socks-proxy-agent": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.1.1.tgz",
+      "integrity": "sha512-t8J0kG3csjA4g6FTbsMOWws+7R7vuRC8aQ/wy3/1OWmsgwA68zs/+cExQ0koSitUDXqhufF/YJr9wtNMZHw5Ew==",
+      "requires": {
+        "agent-base": "^6.0.2",
+        "debug": "^4.3.1",
+        "socks": "^2.6.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.3",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+          "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
diff --git a/backend/package.json b/backend/package.json
index a5c9a32ff..e72d163b2 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -38,6 +38,7 @@
     "locutus": "^2.0.12",
     "mysql2": "2.3.3",
     "node-worker-threads-pool": "^1.4.3",
+    "socks-proxy-agent": "^6.1.1",
     "typescript": "4.4.4",
     "ws": "8.3.0"
   },

From 0a954e8bcf90f91e17766241160af5094d491431 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Thu, 3 Feb 2022 23:16:30 -0800
Subject: [PATCH 02/25] Allow synthetic default imports due to the socks
 library

---
 backend/tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/tsconfig.json b/backend/tsconfig.json
index 85a3cb358..8b4cbea2e 100644
--- a/backend/tsconfig.json
+++ b/backend/tsconfig.json
@@ -10,7 +10,8 @@
     "moduleResolution": "node",
     "typeRoots": [
       "node_modules/@types"
-    ]
+    ],
+    "allowSyntheticDefaultImports": true
   },
   "include": [
     "src/**/*.ts"

From 8a996cedb4e2df50bdc6fe63d98c975a5f5fc678 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Thu, 3 Feb 2022 23:21:19 -0800
Subject: [PATCH 03/25] Update README, reference config files and Docker with
 the new SOCKS config

---
 README.md                          | 19 +++++++++++++++++++
 backend/mempool-config.sample.json |  7 +++++++
 docker/backend/mempool-config.json |  7 +++++++
 docker/backend/start.sh            | 13 +++++++++++++
 4 files changed, 46 insertions(+)

diff --git a/README.md b/README.md
index 34dca4862..151edfab7 100644
--- a/README.md
+++ b/README.md
@@ -245,6 +245,25 @@ docker-compose overrides:
       BISQ_DATA_PATH: ""
 ```
 
+JSON:
+```
+  "SOCKS5PROXY": {
+    "ENABLED": false,
+    "HOST": "127.0.0.1",
+    "PORT": "9050",
+    "USERNAME": "",
+    "PASSWORD": ""
+  }
+```
+
+docker-compose overrides:
+```
+      SOCKS5PROXY_ENABLED: ""
+      SOCKS5PROXY_HOST: ""
+      SOCKS5PROXY_PORT: ""
+      SOCKS5PROXY_USERNAME: ""
+      SOCKS5PROXY_PASSWORD: ""
+```
 
 # Manual Installation
 
diff --git a/backend/mempool-config.sample.json b/backend/mempool-config.sample.json
index 8a9295b3a..e977d8046 100644
--- a/backend/mempool-config.sample.json
+++ b/backend/mempool-config.sample.json
@@ -61,5 +61,12 @@
   "BISQ": {
     "ENABLED": false,
     "DATA_PATH": "/bisq/statsnode-data/btc_mainnet/db"
+  },
+  "SOCKS5PROXY": {
+    "ENABLED": false,
+    "HOST": "127.0.0.1",
+    "PORT": 9050,
+    "USERNAME": "",
+    "PASSWORD": ""
   }
 }
diff --git a/docker/backend/mempool-config.json b/docker/backend/mempool-config.json
index 00dc31aad..788ab6505 100644
--- a/docker/backend/mempool-config.json
+++ b/docker/backend/mempool-config.json
@@ -58,5 +58,12 @@
   "BISQ": {
     "ENABLED": __BISQ_ENABLED__,
     "DATA_PATH": "__BISQ_DATA_PATH__"
+  },
+  "SOCKS5PROXY": {
+    "ENABLED": __SOCKS5PROXY_ENABLED__,
+    "HOST": "__SOCKS5PROXY_HOST__",
+    "PORT": "__SOCKS5PROXY_PORT__",
+    "USERNAME": "__SOCKS5PROXY_USERNAME__",
+    "PASSWORD": "__SOCKS5PROXY_PASSWORD__"
   }
 }
diff --git a/docker/backend/start.sh b/docker/backend/start.sh
index 372be346e..1d1155a66 100644
--- a/docker/backend/start.sh
+++ b/docker/backend/start.sh
@@ -61,6 +61,13 @@ __STATISTICS_TX_PER_SECOND_SAMPLE_PERIOD__=${STATISTICS_TX_PER_SECOND_SAMPLE_PER
 __BISQ_ENABLED__=${BISQ_ENABLED:=false}
 __BISQ_DATA_PATH__=${BISQ_DATA_PATH:=/bisq/statsnode-data/btc_mainnet/db}
 
+# SOCKS5PROXY
+__SOCKS5PROXY_ENABLED__=${SOCKS5PROXY_ENABLED:=false}
+__SOCKS5PROXY_HOST__=${SOCKS5PROXY_HOST:=localhost}
+__SOCKS5PROXY_PORT__=${SOCKS5PROXY_PORT:=9050}
+__SOCKS5PROXY_USERNAME__=${SOCKS5PROXY_USERNAME:=""}
+__SOCKS5PROXY_PASSWORD__=${SOCKS5PROXY_PASSWORD:=""}
+
 mkdir -p "${__MEMPOOL_CACHE_DIR__}"
 
 sed -i "s/__MEMPOOL_NETWORK__/${__MEMPOOL_NETWORK__}/g" mempool-config.json
@@ -115,4 +122,10 @@ sed -i "s/__STATISTICS_TX_PER_SECOND_SAMPLE_PERIOD__/${__STATISTICS_TX_PER_SECON
 sed -i "s/__BISQ_ENABLED__/${__BISQ_ENABLED__}/g" mempool-config.json
 sed -i "s!__BISQ_DATA_PATH__!${__BISQ_DATA_PATH__}!g" mempool-config.json
 
+sed -i "s/__SOCKS5PROXY_ENABLED__/${__SOCKS5PROXY_ENABLED__}/g" mempool-config.json
+sed -i "s/__SOCKS5PROXY_HOST__/${__SOCKS5PROXY_HOST__}/g" mempool-config.json
+sed -i "s/__SOCKS5PROXY_PORT__/${__SOCKS5PROXY_PORT__}/g" mempool-config.json
+sed -i "s/__SOCKS5PROXY_USERNAME__/${__SOCKS5PROXY_USERNAME__}/g" mempool-config.json
+sed -i "s/__SOCKS5PROXY_PASSWORD__/${__SOCKS5PROXY_PASSWORD__}/g" mempool-config.json
+
 node /backend/dist/index.js

From b1dde4d8b1c5382c43349a12dc840885f24fbd2f Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Thu, 3 Feb 2022 23:23:57 -0800
Subject: [PATCH 04/25] Query conversion rates service over clearnet or Tor
 with mempool User-Agent

---
 backend/src/api/fiat-conversion.ts | 27 ++++++++++++++++++++++++++-
 backend/src/config.ts              | 18 +++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/backend/src/api/fiat-conversion.ts b/backend/src/api/fiat-conversion.ts
index d779e31fd..e6b44300a 100644
--- a/backend/src/api/fiat-conversion.ts
+++ b/backend/src/api/fiat-conversion.ts
@@ -2,6 +2,8 @@ import logger from '../logger';
 import axios from 'axios';
 import { IConversionRates } from '../mempool.interfaces';
 import config from '../config';
+import backendInfo from './backend-info';
+import { SocksProxyAgent } from 'socks-proxy-agent';
 
 class FiatConversion {
   private conversionRates: IConversionRates = {
@@ -17,6 +19,9 @@ class FiatConversion {
 
   public startService() {
     logger.info('Starting currency rates service');
+    if (config.SOCKS5PROXY.ENABLED) {
+      logger.info('Currency rates service will be queried over the Tor network');
+    }
     setInterval(this.updateCurrency.bind(this), 1000 * config.MEMPOOL.PRICE_FEED_UPDATE_INTERVAL);
     this.updateCurrency();
   }
@@ -26,8 +31,28 @@ class FiatConversion {
   }
 
   private async updateCurrency(): Promise<void> {
+    const headers = { 'User-Agent': `mempool/v${backendInfo.getBackendInfo().version}` };
+    let response;
     try {
-      const response = await axios.get('https://price.bisq.wiz.biz/getAllMarketPrices', { timeout: 10000 });
+      let fiatConversionUrl = 'https://price.bisq.wiz.biz/getAllMarketPrices';
+      if (config.SOCKS5PROXY.ENABLED) {
+        let socksOptions: any = {
+          agentOptions: {
+            keepAlive: true,
+          },
+          host: config.SOCKS5PROXY.HOST,
+          port: config.SOCKS5PROXY.PORT
+        };
+        if (config.SOCKS5PROXY.USERNAME && config.SOCKS5PROXY.PASSWORD) {
+          socksOptions.username = config.SOCKS5PROXY.USERNAME;
+          socksOptions.password = config.SOCKS5PROXY.PASSWORD;
+        }
+        const agent = new SocksProxyAgent(socksOptions);
+        fiatConversionUrl = 'http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices';
+        response = await axios.get(fiatConversionUrl, { httpAgent: agent, headers: headers, timeout: 30000 });
+      } else {
+        response = await axios.get(fiatConversionUrl, { headers: headers, timeout: 10000 });
+      }
       const usd = response.data.data.find((item: any) => item.currencyCode === 'USD');
       this.conversionRates = {
         'USD': usd.price,
diff --git a/backend/src/config.ts b/backend/src/config.ts
index 085d538c4..e610e9f47 100644
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -51,7 +51,7 @@ interface IConfig {
     ENABLED: boolean;
     HOST: string;
     PORT: number;
-    MIN_PRIORITY: 'emerg' | 'alert' | 'crit' | 'err' |'warn' | 'notice' | 'info' | 'debug';
+    MIN_PRIORITY: 'emerg' | 'alert' | 'crit' | 'err' | 'warn' | 'notice' | 'info' | 'debug';
     FACILITY: string;
   };
   STATISTICS: {
@@ -62,6 +62,13 @@ interface IConfig {
     ENABLED: boolean;
     DATA_PATH: string;
   };
+  SOCKS5PROXY: {
+    ENABLED: boolean;
+    HOST: string;
+    PORT: number;
+    USERNAME: string;
+    PASSWORD: string;
+  };
 }
 
 const defaults: IConfig = {
@@ -128,6 +135,13 @@ const defaults: IConfig = {
     'ENABLED': false,
     'DATA_PATH': '/bisq/statsnode-data/btc_mainnet/db'
   },
+  'SOCKS5PROXY': {
+    'ENABLED': false,
+    'HOST': '127.0.0.1',
+    'PORT': 9050,
+    'USERNAME': '',
+    'PASSWORD': ''
+  }
 };
 
 class Config implements IConfig {
@@ -140,6 +154,7 @@ class Config implements IConfig {
   SYSLOG: IConfig['SYSLOG'];
   STATISTICS: IConfig['STATISTICS'];
   BISQ: IConfig['BISQ'];
+  SOCKS5PROXY: IConfig['SOCKS5PROXY'];
 
   constructor() {
     const configs = this.merge(configFile, defaults);
@@ -152,6 +167,7 @@ class Config implements IConfig {
     this.SYSLOG = configs.SYSLOG;
     this.STATISTICS = configs.STATISTICS;
     this.BISQ = configs.BISQ;
+    this.SOCKS5PROXY = configs.SOCKS5PROXY;
   }
 
   merge = (...objects: object[]): IConfig => {

From 452375aaf7aadd3fc0f6350d4a306fa6d4c62adb Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Fri, 4 Feb 2022 22:48:16 -0800
Subject: [PATCH 05/25] Make the Currency Conversion Service URLs configurable
 and log when queried

---
 README.md                          | 14 ++++++++++++++
 backend/mempool-config.sample.json |  4 ++++
 backend/src/api/fiat-conversion.ts | 23 ++++++++++++++++++-----
 backend/src/config.ts              | 10 ++++++++++
 docker/backend/mempool-config.json |  4 ++++
 docker/backend/start.sh            |  7 +++++++
 6 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 151edfab7..c50282311 100644
--- a/README.md
+++ b/README.md
@@ -265,6 +265,20 @@ docker-compose overrides:
       SOCKS5PROXY_PASSWORD: ""
 ```
 
+JSON:
+```
+  "PRICENODE": {
+    "TOR_URL": "http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices",
+    "CLEARNET_URL": "https://price.bisq.wiz.biz/getAllMarketPrices"
+  }
+```
+
+docker-compose overrides:
+```
+      PRICENODE_TOR_URL: ""
+      PRICENODE_CLEARNET_URL: ""
+```
+
 # Manual Installation
 
 The following instructions are for a manual installation on Linux or FreeBSD. The file and directory paths may need to be changed to match your OS.
diff --git a/backend/mempool-config.sample.json b/backend/mempool-config.sample.json
index e977d8046..1b874c665 100644
--- a/backend/mempool-config.sample.json
+++ b/backend/mempool-config.sample.json
@@ -68,5 +68,9 @@
     "PORT": 9050,
     "USERNAME": "",
     "PASSWORD": ""
+  },
+  "PRICENODE": {
+    "TOR_URL": "http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices",
+    "CLEARNET_URL": "https://price.bisq.wiz.biz/getAllMarketPrices"
   }
 }
diff --git a/backend/src/api/fiat-conversion.ts b/backend/src/api/fiat-conversion.ts
index e6b44300a..df10d7698 100644
--- a/backend/src/api/fiat-conversion.ts
+++ b/backend/src/api/fiat-conversion.ts
@@ -1,5 +1,5 @@
 import logger from '../logger';
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { IConversionRates } from '../mempool.interfaces';
 import config from '../config';
 import backendInfo from './backend-info';
@@ -20,7 +20,9 @@ class FiatConversion {
   public startService() {
     logger.info('Starting currency rates service');
     if (config.SOCKS5PROXY.ENABLED) {
-      logger.info('Currency rates service will be queried over the Tor network');
+      logger.info(`Currency rates service will be queried over the Tor network using ${config.PRICENODE.TOR_URL}`);
+    } else {
+      logger.info(`Currency rates service will be queried over clearnet using ${config.PRICENODE.CLEARNET_URL}`);
     }
     setInterval(this.updateCurrency.bind(this), 1000 * config.MEMPOOL.PRICE_FEED_UPDATE_INTERVAL);
     this.updateCurrency();
@@ -32,9 +34,10 @@ class FiatConversion {
 
   private async updateCurrency(): Promise<void> {
     const headers = { 'User-Agent': `mempool/v${backendInfo.getBackendInfo().version}` };
-    let response;
+    let fiatConversionUrl: string;
+    let response: AxiosResponse;
+
     try {
-      let fiatConversionUrl = 'https://price.bisq.wiz.biz/getAllMarketPrices';
       if (config.SOCKS5PROXY.ENABLED) {
         let socksOptions: any = {
           agentOptions: {
@@ -43,20 +46,30 @@ class FiatConversion {
           host: config.SOCKS5PROXY.HOST,
           port: config.SOCKS5PROXY.PORT
         };
+
         if (config.SOCKS5PROXY.USERNAME && config.SOCKS5PROXY.PASSWORD) {
           socksOptions.username = config.SOCKS5PROXY.USERNAME;
           socksOptions.password = config.SOCKS5PROXY.PASSWORD;
         }
+
         const agent = new SocksProxyAgent(socksOptions);
-        fiatConversionUrl = 'http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices';
+        fiatConversionUrl = config.PRICENODE.TOR_URL;
+        logger.info('Querying currency rates service...');
         response = await axios.get(fiatConversionUrl, { httpAgent: agent, headers: headers, timeout: 30000 });
       } else {
+        fiatConversionUrl = config.PRICENODE.CLEARNET_URL;
+        logger.info('Querying currency rates service...');
         response = await axios.get(fiatConversionUrl, { headers: headers, timeout: 10000 });
       }
+
       const usd = response.data.data.find((item: any) => item.currencyCode === 'USD');
+
       this.conversionRates = {
         'USD': usd.price,
       };
+
+      logger.info(`USD Conversion Rate: ${usd.price}`);
+
       if (this.ratesChangedCallback) {
         this.ratesChangedCallback(this.conversionRates);
       }
diff --git a/backend/src/config.ts b/backend/src/config.ts
index e610e9f47..058895efb 100644
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -69,6 +69,10 @@ interface IConfig {
     USERNAME: string;
     PASSWORD: string;
   };
+  PRICENODE: {
+    TOR_URL: string;
+    CLEARNET_URL: string;
+  };
 }
 
 const defaults: IConfig = {
@@ -141,6 +145,10 @@ const defaults: IConfig = {
     'PORT': 9050,
     'USERNAME': '',
     'PASSWORD': ''
+  },
+  "PRICENODE": {
+    'TOR_URL': 'http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices',
+    'CLEARNET_URL': 'https://price.bisq.wiz.biz/getAllMarketPrices'
   }
 };
 
@@ -155,6 +163,7 @@ class Config implements IConfig {
   STATISTICS: IConfig['STATISTICS'];
   BISQ: IConfig['BISQ'];
   SOCKS5PROXY: IConfig['SOCKS5PROXY'];
+  PRICENODE: IConfig['PRICENODE'];
 
   constructor() {
     const configs = this.merge(configFile, defaults);
@@ -168,6 +177,7 @@ class Config implements IConfig {
     this.STATISTICS = configs.STATISTICS;
     this.BISQ = configs.BISQ;
     this.SOCKS5PROXY = configs.SOCKS5PROXY;
+    this.PRICENODE = configs.PRICENODE;
   }
 
   merge = (...objects: object[]): IConfig => {
diff --git a/docker/backend/mempool-config.json b/docker/backend/mempool-config.json
index 788ab6505..5a069455d 100644
--- a/docker/backend/mempool-config.json
+++ b/docker/backend/mempool-config.json
@@ -65,5 +65,9 @@
     "PORT": "__SOCKS5PROXY_PORT__",
     "USERNAME": "__SOCKS5PROXY_USERNAME__",
     "PASSWORD": "__SOCKS5PROXY_PASSWORD__"
+  },
+  "PRICENODE": {
+    "TOR_URL": "__PRICENODE_TOR_URL__",
+    "CLEARNET_URL": "__PRICENODE_CLEARNET_URL__"
   }
 }
diff --git a/docker/backend/start.sh b/docker/backend/start.sh
index 1d1155a66..0ae1e32a2 100644
--- a/docker/backend/start.sh
+++ b/docker/backend/start.sh
@@ -68,6 +68,10 @@ __SOCKS5PROXY_PORT__=${SOCKS5PROXY_PORT:=9050}
 __SOCKS5PROXY_USERNAME__=${SOCKS5PROXY_USERNAME:=""}
 __SOCKS5PROXY_PASSWORD__=${SOCKS5PROXY_PASSWORD:=""}
 
+# PRICENODE
+__PRICENODE_TOR_URL__=${PRICENODE_TOR_URL:=http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices}
+__PRICENODE_CLEARNET_URL__=${PRICENODE_CLEARNET_URL:=https://price.bisq.wiz.biz/getAllMarketPrices}
+
 mkdir -p "${__MEMPOOL_CACHE_DIR__}"
 
 sed -i "s/__MEMPOOL_NETWORK__/${__MEMPOOL_NETWORK__}/g" mempool-config.json
@@ -128,4 +132,7 @@ sed -i "s/__SOCKS5PROXY_PORT__/${__SOCKS5PROXY_PORT__}/g" mempool-config.json
 sed -i "s/__SOCKS5PROXY_USERNAME__/${__SOCKS5PROXY_USERNAME__}/g" mempool-config.json
 sed -i "s/__SOCKS5PROXY_PASSWORD__/${__SOCKS5PROXY_PASSWORD__}/g" mempool-config.json
 
+sed -i "s!__PRICENODE_TOR_URL__!${__PRICENODE_TOR_URL__}!g" mempool-config.json
+sed -i "s!__PRICENODE_CLEARNET_URL__!${__PRICENODE_CLEARNET_URL__}!g" mempool-config.json
+
 node /backend/dist/index.js

From ee7f8d8d1845239aa691710aff1c65f21e0fb5f1 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Sat, 5 Feb 2022 00:33:16 -0800
Subject: [PATCH 06/25] Reduce currency rates polling interval from 1 hour to
 10 minutes

---
 README.md                          | 2 +-
 backend/mempool-config.sample.json | 2 +-
 backend/src/config.ts              | 2 +-
 docker/backend/start.sh            | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index c50282311..3dc04b81b 100644
--- a/README.md
+++ b/README.md
@@ -88,7 +88,7 @@ JSON:
     "BLOCK_WEIGHT_UNITS": 4000000,
     "INITIAL_BLOCKS_AMOUNT": 8,
     "MEMPOOL_BLOCKS_AMOUNT": 8,
-    "PRICE_FEED_UPDATE_INTERVAL": 3600,
+    "PRICE_FEED_UPDATE_INTERVAL": 600,
     "USE_SECOND_NODE_FOR_MINFEE": false,
     "EXTERNAL_ASSETS": []
   },
diff --git a/backend/mempool-config.sample.json b/backend/mempool-config.sample.json
index 1b874c665..b9d7fb982 100644
--- a/backend/mempool-config.sample.json
+++ b/backend/mempool-config.sample.json
@@ -13,7 +13,7 @@
     "INITIAL_BLOCKS_AMOUNT": 8,
     "MEMPOOL_BLOCKS_AMOUNT": 8,
     "INDEXING_BLOCKS_AMOUNT": 1100,
-    "PRICE_FEED_UPDATE_INTERVAL": 3600,
+    "PRICE_FEED_UPDATE_INTERVAL": 600,
     "USE_SECOND_NODE_FOR_MINFEE": false,
     "EXTERNAL_ASSETS": [
       "https://mempool.space/resources/pools.json"
diff --git a/backend/src/config.ts b/backend/src/config.ts
index 058895efb..f2787977b 100644
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -90,7 +90,7 @@ const defaults: IConfig = {
     'INITIAL_BLOCKS_AMOUNT': 8,
     'MEMPOOL_BLOCKS_AMOUNT': 8,
     'INDEXING_BLOCKS_AMOUNT': 1100, // 0 = disable indexing, -1 = index all blocks
-    'PRICE_FEED_UPDATE_INTERVAL': 3600,
+    'PRICE_FEED_UPDATE_INTERVAL': 600,
     'USE_SECOND_NODE_FOR_MINFEE': false,
     'EXTERNAL_ASSETS': [
       'https://mempool.space/resources/pools.json'
diff --git a/docker/backend/start.sh b/docker/backend/start.sh
index 0ae1e32a2..d1422bf45 100644
--- a/docker/backend/start.sh
+++ b/docker/backend/start.sh
@@ -14,7 +14,7 @@ __MEMPOOL_BLOCK_WEIGHT_UNITS__=${MEMPOOL_BLOCK_WEIGHT_UNITS:=4000000}
 __MEMPOOL_INITIAL_BLOCKS_AMOUNT__=${MEMPOOL_INITIAL_BLOCKS_AMOUNT:=8}
 __MEMPOOL_MEMPOOL_BLOCKS_AMOUNT__=${MEMPOOL_MEMPOOL_BLOCKS_AMOUNT:=8}
 __MEMPOOL_INDEXING_BLOCKS_AMOUNT__=${MEMPOOL_INDEXING_BLOCKS_AMOUNT:=1100}
-__MEMPOOL_PRICE_FEED_UPDATE_INTERVAL__=${MEMPOOL_PRICE_FEED_UPDATE_INTERVAL:=3600}
+__MEMPOOL_PRICE_FEED_UPDATE_INTERVAL__=${MEMPOOL_PRICE_FEED_UPDATE_INTERVAL:=600}
 __MEMPOOL_USE_SECOND_NODE_FOR_MINFEE__=${MEMPOOL_USE_SECOND_NODE_FOR_MINFEE:=false}
 __MEMPOOL_EXTERNAL_ASSETS__=${MEMPOOL_EXTERNAL_ASSETS:=[]}
 

From 6b2900345a55ed6676bed9e6a3087a4257539915 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sat, 5 Feb 2022 07:58:35 -0800
Subject: [PATCH 07/25] Rename PRICENODE to PRICE_DATA_SERVER

---
 README.md                          |  6 +++---
 backend/mempool-config.sample.json |  2 +-
 backend/src/api/fiat-conversion.ts |  8 ++++----
 backend/src/config.ts              |  8 ++++----
 docker/backend/mempool-config.json |  6 +++---
 docker/backend/start.sh            | 10 +++++-----
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 3dc04b81b..75146d4b1 100644
--- a/README.md
+++ b/README.md
@@ -267,7 +267,7 @@ docker-compose overrides:
 
 JSON:
 ```
-  "PRICENODE": {
+  "PRICE_DATA_SERVER": {
     "TOR_URL": "http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices",
     "CLEARNET_URL": "https://price.bisq.wiz.biz/getAllMarketPrices"
   }
@@ -275,8 +275,8 @@ JSON:
 
 docker-compose overrides:
 ```
-      PRICENODE_TOR_URL: ""
-      PRICENODE_CLEARNET_URL: ""
+      PRICE_DATA_SERVER_TOR_URL: ""
+      PRICE_DATA_SERVER_CLEARNET_URL: ""
 ```
 
 # Manual Installation
diff --git a/backend/mempool-config.sample.json b/backend/mempool-config.sample.json
index b9d7fb982..dc0f1a69e 100644
--- a/backend/mempool-config.sample.json
+++ b/backend/mempool-config.sample.json
@@ -69,7 +69,7 @@
     "USERNAME": "",
     "PASSWORD": ""
   },
-  "PRICENODE": {
+  "PRICE_DATA_SERVER": {
     "TOR_URL": "http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices",
     "CLEARNET_URL": "https://price.bisq.wiz.biz/getAllMarketPrices"
   }
diff --git a/backend/src/api/fiat-conversion.ts b/backend/src/api/fiat-conversion.ts
index df10d7698..be5331d7a 100644
--- a/backend/src/api/fiat-conversion.ts
+++ b/backend/src/api/fiat-conversion.ts
@@ -20,9 +20,9 @@ class FiatConversion {
   public startService() {
     logger.info('Starting currency rates service');
     if (config.SOCKS5PROXY.ENABLED) {
-      logger.info(`Currency rates service will be queried over the Tor network using ${config.PRICENODE.TOR_URL}`);
+      logger.info(`Currency rates service will be queried over the Tor network using ${config.PRICE_DATA_SERVER.TOR_URL}`);
     } else {
-      logger.info(`Currency rates service will be queried over clearnet using ${config.PRICENODE.CLEARNET_URL}`);
+      logger.info(`Currency rates service will be queried over clearnet using ${config.PRICE_DATA_SERVER.CLEARNET_URL}`);
     }
     setInterval(this.updateCurrency.bind(this), 1000 * config.MEMPOOL.PRICE_FEED_UPDATE_INTERVAL);
     this.updateCurrency();
@@ -53,11 +53,11 @@ class FiatConversion {
         }
 
         const agent = new SocksProxyAgent(socksOptions);
-        fiatConversionUrl = config.PRICENODE.TOR_URL;
+        fiatConversionUrl = config.PRICE_DATA_SERVER.TOR_URL;
         logger.info('Querying currency rates service...');
         response = await axios.get(fiatConversionUrl, { httpAgent: agent, headers: headers, timeout: 30000 });
       } else {
-        fiatConversionUrl = config.PRICENODE.CLEARNET_URL;
+        fiatConversionUrl = config.PRICE_DATA_SERVER.CLEARNET_URL;
         logger.info('Querying currency rates service...');
         response = await axios.get(fiatConversionUrl, { headers: headers, timeout: 10000 });
       }
diff --git a/backend/src/config.ts b/backend/src/config.ts
index f2787977b..040d94bf1 100644
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -69,7 +69,7 @@ interface IConfig {
     USERNAME: string;
     PASSWORD: string;
   };
-  PRICENODE: {
+  PRICE_DATA_SERVER: {
     TOR_URL: string;
     CLEARNET_URL: string;
   };
@@ -146,7 +146,7 @@ const defaults: IConfig = {
     'USERNAME': '',
     'PASSWORD': ''
   },
-  "PRICENODE": {
+  "PRICE_DATA_SERVER": {
     'TOR_URL': 'http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices',
     'CLEARNET_URL': 'https://price.bisq.wiz.biz/getAllMarketPrices'
   }
@@ -163,7 +163,7 @@ class Config implements IConfig {
   STATISTICS: IConfig['STATISTICS'];
   BISQ: IConfig['BISQ'];
   SOCKS5PROXY: IConfig['SOCKS5PROXY'];
-  PRICENODE: IConfig['PRICENODE'];
+  PRICE_DATA_SERVER: IConfig['PRICE_DATA_SERVER'];
 
   constructor() {
     const configs = this.merge(configFile, defaults);
@@ -177,7 +177,7 @@ class Config implements IConfig {
     this.STATISTICS = configs.STATISTICS;
     this.BISQ = configs.BISQ;
     this.SOCKS5PROXY = configs.SOCKS5PROXY;
-    this.PRICENODE = configs.PRICENODE;
+    this.PRICE_DATA_SERVER = configs.PRICE_DATA_SERVER;
   }
 
   merge = (...objects: object[]): IConfig => {
diff --git a/docker/backend/mempool-config.json b/docker/backend/mempool-config.json
index 5a069455d..b97c9e571 100644
--- a/docker/backend/mempool-config.json
+++ b/docker/backend/mempool-config.json
@@ -66,8 +66,8 @@
     "USERNAME": "__SOCKS5PROXY_USERNAME__",
     "PASSWORD": "__SOCKS5PROXY_PASSWORD__"
   },
-  "PRICENODE": {
-    "TOR_URL": "__PRICENODE_TOR_URL__",
-    "CLEARNET_URL": "__PRICENODE_CLEARNET_URL__"
+  "PRICE_DATA_SERVER": {
+    "TOR_URL": "__PRICE_DATA_SERVER_TOR_URL__",
+    "CLEARNET_URL": "__PRICE_DATA_SERVER_CLEARNET_URL__"
   }
 }
diff --git a/docker/backend/start.sh b/docker/backend/start.sh
index d1422bf45..d12978970 100644
--- a/docker/backend/start.sh
+++ b/docker/backend/start.sh
@@ -68,9 +68,9 @@ __SOCKS5PROXY_PORT__=${SOCKS5PROXY_PORT:=9050}
 __SOCKS5PROXY_USERNAME__=${SOCKS5PROXY_USERNAME:=""}
 __SOCKS5PROXY_PASSWORD__=${SOCKS5PROXY_PASSWORD:=""}
 
-# PRICENODE
-__PRICENODE_TOR_URL__=${PRICENODE_TOR_URL:=http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices}
-__PRICENODE_CLEARNET_URL__=${PRICENODE_CLEARNET_URL:=https://price.bisq.wiz.biz/getAllMarketPrices}
+# PRICE_DATA_SERVER
+__PRICE_DATA_SERVER_TOR_URL__=${PRICE_DATA_SERVER_TOR_URL:=http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices}
+__PRICE_DATA_SERVER_CLEARNET_URL__=${PRICE_DATA_SERVER_CLEARNET_URL:=https://price.bisq.wiz.biz/getAllMarketPrices}
 
 mkdir -p "${__MEMPOOL_CACHE_DIR__}"
 
@@ -132,7 +132,7 @@ sed -i "s/__SOCKS5PROXY_PORT__/${__SOCKS5PROXY_PORT__}/g" mempool-config.json
 sed -i "s/__SOCKS5PROXY_USERNAME__/${__SOCKS5PROXY_USERNAME__}/g" mempool-config.json
 sed -i "s/__SOCKS5PROXY_PASSWORD__/${__SOCKS5PROXY_PASSWORD__}/g" mempool-config.json
 
-sed -i "s!__PRICENODE_TOR_URL__!${__PRICENODE_TOR_URL__}!g" mempool-config.json
-sed -i "s!__PRICENODE_CLEARNET_URL__!${__PRICENODE_CLEARNET_URL__}!g" mempool-config.json
+sed -i "s!__PRICE_DATA_SERVER_TOR_URL__!${__PRICE_DATA_SERVER_TOR_URL__}!g" mempool-config.json
+sed -i "s!__PRICE_DATA_SERVER_CLEARNET_URL__!${__PRICE_DATA_SERVER_CLEARNET_URL__}!g" mempool-config.json
 
 node /backend/dist/index.js

From 4afeb3998a247dbd49bdfdbbd1631268ca5eb8d9 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sat, 5 Feb 2022 15:38:03 -0800
Subject: [PATCH 08/25] Change fiat conversion logs to DEBUG

---
 backend/src/api/fiat-conversion.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/src/api/fiat-conversion.ts b/backend/src/api/fiat-conversion.ts
index be5331d7a..f28f34a0b 100644
--- a/backend/src/api/fiat-conversion.ts
+++ b/backend/src/api/fiat-conversion.ts
@@ -54,11 +54,11 @@ class FiatConversion {
 
         const agent = new SocksProxyAgent(socksOptions);
         fiatConversionUrl = config.PRICE_DATA_SERVER.TOR_URL;
-        logger.info('Querying currency rates service...');
+        logger.debug('Querying currency rates service...');
         response = await axios.get(fiatConversionUrl, { httpAgent: agent, headers: headers, timeout: 30000 });
       } else {
         fiatConversionUrl = config.PRICE_DATA_SERVER.CLEARNET_URL;
-        logger.info('Querying currency rates service...');
+        logger.debug('Querying currency rates service...');
         response = await axios.get(fiatConversionUrl, { headers: headers, timeout: 10000 });
       }
 
@@ -68,7 +68,7 @@ class FiatConversion {
         'USD': usd.price,
       };
 
-      logger.info(`USD Conversion Rate: ${usd.price}`);
+      logger.debug(`USD Conversion Rate: ${usd.price}`);
 
       if (this.ratesChangedCallback) {
         this.ratesChangedCallback(this.conversionRates);

From ad38e5fa2dcc12c2dff5707501622e0d48d9d7d7 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sun, 6 Feb 2022 15:10:35 -0800
Subject: [PATCH 09/25] Add mining pools resources route

---
 frontend/proxy.conf.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/proxy.conf.js b/frontend/proxy.conf.js
index 4a0489c77..77a77bb5a 100644
--- a/frontend/proxy.conf.js
+++ b/frontend/proxy.conf.js
@@ -20,8 +20,8 @@ try {
 
 PROXY_CONFIG = [
     {
-        context: ['*', 
-        '/api/**', '!/api/v1/ws', 
+        context: ['*',
+        '/api/**', '!/api/v1/ws',
         '!/bisq', '!/bisq/**', '!/bisq/',
         '!/liquid', '!/liquid/**', '!/liquid/',
         '!/liquidtestnet', '!/liquidtestnet/**', '!/liquidtestnet/',
@@ -65,7 +65,13 @@ PROXY_CONFIG = [
         ws: true,
         secure: false,
         changeOrigin: true
-    }
+    },
+    {
+      context: ['/resources/mining-pools/**'],
+      target: "https://mempool.space",
+      secure: false,
+      changeOrigin: true
+  }
 ];
 
 if (configContent && configContent.BASE_MODULE == "liquid") {

From 4af0a75aad1494828bdd55e1e443410d80f38b94 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sun, 6 Feb 2022 15:11:13 -0800
Subject: [PATCH 10/25] Add new proxy config for staging

---
 frontend/proxy.conf.staging.js | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 frontend/proxy.conf.staging.js

diff --git a/frontend/proxy.conf.staging.js b/frontend/proxy.conf.staging.js
new file mode 100644
index 000000000..098edb619
--- /dev/null
+++ b/frontend/proxy.conf.staging.js
@@ -0,0 +1,11 @@
+const fs = require('fs');
+
+let PROXY_CONFIG = require('./proxy.conf');
+
+PROXY_CONFIG.forEach(entry => {
+  entry.target = entry.target.replace("mempool.space", "mempool.ninja");
+  entry.target = entry.target.replace("liquid.network", "liquid.place");
+  entry.target = entry.target.replace("bisq.markets", "bisq.ninja");
+});
+
+module.exports = PROXY_CONFIG;

From 18a7b13077d551b1ef95c44674dd7a7faf18df37 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sun, 6 Feb 2022 15:12:03 -0800
Subject: [PATCH 11/25] Add new targets to run locally hitting the staging
 backends

---
 frontend/angular.json | 6 ++++++
 frontend/package.json | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/angular.json b/frontend/angular.json
index c2ecbea23..1d2fe3e6b 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -233,6 +233,12 @@
               "disableHostCheck": true,
               "host": "0.0.0.0",
               "verbose": false
+            },
+            "local-staging": {
+              "proxyConfig": "proxy.conf.staging.js",
+              "disableHostCheck": true,
+              "host": "0.0.0.0",
+              "verbose": false
             }
           }
         },
diff --git a/frontend/package.json b/frontend/package.json
index 4ef9fb48b..b1723da19 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,9 +27,11 @@
     "serve": "npm run generate-config && ng serve -c local",
     "serve:stg": "npm run generate-config && ng serve -c staging",
     "serve:local-prod": "npm run generate-config && ng serve -c local-prod",
+    "serve:local-staging": "npm run generate-config && ng serve -c local-staging",
     "start": "npm run generate-config && npm run sync-assets-dev && ng serve -c local",
     "start:stg": "npm run generate-config && npm run sync-assets-dev && ng serve -c staging",
     "start:local-prod": "npm run generate-config && npm run sync-assets-dev && ng serve -c local-prod",
+    "start:local-staging": "npm run generate-config && npm run sync-assets-dev && ng serve -c local-staging",
     "start:mixed": "npm run generate-config && npm run sync-assets-dev && ng serve -c mixed",
     "build": "npm run generate-config && ng build --configuration production --localize && npm run sync-assets && npm run build-mempool.js",
     "sync-assets": "node sync-assets.js && rsync -av ./dist/mempool/browser/en-US/resources ./dist/mempool/browser/resources",
@@ -54,7 +56,10 @@
     "cypress:run": "cypress run",
     "cypress:run:record": "cypress run --record",
     "cypress:open:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:open",
-    "cypress:run:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:run:record"
+    "cypress:run:ci": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-prod 4200 cypress:run:record",
+    "cypress:open:ci:staging": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:open",
+    "cypress:run:ci:staging": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:run:record"
+
   },
   "dependencies": {
     "@angular-devkit/build-angular": "^13.1.2",

From 90784ea1eee8b472f25967e45445aa6081130d55 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sun, 6 Feb 2022 15:13:31 -0800
Subject: [PATCH 12/25] Update CI Cypress config to hit staging

---
 .github/workflows/cypress.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index 832efcbbf..9173f8827 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -26,7 +26,7 @@ jobs:
         with:
           working-directory: frontend
           build: npm run config:defaults:mempool
-          start: npm run start:local-prod
+          start: npm run start:local-staging
           wait-on: 'http://localhost:4200'
           wait-on-timeout: 120
           record: true
@@ -49,7 +49,7 @@ jobs:
         with:
           working-directory: frontend
           build: npm run config:defaults:liquid
-          start: npm run start:local-prod
+          start: npm run start:local-staging
           wait-on: 'http://localhost:4200'
           wait-on-timeout: 120
           record: true
@@ -71,7 +71,7 @@ jobs:
         with:
           working-directory: frontend
           build: npm run config:defaults:bisq
-          start: npm run start:local-prod
+          start: npm run start:local-staging
           wait-on: 'http://localhost:4200'
           wait-on-timeout: 120
           record: true

From 2e5c8bdfd33baaaaa75810f1054b561e448ae25a Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 01:20:26 +0400
Subject: [PATCH 13/25] Featured assets and asset groups

---
 backend/src/index.ts                          |  2 +
 backend/src/routes.ts                         | 20 ++++++
 frontend/src/app/app-routing.module.ts        | 35 +++++++--
 frontend/src/app/app.module.ts                |  8 ++-
 frontend/src/app/assets/assets.component.html | 71 -------------------
 .../src/app/assets/assets.component.spec.ts   | 25 -------
 .../asset-group/asset-group.component.html    | 26 +++++++
 .../asset-group/asset-group.component.scss    | 57 +++++++++++++++
 .../asset-group/asset-group.component.ts      | 45 ++++++++++++
 .../assets-featured.component.html            | 27 +++++++
 .../assets-featured.component.scss            | 46 ++++++++++++
 .../assets-featured.component.ts              | 34 +++++++++
 .../assets-nav/assets-nav.component.html      | 31 ++++++++
 .../assets-nav/assets-nav.component.scss      |  9 +++
 .../assets/assets-nav/assets-nav.component.ts | 23 ++++++
 .../components/assets/assets.component.html   | 52 ++++++++++++++
 .../assets/assets.component.scss              |  0
 .../assets/assets.component.ts                | 12 ++--
 frontend/src/app/services/api.service.ts      |  8 +++
 19 files changed, 421 insertions(+), 110 deletions(-)
 delete mode 100644 frontend/src/app/assets/assets.component.html
 delete mode 100644 frontend/src/app/assets/assets.component.spec.ts
 create mode 100644 frontend/src/app/components/assets/asset-group/asset-group.component.html
 create mode 100644 frontend/src/app/components/assets/asset-group/asset-group.component.scss
 create mode 100644 frontend/src/app/components/assets/asset-group/asset-group.component.ts
 create mode 100644 frontend/src/app/components/assets/assets-featured/assets-featured.component.html
 create mode 100644 frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
 create mode 100644 frontend/src/app/components/assets/assets-featured/assets-featured.component.ts
 create mode 100644 frontend/src/app/components/assets/assets-nav/assets-nav.component.html
 create mode 100644 frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
 create mode 100644 frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
 create mode 100644 frontend/src/app/components/assets/assets.component.html
 rename frontend/src/app/{ => components}/assets/assets.component.scss (100%)
 rename frontend/src/app/{ => components}/assets/assets.component.ts (94%)

diff --git a/backend/src/index.ts b/backend/src/index.ts
index f78c5922b..5dea199fc 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -319,7 +319,9 @@ class Server {
     if (Common.isLiquid()) {
       this.app
         .get(config.MEMPOOL.API_URL_PREFIX + 'assets/icons', routes.getAllLiquidIcon)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'assets/featured', routes.$getAllFeaturedLiquidAssets)
         .get(config.MEMPOOL.API_URL_PREFIX + 'asset/:assetId/icon', routes.getLiquidIcon)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'asset-group/:id', routes.$getAssetGroup)
       ;
     }
 
diff --git a/backend/src/routes.ts b/backend/src/routes.ts
index 044f9a3ac..e937678cc 100644
--- a/backend/src/routes.ts
+++ b/backend/src/routes.ts
@@ -21,6 +21,7 @@ import bitcoinClient from './api/bitcoin/bitcoin-client';
 import elementsParser from './api/liquid/elements-parser';
 import icons from './api/liquid/icons';
 import miningStats from './api/mining';
+import axios from 'axios';
 
 class Routes {
   constructor() {}
@@ -855,6 +856,25 @@ class Routes {
       res.status(404).send('Asset icons not found');
     }
   }
+
+  public async $getAllFeaturedLiquidAssets(req: Request, res: Response) {
+    try {
+      const response = await axios.get('https://mempool.space/api/v1/assets/featured', { responseType: 'stream', timeout: 10000 });
+      response.data.pipe(res);
+    } catch (e) {
+      res.status(500).end();
+    }
+  }
+
+  public async $getAssetGroup(req: Request, res: Response) {
+    try {
+      const response = await axios.get('https://mempool.space/api/v1/asset-group/' + parseInt(req.params.id, 10),
+        { responseType: 'stream', timeout: 10000 });
+      response.data.pipe(res);
+    } catch (e) {
+      res.status(500).end();
+    }
+  }
 }
 
 export default new Routes();
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 36a53781f..243691661 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -10,7 +10,7 @@ import { TelevisionComponent } from './components/television/television.componen
 import { StatisticsComponent } from './components/statistics/statistics.component';
 import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
 import { AssetComponent } from './components/asset/asset.component';
-import { AssetsComponent } from './assets/assets.component';
+import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.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';
@@ -23,6 +23,9 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
 import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
 import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
 import { PoolRankingComponent } from './components/pool-ranking/pool-ranking.component';
+import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
+import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
+import { AssetsComponent } from './components/assets/assets.component';
 
 let routes: Routes = [
   {
@@ -343,13 +346,31 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
         path: 'address/:id',
         component: AddressComponent
       },
-      {
-        path: 'asset/:id',
-        component: AssetComponent
-      },
       {
         path: 'assets',
-        component: AssetsComponent,
+        component: AssetsNavComponent,
+        children: [
+          {
+            path: 'featured',
+            component: AssetsFeaturedComponent,
+          },
+          {
+            path: 'all',
+            component: AssetsComponent,
+          },
+          {
+            path: 'asset/:id',
+            component: AssetComponent
+          },
+          {
+            path: 'asset-group/:id',
+            component: AssetGroupComponent
+          },
+          {
+            path: '**',
+            redirectTo: 'featured'
+          }
+        ]
       },
       {
         path: 'docs/api/:type',
@@ -440,7 +461,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
           },
           {
             path: 'assets',
-            component: AssetsComponent,
+            component: AssetsNavComponent,
           },
           {
             path: 'docs/api/:type',
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index f9eae0666..97fc16204 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -40,7 +40,8 @@ import { MempoolGraphComponent } from './components/mempool-graph/mempool-graph.
 import { PoolRankingComponent } from './components/pool-ranking/pool-ranking.component';
 import { LbtcPegsGraphComponent } from './components/lbtc-pegs-graph/lbtc-pegs-graph.component';
 import { AssetComponent } from './components/asset/asset.component';
-import { AssetsComponent } from './assets/assets.component';
+import { AssetsComponent } from './components/assets/assets.component';
+import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
 import { MinerComponent } from './components/miner/miner.component';
 import { SharedModule } from './shared/shared.module';
@@ -64,6 +65,8 @@ import { LanguageService } from './services/language.service';
 import { SponsorComponent } from './components/sponsor/sponsor.component';
 import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
+import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
 
 @NgModule({
   declarations: [
@@ -110,6 +113,9 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
     PushTransactionComponent,
     DocsComponent,
     ApiDocsNavComponent,
+    AssetsNavComponent,
+    AssetsFeaturedComponent,
+    AssetGroupComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
diff --git a/frontend/src/app/assets/assets.component.html b/frontend/src/app/assets/assets.component.html
deleted file mode 100644
index c8962cd15..000000000
--- a/frontend/src/app/assets/assets.component.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<div class="container-xl">
-  <div class="title-asset">
-    <h1 i18n="Registered assets page header">Registered assets</h1>
-  </div>
-  <div class="clearfix"></div>
-
-  <form [formGroup]="searchForm" class="form-inline">
-    <div class="input-group mb-2">
-      <input style="width: 250px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
-      <div class="input-group-append">
-        <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
-      </div>
-    </div>
-  </form>
-
-  <ng-container *ngIf="(assets$ | async) as filteredAssets; else isLoading">
-    <table class="table table-borderless table-striped">
-      <thead>
-        <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>
-      </thead>
-      <tbody>
-        <tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
-          <td class="td-name"><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a></td>
-          <td>{{ asset.ticker }}</td>
-          <td class="d-none d-md-block">{{ asset.entity && asset.entity.domain }}</td>
-          <td><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
-        </tr>
-      </tbody>
-    </table>
-
-    <br>
-
-    <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
-
-  </ng-container>
-
-  <ng-template #isLoading>
-
-    <table class="table table-borderless table-striped">
-      <thead>
-        <th 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>
-      </thead>
-      <tbody>
-        <tr *ngFor="let dummy of [0,0,0,0,0,0,0,0,0,0]">
-          <td><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-          <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
-          <td><span class="skeleton-loader"></span></td>
-        </tr>
-      </tbody>
-    </table>
-
-  </ng-template>
-
-  <ng-template [ngIf]="error">
-    <div class="text-center">
-      <ng-container i18n="Asset data load error">Error loading assets data.</ng-container>
-      <br>
-      <i>{{ error.error }}</i>
-    </div>
-  </ng-template>
-
-</div>
-
-<br>
diff --git a/frontend/src/app/assets/assets.component.spec.ts b/frontend/src/app/assets/assets.component.spec.ts
deleted file mode 100644
index ed39b7122..000000000
--- a/frontend/src/app/assets/assets.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AssetsComponent } from './assets.component';
-
-describe('AssetsComponent', () => {
-  let component: AssetsComponent;
-  let fixture: ComponentFixture<AssetsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AssetsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AssetsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.html b/frontend/src/app/components/assets/asset-group/asset-group.component.html
new file mode 100644
index 000000000..a6858b76f
--- /dev/null
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.html
@@ -0,0 +1,26 @@
+<div *ngIf="group$ | async as group">
+  
+  <div class="main-title">
+    <h2>{{ group.group.name }}</h2>
+
+    <div class="sub-title">Group of {{ group.group.assets.length | number }} assets</div>
+  </div>
+
+
+  <div class="clearfix"></div>
+
+  <br>
+
+  <div class="featuredBox">
+    <div *ngFor="let asset of group.assets">
+      <div class="card">
+        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
+        <div class="title">
+          <a [routerLink]="['/assets/asset/', group.asset_id]">{{ asset.name }}</a>
+        </div>
+        <div class="ticker">{{ asset.ticker }}</div>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.scss b/frontend/src/app/components/assets/asset-group/asset-group.component.scss
new file mode 100644
index 000000000..7a0735a24
--- /dev/null
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.scss
@@ -0,0 +1,57 @@
+.image {
+  width: 150px;
+  float: left;
+}
+
+.main-title {
+  float: left
+}
+
+.sub-title {
+  color: grey;
+}
+
+.featuredBox {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  gap: 27px;
+}
+
+.card {
+  background-color: #1d1f31;
+  width: 200px;
+  height: 200px;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.sub-title {
+  color: grey;
+}
+
+.assetIcon {
+  width: 100px;
+  height: 100px;
+}
+
+.image {
+  width: 100px;
+  height: 100px;
+  align-self: center;
+}
+
+.view-link {
+  margin-top: 30px;
+}
+
+.ticker {
+  color: grey;
+}
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.ts b/frontend/src/app/components/assets/asset-group/asset-group.component.ts
new file mode 100644
index 000000000..0143121b5
--- /dev/null
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { combineLatest, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+import { AssetsService } from 'src/app/services/assets.service';
+
+@Component({
+  selector: 'app-asset-group',
+  templateUrl: './asset-group.component.html',
+  styleUrls: ['./asset-group.component.scss']
+})
+export class AssetGroupComponent implements OnInit {
+  group$: Observable<any>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private apiService: ApiService,
+    private assetsService: AssetsService,
+  ) { }
+
+  ngOnInit(): void {
+    this.group$ = this.route.paramMap
+      .pipe(
+        switchMap((params: ParamMap) => {
+          return combineLatest([
+            this.assetsService.getAssetsJson$,
+            this.apiService.getAssetGroup$(params.get('id')),
+          ]);
+        }),
+        map(([assets, group]) => {
+          const items = [];
+          // @ts-ignore
+          for (const item of group.assets) {
+            items.push(assets[item]);
+          }
+          console.log(group);
+          return {
+            group: group,
+            assets: items
+          };
+        })
+      );
+  }
+}
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
new file mode 100644
index 000000000..bb5ab7f3c
--- /dev/null
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
@@ -0,0 +1,27 @@
+<div *ngIf="featuredAssets$ | async as featured; else loading" class="featuredBox">
+    
+  <div *ngFor="let group of featured.featured">
+    <div class="card">
+      <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
+        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
+        <div class="title"><a [routerLink]="['/assets/asset-group', group.id]">{{ group.name }}</a></div>
+        <div class="sub-title">Group of {{ group.assets.length | number }} assets</div>
+      </ng-template>
+      <ng-template #singleAsset>
+        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
+        <div class="title">
+          <a [routerLink]="['/assets/asset/', group.asset]">{{ group.name }}</a>
+        </div>
+        <div class="ticker">{{ group.ticker }}</div>
+      </ng-template>
+    </div>
+  </div>
+
+</div>
+
+<ng-template #loading>
+  <br>
+  <div class="text-center loadingGraphs">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
new file mode 100644
index 000000000..41be2b748
--- /dev/null
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
@@ -0,0 +1,46 @@
+
+.featuredBox {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  gap: 27px;
+}
+
+.card {
+  background-color: #1d1f31;
+  width: 200px;
+  height: 200px;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.sub-title {
+  color: grey;
+  font-size: 12px;
+}
+
+.assetIcon {
+  width: 100px;
+  height: 100px;
+}
+
+.image {
+  width: 100px;
+  height: 100px;
+  align-self: center;
+}
+
+.view-link {
+  margin-top: 30px;
+}
+
+.ticker {
+  color: grey;
+}
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts b/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts
new file mode 100644
index 000000000..23c84679b
--- /dev/null
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+import { AssetsService } from 'src/app/services/assets.service';
+
+@Component({
+  selector: 'app-assets-featured',
+  templateUrl: './assets-featured.component.html',
+  styleUrls: ['./assets-featured.component.scss']
+})
+export class AssetsFeaturedComponent implements OnInit {
+  featuredAssets$: Observable<any>;
+
+  constructor(
+    private apiService: ApiService,
+    private assetsService: AssetsService,
+  ) { }
+
+  ngOnInit(): void {
+    this.featuredAssets$ = combineLatest([
+      this.assetsService.getAssetsJson$,
+      this.apiService.listFeaturedAssets$(),
+    ]).pipe(
+      map(([assetsJson, featured]) => {
+        return {
+          assetsJson: assetsJson,
+          featured: featured,
+        };
+      })
+    );
+  }
+
+}
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
new file mode 100644
index 000000000..9ee7ac72a
--- /dev/null
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
@@ -0,0 +1,31 @@
+<div class="container-xl">
+  <div class="title-asset">
+    <h1 i18n="Assets page header">Assets</h1>
+  </div>
+
+  <ul class="nav nav-pills">
+    <li class="nav-item">
+      <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
+      
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
+    </li>
+  </ul>
+
+  <form [formGroup]="searchForm" class="form-inline">
+    <div class="input-group mb-2">
+      <input style="width: 350px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
+      <div class="input-group-append">
+        <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
+      </div>
+    </div>
+  </form>
+
+  <div class="clearfix"></div>
+
+  <router-outlet></router-outlet>
+
+</div>
+
+<br>
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss b/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
new file mode 100644
index 000000000..530ed7bdf
--- /dev/null
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
@@ -0,0 +1,9 @@
+ul {
+  margin-bottom: 20px;
+  float: left;
+
+}
+
+form {
+  float: right;
+}
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts b/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
new file mode 100644
index 000000000..e1b31372b
--- /dev/null
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-assets-nav',
+  templateUrl: './assets-nav.component.html',
+  styleUrls: ['./assets-nav.component.scss']
+})
+export class AssetsNavComponent implements OnInit {
+  activeTab = 0;
+  searchForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+  ) { }
+
+  ngOnInit(): void {
+    this.searchForm = this.formBuilder.group({
+      searchText: [{ value: '', disabled: true }, Validators.required]
+    });
+  }
+
+}
diff --git a/frontend/src/app/components/assets/assets.component.html b/frontend/src/app/components/assets/assets.component.html
new file mode 100644
index 000000000..ec9ac079f
--- /dev/null
+++ b/frontend/src/app/components/assets/assets.component.html
@@ -0,0 +1,52 @@
+<ng-container *ngIf="(assets$ | async) as filteredAssets; else isLoading">
+  <table class="table table-borderless table-striped">
+    <thead>
+      <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>
+    </thead>
+    <tbody>
+      <tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
+        <td class="td-name"><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a></td>
+        <td>{{ asset.ticker }}</td>
+        <td class="d-none d-md-block">{{ asset.entity && asset.entity.domain }}</td>
+        <td><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <br>
+
+  <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
+
+</ng-container>
+
+<ng-template #isLoading>
+
+  <table class="table table-borderless table-striped">
+    <thead>
+      <th 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>
+    </thead>
+    <tbody>
+      <tr *ngFor="let dummy of [0,0,0,0,0,0,0,0,0,0]">
+        <td><span class="skeleton-loader"></span></td>
+        <td><span class="skeleton-loader"></span></td>
+        <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
+        <td><span class="skeleton-loader"></span></td>
+      </tr>
+    </tbody>
+  </table>
+
+</ng-template>
+
+<ng-template [ngIf]="error">
+  <div class="text-center">
+    <ng-container i18n="Asset data load error">Error loading assets data.</ng-container>
+    <br>
+    <i>{{ error.error }}</i>
+  </div>
+</ng-template>
diff --git a/frontend/src/app/assets/assets.component.scss b/frontend/src/app/components/assets/assets.component.scss
similarity index 100%
rename from frontend/src/app/assets/assets.component.scss
rename to frontend/src/app/components/assets/assets.component.scss
diff --git a/frontend/src/app/assets/assets.component.ts b/frontend/src/app/components/assets/assets.component.ts
similarity index 94%
rename from frontend/src/app/assets/assets.component.ts
rename to frontend/src/app/components/assets/assets.component.ts
index 49c42d76e..d5cbd10ab 100644
--- a/frontend/src/app/assets/assets.component.ts
+++ b/frontend/src/app/components/assets/assets.component.ts
@@ -1,13 +1,13 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { AssetsService } from '../services/assets.service';
+import { AssetsService } from 'src/app/services/assets.service';
 import { environment } from 'src/environments/environment';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 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';
-import { StateService } from '../services/state.service';
+import { AssetExtended } from 'src/app/interfaces/electrs.interface';
+import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-assets',
@@ -23,9 +23,9 @@ export class AssetsComponent implements OnInit {
   searchForm: FormGroup;
   assets$: Observable<AssetExtended[]>;
 
+  page = 1;
   error: any;
 
-  page = 1;
   itemsPerPage: number;
   contentSpace = window.innerHeight - (250 + 200);
   fiveItemsPxSize = 250;
@@ -49,7 +49,7 @@ export class AssetsComponent implements OnInit {
 
     this.assets$ = combineLatest([
       this.assetsService.getAssetsJson$,
-      this.route.queryParams
+      this.route.queryParams,
     ])
     .pipe(
       take(1),
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index 03200c64c..3d9125c25 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -117,6 +117,14 @@ export class ApiService {
     return this.httpClient.get<LiquidPegs[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/pegs/month');
   }
 
+  listFeaturedAssets$(): Observable<any[]> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/assets/featured');
+  }
+
+  getAssetGroup$(id: string): Observable<any> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/asset-group/' + id);
+  }
+
   postTransaction$(hexPayload: string): Observable<any> {
     return this.httpClient.post<any>(this.apiBaseUrl + this.apiBasePath + '/api/tx', hexPayload, { responseType: 'text' as 'json'});
   }

From d33c12cdee3bd2ae0708a1dde3c7e3767360063c Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 03:31:50 +0400
Subject: [PATCH 14/25] Asset search

---
 .../assets-nav/assets-nav.component.html      |   2 +-
 .../assets/assets-nav/assets-nav.component.ts |  78 ++++++++++++-
 .../app/components/assets/assets.component.ts | 103 +++---------------
 frontend/src/app/services/assets.service.ts   |  27 ++++-
 4 files changed, 118 insertions(+), 92 deletions(-)

diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
index 9ee7ac72a..73d391254 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
@@ -15,7 +15,7 @@
 
   <form [formGroup]="searchForm" class="form-inline">
     <div class="input-group mb-2">
-      <input style="width: 350px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
+      <input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
       <div class="input-group-append">
         <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
       </div>
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts b/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
index e1b31372b..d7280d50b 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
@@ -1,5 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { merge, Observable, of, Subject } from 'rxjs';
+import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
+import { AssetExtended } from 'src/app/interfaces/electrs.interface';
+import { AssetsService } from 'src/app/services/assets.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-assets-nav',
@@ -7,16 +17,78 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
   styleUrls: ['./assets-nav.component.scss']
 })
 export class AssetsNavComponent implements OnInit {
-  activeTab = 0;
+  @ViewChild('instance', {static: true}) instance: NgbTypeahead;
+  nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
   searchForm: FormGroup;
+  assetsCache: AssetExtended[];
+
+  typeaheadSearchFn: ((text: Observable<string>) => Observable<readonly any[]>);
+  formatterFn = (asset: AssetExtended) => asset.name + ' (' + asset.ticker  + ')';
+  focus$ = new Subject<string>();
+  click$ = new Subject<string>();
+
+  itemsPerPage = 15;
 
   constructor(
     private formBuilder: FormBuilder,
+    private seoService: SeoService,
+    private router: Router,
+    private assetsService: AssetsService,
+    private stateService: StateService,
+    private relativeUrlPipe: RelativeUrlPipe,
   ) { }
 
   ngOnInit(): void {
+    this.typeaheadSearchFn = this.typeaheadSearch;
+
     this.searchForm = this.formBuilder.group({
-      searchText: [{ value: '', disabled: true }, Validators.required]
+      searchText: [{ value: '', disabled: false }, Validators.required]
+    });
+  }
+
+  typeaheadSearch = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(
+      distinctUntilChanged()
+    );
+    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
+    const inputFocus$ = this.focus$;
+
+    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$)
+      .pipe(
+        switchMap((searchText) => {
+          if (!searchText.length) {
+            return of([]);
+          }
+          return this.assetsService.getAssetsJson$.pipe(
+            map((assets) => {
+              if (searchText.length ) {
+                const filteredAssets = assets.filter((asset) => asset.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
+                  || (asset.ticker || '').toLowerCase().indexOf(searchText.toLowerCase()) > -1
+                  || (asset.entity && asset.entity.domain || '').toLowerCase().indexOf(searchText.toLowerCase()) > -1);
+                assets = filteredAssets;
+                return filteredAssets.slice(0, this.itemsPerPage);
+              } else {
+                return assets.slice(0, this.itemsPerPage);
+              }
+            })
+          )
+        }),
+      );
+  }
+
+  itemSelected() {
+    setTimeout(() => this.search());
+  }
+
+  search() {
+    const searchText = this.searchForm.value.searchText;
+    this.navigate('/assets/asset/', searchText.asset_id);
+  }
+
+  navigate(url: string, searchText: string, extras?: any) {
+    this.router.navigate([this.relativeUrlPipe.transform(url), searchText], extras);
+    this.searchForm.setValue({
+      searchText: '',
     });
   }
 
diff --git a/frontend/src/app/components/assets/assets.component.ts b/frontend/src/app/components/assets/assets.component.ts
index d5cbd10ab..542765033 100644
--- a/frontend/src/app/components/assets/assets.component.ts
+++ b/frontend/src/app/components/assets/assets.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { AssetsService } from 'src/app/services/assets.service';
 import { environment } from 'src/environments/environment';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { distinctUntilChanged, map, filter, mergeMap, tap, take } from 'rxjs/operators';
+import { FormGroup } from '@angular/forms';
+import { filter, map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
-import { merge, combineLatest, Observable } from 'rxjs';
+import { combineLatest, Observable } from 'rxjs';
 import { AssetExtended } from 'src/app/interfaces/electrs.interface';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
@@ -32,7 +32,6 @@ export class AssetsComponent implements OnInit {
 
   constructor(
     private assetsService: AssetsService,
-    private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private seoService: SeoService,
@@ -43,56 +42,20 @@ export class AssetsComponent implements OnInit {
     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.assets$ = combineLatest([
       this.assetsService.getAssetsJson$,
       this.route.queryParams,
     ])
-    .pipe(
-      take(1),
-      mergeMap(([assets, qp]) => {
-        this.assets = Object.values(assets);
-        if (this.stateService.network === 'liquid') {
-          // @ts-ignore
-          this.assets.push({
-            name: 'Liquid Bitcoin',
-            ticker: 'L-BTC',
-            asset_id: this.nativeAssetId,
-          });
-        } else if (this.stateService.network === 'liquidtestnet') {
-          // @ts-ignore
-          this.assets.push({
-            name: 'Test Liquid Bitcoin',
-            ticker: 'tL-BTC',
-            asset_id: this.nativeAssetId,
-          });
-        }
+      .pipe(
+        take(1),
+        switchMap(([assets, qp]) => {
+          this.assets = assets;
 
-        this.assets = this.assets.sort((a: any, b: any) => a.name.localeCompare(b.name));
-        this.assetsCache = this.assets;
-        this.searchForm.get('searchText').enable();
-
-        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
+          return this.route.queryParams
             .pipe(
               filter((queryParams) => {
                 const newPage = parseInt(queryParams.page, 10);
-                if (newPage !== this.page || queryParams.search !== this.searchForm.get('searchText').value) {
+                if (newPage !== this.page) {
                   return true;
                 }
                 return false;
@@ -104,38 +67,19 @@ export class AssetsComponent implements OnInit {
                 } 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;
+            );
+        }),
+        map(() => {
+          const start = (this.page - 1) * this.itemsPerPage;
           return this.assets.slice(start, this.itemsPerPage + start);
-        }
-      })
-    );
+        })
+      );
   }
 
   pageChange(page: number) {
-    const queryParams = { page: page, search: this.searchForm.get('searchText').value };
-    if (queryParams.search === '') {
-      queryParams.search = null;
-    }
+    const queryParams = { page: page };
     if (queryParams.page === 1) {
       queryParams.page = null;
     }
@@ -147,21 +91,6 @@ export class AssetsComponent implements OnInit {
     });
   }
 
-  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) {
     return asset.asset_id;
   }
diff --git a/frontend/src/app/services/assets.service.ts b/frontend/src/app/services/assets.service.ts
index 260a48b7b..d5693abf8 100644
--- a/frontend/src/app/services/assets.service.ts
+++ b/frontend/src/app/services/assets.service.ts
@@ -3,12 +3,16 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map, shareReplay, switchMap } from 'rxjs/operators';
 import { StateService } from './state.service';
+import { environment } from 'src/environments/environment';
+import { AssetExtended } from '../interfaces/electrs.interface';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AssetsService {
-  getAssetsJson$: Observable<any>;
+  nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
+
+  getAssetsJson$: Observable<AssetExtended[]>;
   getAssetsMinimalJson$: Observable<any>;
   getMiningPools$: Observable<any>;
 
@@ -24,6 +28,27 @@ export class AssetsService {
     this.getAssetsJson$ = this.stateService.networkChanged$
       .pipe(
         switchMap(() => this.httpClient.get(`${apiBaseUrl}/resources/assets${this.stateService.network === 'liquidtestnet' ? '-testnet' : ''}.json`)),
+        map((rawAssets) => {
+          const assets: AssetExtended[] = Object.values(rawAssets);
+  
+          if (this.stateService.network === 'liquid') {
+            // @ts-ignore
+            assets.push({
+              name: 'Liquid Bitcoin',
+              ticker: 'L-BTC',
+              asset_id: this.nativeAssetId,
+            });
+          } else if (this.stateService.network === 'liquidtestnet') {
+            // @ts-ignore
+            assets.push({
+              name: 'Test Liquid Bitcoin',
+              ticker: 'tL-BTC',
+              asset_id: this.nativeAssetId,
+            });
+          }
+  
+          return assets.sort((a: any, b: any) => a.name.localeCompare(b.name));
+        }),
         shareReplay(1),
       );
     this.getAssetsMinimalJson$ = this.stateService.networkChanged$

From 91082f27e7186d37afc945350e9fe5ab52157c56 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 04:18:56 +0400
Subject: [PATCH 15/25] SEO and various render fixes.

---
 .../src/app/components/asset/asset.component.ts |  1 +
 .../assets/asset-group/asset-group.component.ts |  3 +--
 .../assets-featured.component.html              |  2 +-
 .../assets-featured.component.ts                | 17 ++---------------
 .../assets/assets-nav/assets-nav.component.ts   |  6 +++---
 .../app/components/assets/assets.component.ts   |  2 +-
 frontend/src/app/services/assets.service.ts     |  7 +++++--
 7 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/components/asset/asset.component.ts b/frontend/src/app/components/asset/asset.component.ts
index ecb216052..e57bbee7a 100644
--- a/frontend/src/app/components/asset/asset.component.ts
+++ b/frontend/src/app/components/asset/asset.component.ts
@@ -63,6 +63,7 @@ export class AssetComponent implements OnInit, OnDestroy {
       .pipe(
         switchMap((params: ParamMap) => {
           this.error = undefined;
+          this.imageError = false;
           this.isLoadingAsset = true;
           this.loadedConfirmedTxCount = 0;
           this.asset = null;
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.ts b/frontend/src/app/components/assets/asset-group/asset-group.component.ts
index 0143121b5..29cb10dc7 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.ts
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.ts
@@ -32,9 +32,8 @@ export class AssetGroupComponent implements OnInit {
           const items = [];
           // @ts-ignore
           for (const item of group.assets) {
-            items.push(assets[item]);
+            items.push(assets.objects[item]);
           }
-          console.log(group);
           return {
             group: group,
             assets: items
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
index bb5ab7f3c..937ca8113 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="featuredAssets$ | async as featured; else loading" class="featuredBox">
     
-  <div *ngFor="let group of featured.featured">
+  <div *ngFor="let group of featured">
     <div class="card">
       <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
         <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts b/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts
index 23c84679b..db16a8f2b 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts
@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { combineLatest, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 import { ApiService } from 'src/app/services/api.service';
-import { AssetsService } from 'src/app/services/assets.service';
 
 @Component({
   selector: 'app-assets-featured',
@@ -14,21 +12,10 @@ export class AssetsFeaturedComponent implements OnInit {
 
   constructor(
     private apiService: ApiService,
-    private assetsService: AssetsService,
   ) { }
 
   ngOnInit(): void {
-    this.featuredAssets$ = combineLatest([
-      this.assetsService.getAssetsJson$,
-      this.apiService.listFeaturedAssets$(),
-    ]).pipe(
-      map(([assetsJson, featured]) => {
-        return {
-          assetsJson: assetsJson,
-          featured: featured,
-        };
-      })
-    );
+    this.featuredAssets$ = this.apiService.listFeaturedAssets$();
   }
 
 }
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts b/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
index d7280d50b..ac8dded67 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.ts
@@ -39,6 +39,7 @@ export class AssetsNavComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    this.seoService.setTitle($localize`:@@ee8f8008bae6ce3a49840c4e1d39b4af23d4c263:Assets`);
     this.typeaheadSearchFn = this.typeaheadSearch;
 
     this.searchForm = this.formBuilder.group({
@@ -62,13 +63,12 @@ export class AssetsNavComponent implements OnInit {
           return this.assetsService.getAssetsJson$.pipe(
             map((assets) => {
               if (searchText.length ) {
-                const filteredAssets = assets.filter((asset) => asset.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
+                const filteredAssets = assets.array.filter((asset) => asset.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1
                   || (asset.ticker || '').toLowerCase().indexOf(searchText.toLowerCase()) > -1
                   || (asset.entity && asset.entity.domain || '').toLowerCase().indexOf(searchText.toLowerCase()) > -1);
-                assets = filteredAssets;
                 return filteredAssets.slice(0, this.itemsPerPage);
               } else {
-                return assets.slice(0, this.itemsPerPage);
+                return assets.array.slice(0, this.itemsPerPage);
               }
             })
           )
diff --git a/frontend/src/app/components/assets/assets.component.ts b/frontend/src/app/components/assets/assets.component.ts
index 542765033..b6a8a8f1b 100644
--- a/frontend/src/app/components/assets/assets.component.ts
+++ b/frontend/src/app/components/assets/assets.component.ts
@@ -49,7 +49,7 @@ export class AssetsComponent implements OnInit {
       .pipe(
         take(1),
         switchMap(([assets, qp]) => {
-          this.assets = assets;
+          this.assets = assets.array;
 
           return this.route.queryParams
             .pipe(
diff --git a/frontend/src/app/services/assets.service.ts b/frontend/src/app/services/assets.service.ts
index d5693abf8..9454ef7e2 100644
--- a/frontend/src/app/services/assets.service.ts
+++ b/frontend/src/app/services/assets.service.ts
@@ -12,7 +12,7 @@ import { AssetExtended } from '../interfaces/electrs.interface';
 export class AssetsService {
   nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
 
-  getAssetsJson$: Observable<AssetExtended[]>;
+  getAssetsJson$: Observable<{ array: AssetExtended[]; objects: any}>;
   getAssetsMinimalJson$: Observable<any>;
   getMiningPools$: Observable<any>;
 
@@ -47,7 +47,10 @@ export class AssetsService {
             });
           }
   
-          return assets.sort((a: any, b: any) => a.name.localeCompare(b.name));
+          return {
+            objects: rawAssets,
+            array: assets.sort((a: any, b: any) => a.name.localeCompare(b.name)),
+          };
         }),
         shareReplay(1),
       );

From ff4c097c4812f5afeda5c5faef35303a6ddf75ec Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 04:44:40 +0400
Subject: [PATCH 16/25] Mobile layout fixes.

---
 .../asset-group/asset-group.component.html    |  2 +-
 .../assets-featured.component.html            |  8 +++--
 .../assets-nav/assets-nav.component.html      | 34 ++++++++++---------
 .../assets-nav/assets-nav.component.scss      | 15 ++++++++
 .../components/assets/assets.component.html   |  2 +-
 .../app/components/assets/assets.component.ts |  2 ++
 6 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.html b/frontend/src/app/components/assets/asset-group/asset-group.component.html
index a6858b76f..64fe182e9 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.html
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.html
@@ -16,7 +16,7 @@
       <div class="card">
         <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
         <div class="title">
-          <a [routerLink]="['/assets/asset/', group.asset_id]">{{ asset.name }}</a>
+          <a [routerLink]="['/assets/asset/', asset.asset_id]">{{ asset.name }}</a>
         </div>
         <div class="ticker">{{ asset.ticker }}</div>
       </div>
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
index 937ca8113..f94157766 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
@@ -3,12 +3,16 @@
   <div *ngFor="let group of featured">
     <div class="card">
       <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
-        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
+        <a [routerLink]="['/assets/asset-group', group.id]">
+          <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
+        </a>
         <div class="title"><a [routerLink]="['/assets/asset-group', group.id]">{{ group.name }}</a></div>
         <div class="sub-title">Group of {{ group.assets.length | number }} assets</div>
       </ng-template>
       <ng-template #singleAsset>
-        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
+        <a [routerLink]="['/assets/asset/', group.asset]">
+          <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
+        </a>
         <div class="title">
           <a [routerLink]="['/assets/asset/', group.asset]">{{ group.name }}</a>
         </div>
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
index 73d391254..c543e1893 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
@@ -3,24 +3,26 @@
     <h1 i18n="Assets page header">Assets</h1>
   </div>
 
-  <ul class="nav nav-pills">
-    <li class="nav-item">
-      <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
-      
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
-    </li>
-  </ul>
+  <div class="nav-container">
+    <ul class="nav nav-pills">
+      <li class="nav-item">
+        <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
+        
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
+      </li>
+    </ul>
 
-  <form [formGroup]="searchForm" class="form-inline">
-    <div class="input-group mb-2">
-      <input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
-      <div class="input-group-append">
-        <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
+    <form [formGroup]="searchForm">
+      <div class="input-group mb-2">
+        <input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
+        <div class="input-group-append">
+          <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
+        </div>
       </div>
-    </div>
-  </form>
+    </form>
+</div>
 
   <div class="clearfix"></div>
 
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss b/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
index 530ed7bdf..21ab756d9 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.scss
@@ -6,4 +6,19 @@ ul {
 
 form {
   float: right;
+  width: 300px;
+  @media (max-width: 767.98px) {
+    width: 90%;
+    margin-bottom: 15px;
+  }
 }
+
+@media (max-width: 767.98px) {
+  .nav-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/assets/assets.component.html b/frontend/src/app/components/assets/assets.component.html
index ec9ac079f..677e25058 100644
--- a/frontend/src/app/components/assets/assets.component.html
+++ b/frontend/src/app/components/assets/assets.component.html
@@ -18,7 +18,7 @@
 
   <br>
 
-  <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="ellipses"></ngb-pagination>
 
 </ng-container>
 
diff --git a/frontend/src/app/components/assets/assets.component.ts b/frontend/src/app/components/assets/assets.component.ts
index b6a8a8f1b..e85248dd6 100644
--- a/frontend/src/app/components/assets/assets.component.ts
+++ b/frontend/src/app/components/assets/assets.component.ts
@@ -17,6 +17,8 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class AssetsComponent implements OnInit {
   nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
+  paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 4 : 6;
+  ellipses = window.matchMedia('(max-width: 670px)').matches ? false : true;
 
   assets: AssetExtended[];
   assetsCache: AssetExtended[];

From 0863405671645b005cf74c54455285b76d44f0b8 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 18:06:51 +0400
Subject: [PATCH 17/25] Correcting tests. i18n strings and asset links.

---
 frontend/cypress/integration/liquid/liquid.spec.ts          | 6 +++---
 .../cypress/integration/liquidtestnet/liquidtestnet.spec.ts | 6 +++---
 frontend/src/app/components/asset/asset.component.html      | 4 ++--
 .../assets/asset-group/asset-group.component.html           | 2 +-
 .../assets/assets-featured/assets-featured.component.html   | 2 +-
 .../components/assets/assets-nav/assets-nav.component.html  | 4 ++--
 .../src/app/components/search-form/search-form.component.ts | 4 ++--
 .../transactions-list/transactions-list.component.html      | 2 +-
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/cypress/integration/liquid/liquid.spec.ts b/frontend/cypress/integration/liquid/liquid.spec.ts
index af76314a1..877b36dbd 100644
--- a/frontend/cypress/integration/liquid/liquid.spec.ts
+++ b/frontend/cypress/integration/liquid/liquid.spec.ts
@@ -125,7 +125,7 @@ describe('Liquid', () => {
         cy.visit(`${basePath}/assets`);
         cy.waitForSkeletonGone();
         cy.get('.container-xl input').click().type('Liquid Bitcoin').then(() => {
-          cy.get('table tr').should('have.length', 1);
+          cy.get('ngb-typeahead-window').should('have.length', 1);
         });
       });
 
@@ -133,7 +133,7 @@ describe('Liquid', () => {
         cy.visit(`${basePath}/assets`);
         cy.waitForSkeletonGone();
         cy.get('.container-xl input').click().type('Liquid AUD').then(() => {
-          cy.get('table tr td:nth-of-type(1) a').click();
+          cy.get('ngb-typeahead-window:nth-of-type(1) button').click();
         });
       });
     });
@@ -197,7 +197,7 @@ describe('Liquid', () => {
       });
 
       it('shows asset peg in/out and burn transactions', () => {
-        cy.visit(`${basePath}/asset/6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`);
+        cy.visit(`${basePath}/assets/asset/6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`);
         cy.waitForSkeletonGone();
         cy.get('#table-tx-vout tr').not('.assetBox');
         cy.get('#table-tx-vin tr').not('.assetBox');
diff --git a/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts b/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
index eb75be773..79904f784 100644
--- a/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
+++ b/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
@@ -83,7 +83,7 @@ describe('Liquid Testnet', () => {
         cy.visit(`${basePath}/assets`);
         cy.waitForSkeletonGone();
         cy.get('.container-xl input').click().type('Liquid Bitcoin').then(() => {
-          cy.get('table tr').should('have.length', 1);
+          cy.get('ngb-typeahead-window').should('have.length', 1);
         });
       });
 
@@ -91,7 +91,7 @@ describe('Liquid Testnet', () => {
         cy.visit(`${basePath}/assets`);
         cy.waitForSkeletonGone();
         cy.get('.container-xl input').click().type('Liquid CAD').then(() => {
-          cy.get('table tr td:nth-of-type(1) a').click();
+          cy.get('ngb-typeahead-window:nth-of-type(1) button').click();
         });
       });
     });
@@ -162,7 +162,7 @@ describe('Liquid Testnet', () => {
       });
 
       it('shows asset peg in/out and burn transactions', () => {
-        cy.visit(`${basePath}/asset/ac3e0ff248c5051ffd61e00155b7122e5ebc04fd397a0ecbdd4f4e4a56232926`);
+        cy.visit(`${basePath}/assets/asset/ac3e0ff248c5051ffd61e00155b7122e5ebc04fd397a0ecbdd4f4e4a56232926`);
         cy.waitForSkeletonGone();
         cy.get('#table-tx-vout tr').not('.assetBox');
         cy.get('#table-tx-vin tr').not('.assetBox');
diff --git a/frontend/src/app/components/asset/asset.component.html b/frontend/src/app/components/asset/asset.component.html
index 9723a45e5..b1728a0ff 100644
--- a/frontend/src/app/components/asset/asset.component.html
+++ b/frontend/src/app/components/asset/asset.component.html
@@ -2,7 +2,7 @@
   <div class="title-asset">
     <h1 i18n="asset|Liquid Asset page title">Asset</h1>
     <div class="tx-link">
-      <a [routerLink]="['/asset/' | relativeUrl, assetString]">
+      <a [routerLink]="['/assets/asset/' | relativeUrl, assetString]">
         <span class="d-inline d-lg-none">{{ assetString | shortenString : 24 }}</span>
         <span class="d-none d-lg-inline">{{ assetString }}</span>
       </a>
@@ -20,7 +20,7 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td i18n="asset.name|Liquid Asset name">Name</td>
+                <td i18n="Asset name header">Name</td>
                 <td class="assetName">{{ assetContract[2] }} ({{ assetContract[1] }})</td>
               </tr>
               <tr>
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.html b/frontend/src/app/components/assets/asset-group/asset-group.component.html
index 64fe182e9..8d476671d 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.html
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.html
@@ -3,7 +3,7 @@
   <div class="main-title">
     <h2>{{ group.group.name }}</h2>
 
-    <div class="sub-title">Group of {{ group.group.assets.length | number }} assets</div>
+    <div class="sub-title" i18n>Group of {{ group.group.assets.length | number }} assets</div>
   </div>
 
 
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
index f94157766..c5d3d3b6c 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
@@ -7,7 +7,7 @@
           <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
         </a>
         <div class="title"><a [routerLink]="['/assets/asset-group', group.id]">{{ group.name }}</a></div>
-        <div class="sub-title">Group of {{ group.assets.length | number }} assets</div>
+        <div class="sub-title" i18n>Group of {{ group.assets.length | number }} assets</div>
       </ng-template>
       <ng-template #singleAsset>
         <a [routerLink]="['/assets/asset/', group.asset]">
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
index c543e1893..8d733d308 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
@@ -6,11 +6,11 @@
   <div class="nav-container">
     <ul class="nav nav-pills">
       <li class="nav-item">
-        <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
+        <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active" i18n>Featured</a>
         
       </li>
       <li class="nav-item">
-        <a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
+        <a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active" i18n>All</a>
       </li>
     </ul>
 
diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts
index 40f2c1e88..24e8a5b23 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -105,11 +105,11 @@ export class SearchFormComponent implements OnInit {
         const matches = this.regexTransaction.exec(searchText);
         if (this.network === 'liquid' || this.network === 'liquidtestnet') {
           if (this.assets[matches[1]]) {
-            this.navigate('/asset/', matches[1]);
+            this.navigate('/assets/asset/', matches[1]);
           }
           this.electrsApiService.getAsset$(matches[1])
             .subscribe(
-              () => { this.navigate('/asset/', matches[1]); },
+              () => { this.navigate('/assets/asset/', matches[1]); },
               () => {
                 this.electrsApiService.getBlock$(matches[1])
                   .subscribe(
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 91d9feffe..8e81cc3e7 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -274,5 +274,5 @@
   <br />
   {{ assetsMinimal[item.asset][0] }}
   <br />
-  <a [routerLink]="['/asset/' | relativeUrl, item.asset]">{{ item.asset | shortenString : 13 }}</a>
+  <a [routerLink]="['/assets/asset/' | relativeUrl, item.asset]">{{ item.asset | shortenString : 13 }}</a>
 </ng-template>

From 1dbae4cd626bc8180823929aa97752a0566a52d5 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 18:24:15 +0400
Subject: [PATCH 18/25] Fixing liquidtestnet tests.

---
 .../liquidtestnet/liquidtestnet.spec.ts       |  2 +-
 frontend/src/app/app-routing.module.ts        | 26 ++++++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts b/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
index 79904f784..3cb7ea217 100644
--- a/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
+++ b/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
@@ -150,7 +150,7 @@ describe('Liquid Testnet', () => {
         cy.visit(`${basePath}/tx/0877bc0c7aa5c2b8d0e4b15450425879b8783c40e341806037a605ef836fb886#blinded=5000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,328de54e90e867a9154b4f1eb7fcab86267e880fa2ee9e53b41a91e61dab86e6,8885831e6b089eaf06889d53a24843f0da533d300a7b1527b136883a6819f3ae,5000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,aca78b953615d69ae0ae68c4c5c3c0ee077c10bc20ad3f0c5960706004e6cb56,d2ec175afe5f761e2dbd443faf46abbb7091f341deb3387e5787d812bdb2df9f,100000,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,4b54a4ca809b3844f34dd88b68617c4c866d92a02211f02ba355755bac20a1c6,eddd02e92b0cfbad8cab89828570a50f2c643bb2a54d886c86e25ce47e818685,99729,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,8b86d565c9549eb0352bb81ee576d01d064435b64fddcc045decebeb1d9913ce,b082ce3448d40d47b5b39f15d72b285f4a1046b636b56c25f32f498ece29d062,10000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,62b04ee86198d6b41681cdd0acb450ab366af727a010aaee8ba0b9e69ff43896,3f98429bca9b538dc943c22111f25d9c4448d45a63ff0f4e58b22fd434c0365e`);
         cy.get('#table-tx-vout tr:nth-child(2) .amount a').click().then(() => {
           cy.waitForSkeletonGone();
-          cy.url().should('contain', '/asset/38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5');
+          cy.url().should('contain', '/assets/asset/38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5');
         });
       });
 
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 243691661..d0ac5cca2 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -455,13 +455,31 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
             path: 'address/:id',
             component: AddressComponent
           },
-          {
-            path: 'asset/:id',
-            component: AssetComponent
-          },
           {
             path: 'assets',
             component: AssetsNavComponent,
+            children: [
+              {
+                path: 'featured',
+                component: AssetsFeaturedComponent,
+              },
+              {
+                path: 'all',
+                component: AssetsComponent,
+              },
+              {
+                path: 'asset/:id',
+                component: AssetComponent
+              },
+              {
+                path: 'asset-group/:id',
+                component: AssetGroupComponent
+              },
+              {
+                path: '**',
+                redirectTo: 'featured'
+              }
+            ]
           },
           {
             path: 'docs/api/:type',

From b634984ca69e967a1d094e6e27b3c5664940a463 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 18:48:25 +0400
Subject: [PATCH 19/25] Correcting more tests.

---
 .../cypress/integration/liquid/liquid.spec.ts |  5 +--
 .../liquidtestnet/liquidtestnet.spec.ts       |  2 +-
 .../assets-featured.component.html            | 38 +++++++++----------
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/frontend/cypress/integration/liquid/liquid.spec.ts b/frontend/cypress/integration/liquid/liquid.spec.ts
index 877b36dbd..d8d1c366d 100644
--- a/frontend/cypress/integration/liquid/liquid.spec.ts
+++ b/frontend/cypress/integration/liquid/liquid.spec.ts
@@ -115,10 +115,9 @@ describe('Liquid', () => {
 
     describe('assets', () => {
       it('shows the assets screen', () => {
-        cy.visit(`${basePath}`);
-        cy.get('#btn-assets');
+        cy.visit(`${basePath}/assets`);
         cy.waitForSkeletonGone();
-        cy.get('table tr').should('have.length.at.least', 5);
+        cy.get('.featuredBox .card').should('have.length.at.least', 5);
       });
 
       it('allows searching assets', () => {
diff --git a/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts b/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
index 3cb7ea217..b9c9ef6eb 100644
--- a/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
+++ b/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
@@ -76,7 +76,7 @@ describe('Liquid Testnet', () => {
       it('shows the assets screen', () => {
         cy.visit(`${basePath}/assets`);
         cy.waitForSkeletonGone();
-        cy.get('table tr').should('have.length.at.least', 5);
+        cy.get('.featuredBox .card').should('have.length.at.least', 5);
       });
 
       it('allows searching assets', () => {
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
index c5d3d3b6c..f8ace8ef0 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
@@ -1,24 +1,22 @@
 <div *ngIf="featuredAssets$ | async as featured; else loading" class="featuredBox">
-    
-  <div *ngFor="let group of featured">
-    <div class="card">
-      <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
-        <a [routerLink]="['/assets/asset-group', group.id]">
-          <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
-        </a>
-        <div class="title"><a [routerLink]="['/assets/asset-group', group.id]">{{ group.name }}</a></div>
-        <div class="sub-title" i18n>Group of {{ group.assets.length | number }} assets</div>
-      </ng-template>
-      <ng-template #singleAsset>
-        <a [routerLink]="['/assets/asset/', group.asset]">
-          <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
-        </a>
-        <div class="title">
-          <a [routerLink]="['/assets/asset/', group.asset]">{{ group.name }}</a>
-        </div>
-        <div class="ticker">{{ group.ticker }}</div>
-      </ng-template>
-    </div>
+
+  <div class="card" *ngFor="let group of featured">
+    <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
+      <a [routerLink]="['/assets/asset-group', group.id]">
+        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
+      </a>
+      <div class="title"><a [routerLink]="['/assets/asset-group', group.id]">{{ group.name }}</a></div>
+      <div class="sub-title" i18n>Group of {{ group.assets.length | number }} assets</div>
+    </ng-template>
+    <ng-template #singleAsset>
+      <a [routerLink]="['/assets/asset/', group.asset]">
+        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
+      </a>
+      <div class="title">
+        <a [routerLink]="['/assets/asset/', group.asset]">{{ group.name }}</a>
+      </div>
+      <div class="ticker">{{ group.ticker }}</div>
+    </ng-template>
   </div>
 
 </div>

From f0398e906dbcad50708b92b8505d7449ce6e3178 Mon Sep 17 00:00:00 2001
From: wiz <j@wiz.biz>
Date: Sun, 6 Feb 2022 15:37:35 +0000
Subject: [PATCH 20/25] Add nginx configuration for liquid assets APIs

---
 .../nginx/location-api-v1-services-liquid.conf       | 12 ++++++++++++
 production/nginx/server-liquid.conf                  |  1 +
 2 files changed, 13 insertions(+)
 create mode 100644 production/nginx/location-api-v1-services-liquid.conf

diff --git a/production/nginx/location-api-v1-services-liquid.conf b/production/nginx/location-api-v1-services-liquid.conf
new file mode 100644
index 000000000..c9bb426f0
--- /dev/null
+++ b/production/nginx/location-api-v1-services-liquid.conf
@@ -0,0 +1,12 @@
+location /api/v1/assets {
+	proxy_pass $mempoolSpaceServices;
+	proxy_cache services;
+	proxy_cache_background_update on;
+	proxy_cache_use_stale updating;
+	proxy_cache_valid 200 10m;
+	expires 10m;
+	proxy_hide_header onion-location;
+	proxy_hide_header strict-transport-security;
+	proxy_hide_header content-security-policy;
+	proxy_hide_header x-frame-options;
+}
diff --git a/production/nginx/server-liquid.conf b/production/nginx/server-liquid.conf
index b0ed7e715..fc07f7623 100644
--- a/production/nginx/server-liquid.conf
+++ b/production/nginx/server-liquid.conf
@@ -1,5 +1,6 @@
 include mempool/production/nginx/server-common.conf;
 include mempool/production/nginx/location-api-v1-services.conf;
+include mempool/production/nginx/location-api-v1-services-liquid.conf;
 include mempool/production/nginx/location-api.conf;
 include mempool/production/nginx/location-liquid-api.conf;
 include mempool/production/nginx/location-liquidtestnet-api.conf;

From 4c2c6396bab541285aa0e32bd5404907a4307740 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 19:43:57 +0400
Subject: [PATCH 21/25] Renaming assets-group to assets/group

---
 backend/src/index.ts                                      | 2 +-
 backend/src/routes.ts                                     | 2 +-
 frontend/src/app/app-routing.module.ts                    | 4 ++--
 .../assets/asset-group/asset-group.component.html         | 2 +-
 .../assets/assets-featured/assets-featured.component.html | 8 ++++----
 .../assets/assets-nav/assets-nav.component.html           | 4 ++--
 frontend/src/app/services/api.service.ts                  | 2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/backend/src/index.ts b/backend/src/index.ts
index 5dea199fc..557c269dd 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -321,7 +321,7 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'assets/icons', routes.getAllLiquidIcon)
         .get(config.MEMPOOL.API_URL_PREFIX + 'assets/featured', routes.$getAllFeaturedLiquidAssets)
         .get(config.MEMPOOL.API_URL_PREFIX + 'asset/:assetId/icon', routes.getLiquidIcon)
-        .get(config.MEMPOOL.API_URL_PREFIX + 'asset-group/:id', routes.$getAssetGroup)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'assets/group/:id', routes.$getAssetGroup)
       ;
     }
 
diff --git a/backend/src/routes.ts b/backend/src/routes.ts
index e937678cc..39c1983d2 100644
--- a/backend/src/routes.ts
+++ b/backend/src/routes.ts
@@ -868,7 +868,7 @@ class Routes {
 
   public async $getAssetGroup(req: Request, res: Response) {
     try {
-      const response = await axios.get('https://mempool.space/api/v1/asset-group/' + parseInt(req.params.id, 10),
+      const response = await axios.get('https://mempool.space/api/v1/assets/group/' + parseInt(req.params.id, 10),
         { responseType: 'stream', timeout: 10000 });
       response.data.pipe(res);
     } catch (e) {
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index d0ac5cca2..bc9bb94fc 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -363,7 +363,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
             component: AssetComponent
           },
           {
-            path: 'asset-group/:id',
+            path: 'group/:id',
             component: AssetGroupComponent
           },
           {
@@ -472,7 +472,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
                 component: AssetComponent
               },
               {
-                path: 'asset-group/:id',
+                path: 'group/:id',
                 component: AssetGroupComponent
               },
               {
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.html b/frontend/src/app/components/assets/asset-group/asset-group.component.html
index 8d476671d..46b3b9eae 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.html
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.html
@@ -16,7 +16,7 @@
       <div class="card">
         <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
         <div class="title">
-          <a [routerLink]="['/assets/asset/', asset.asset_id]">{{ asset.name }}</a>
+          <a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a>
         </div>
         <div class="ticker">{{ asset.ticker }}</div>
       </div>
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
index f8ace8ef0..b87713ceb 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html
@@ -2,18 +2,18 @@
 
   <div class="card" *ngFor="let group of featured">
     <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
-      <a [routerLink]="['/assets/asset-group', group.id]">
+      <a [routerLink]="['/assets/group' | relativeUrl, group.id]">
         <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
       </a>
-      <div class="title"><a [routerLink]="['/assets/asset-group', group.id]">{{ group.name }}</a></div>
+      <div class="title"><a [routerLink]="['/assets/group' | relativeUrl, group.id]">{{ group.name }}</a></div>
       <div class="sub-title" i18n>Group of {{ group.assets.length | number }} assets</div>
     </ng-template>
     <ng-template #singleAsset>
-      <a [routerLink]="['/assets/asset/', group.asset]">
+      <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
         <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
       </a>
       <div class="title">
-        <a [routerLink]="['/assets/asset/', group.asset]">{{ group.name }}</a>
+        <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>
       </div>
       <div class="ticker">{{ group.ticker }}</div>
     </ng-template>
diff --git a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
index 8d733d308..420fff818 100644
--- a/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
+++ b/frontend/src/app/components/assets/assets-nav/assets-nav.component.html
@@ -6,11 +6,11 @@
   <div class="nav-container">
     <ul class="nav nav-pills">
       <li class="nav-item">
-        <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active" i18n>Featured</a>
+        <a class="nav-link" [routerLink]="['/assets/featured' | relativeUrl]" routerLinkActive="active" i18n>Featured</a>
         
       </li>
       <li class="nav-item">
-        <a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active" i18n>All</a>
+        <a class="nav-link" [routerLink]="['/assets/all' | relativeUrl]" routerLinkActive="active" i18n>All</a>
       </li>
     </ul>
 
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index 3d9125c25..ec89314bd 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -122,7 +122,7 @@ export class ApiService {
   }
 
   getAssetGroup$(id: string): Observable<any> {
-    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/asset-group/' + id);
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/assets/group/' + id);
   }
 
   postTransaction$(hexPayload: string): Observable<any> {

From 01d6f4f73779cb01675ed96f045f85b95e5b8994 Mon Sep 17 00:00:00 2001
From: wiz <j@wiz.biz>
Date: Sun, 6 Feb 2022 15:46:24 +0000
Subject: [PATCH 22/25] Fix nginx configuration for liquid assets APIs

---
 .../nginx/location-api-v1-services-liquid.conf       | 12 ------------
 production/nginx/location-api-v1-services.conf       | 12 ++++++++++++
 production/nginx/server-liquid.conf                  |  1 -
 3 files changed, 12 insertions(+), 13 deletions(-)
 delete mode 100644 production/nginx/location-api-v1-services-liquid.conf

diff --git a/production/nginx/location-api-v1-services-liquid.conf b/production/nginx/location-api-v1-services-liquid.conf
deleted file mode 100644
index c9bb426f0..000000000
--- a/production/nginx/location-api-v1-services-liquid.conf
+++ /dev/null
@@ -1,12 +0,0 @@
-location /api/v1/assets {
-	proxy_pass $mempoolSpaceServices;
-	proxy_cache services;
-	proxy_cache_background_update on;
-	proxy_cache_use_stale updating;
-	proxy_cache_valid 200 10m;
-	expires 10m;
-	proxy_hide_header onion-location;
-	proxy_hide_header strict-transport-security;
-	proxy_hide_header content-security-policy;
-	proxy_hide_header x-frame-options;
-}
diff --git a/production/nginx/location-api-v1-services.conf b/production/nginx/location-api-v1-services.conf
index 7079dd4ac..aae49727e 100644
--- a/production/nginx/location-api-v1-services.conf
+++ b/production/nginx/location-api-v1-services.conf
@@ -70,3 +70,15 @@ location /api/v1/translators {
 	proxy_hide_header content-security-policy;
 	proxy_hide_header x-frame-options;
 }
+location /api/v1/assets {
+	proxy_pass $mempoolSpaceServices;
+	proxy_cache services;
+	proxy_cache_background_update on;
+	proxy_cache_use_stale updating;
+	proxy_cache_valid 200 10m;
+	expires 10m;
+	proxy_hide_header onion-location;
+	proxy_hide_header strict-transport-security;
+	proxy_hide_header content-security-policy;
+	proxy_hide_header x-frame-options;
+}
diff --git a/production/nginx/server-liquid.conf b/production/nginx/server-liquid.conf
index fc07f7623..b0ed7e715 100644
--- a/production/nginx/server-liquid.conf
+++ b/production/nginx/server-liquid.conf
@@ -1,6 +1,5 @@
 include mempool/production/nginx/server-common.conf;
 include mempool/production/nginx/location-api-v1-services.conf;
-include mempool/production/nginx/location-api-v1-services-liquid.conf;
 include mempool/production/nginx/location-api.conf;
 include mempool/production/nginx/location-liquid-api.conf;
 include mempool/production/nginx/location-liquidtestnet-api.conf;

From 99c7d7fac4e5c45ed3c6050a7fbf4bda31ff1a1c Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 20:03:06 +0400
Subject: [PATCH 23/25] Removing /liquid from asset grouping base path.

---
 frontend/src/app/services/api.service.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index ec89314bd..c19bf5a41 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -118,11 +118,11 @@ export class ApiService {
   }
 
   listFeaturedAssets$(): Observable<any[]> {
-    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/assets/featured');
+    return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/assets/featured');
   }
 
   getAssetGroup$(id: string): Observable<any> {
-    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/assets/group/' + id);
+    return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/assets/group/' + id);
   }
 
   postTransaction$(hexPayload: string): Observable<any> {

From cd88692d3d708bdfd23206b7df5a240175685d57 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 6 Feb 2022 20:17:48 +0400
Subject: [PATCH 24/25] Changing Asset proxy redirects to liquid.network

---
 backend/src/routes.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/routes.ts b/backend/src/routes.ts
index 39c1983d2..8ae2f9609 100644
--- a/backend/src/routes.ts
+++ b/backend/src/routes.ts
@@ -859,7 +859,7 @@ class Routes {
 
   public async $getAllFeaturedLiquidAssets(req: Request, res: Response) {
     try {
-      const response = await axios.get('https://mempool.space/api/v1/assets/featured', { responseType: 'stream', timeout: 10000 });
+      const response = await axios.get('https://liquid.network/api/v1/assets/featured', { responseType: 'stream', timeout: 10000 });
       response.data.pipe(res);
     } catch (e) {
       res.status(500).end();
@@ -868,7 +868,7 @@ class Routes {
 
   public async $getAssetGroup(req: Request, res: Response) {
     try {
-      const response = await axios.get('https://mempool.space/api/v1/assets/group/' + parseInt(req.params.id, 10),
+      const response = await axios.get('https://liquid.network/api/v1/assets/group/' + parseInt(req.params.id, 10),
         { responseType: 'stream', timeout: 10000 });
       response.data.pipe(res);
     } catch (e) {

From f5193218e5f7bd177b9e8f908cd2631f9304f87e Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 7 Feb 2022 00:08:07 +0400
Subject: [PATCH 25/25] Mobile responsiveness fixes

---
 .../asset-group/asset-group.component.html       | 13 +++++++++++--
 .../asset-group/asset-group.component.scss       | 15 +++++++++------
 .../assets-featured.component.scss               | 15 +++++++++------
 .../app/components/assets/assets.component.html  | 16 ++++++++--------
 4 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.html b/frontend/src/app/components/assets/asset-group/asset-group.component.html
index 46b3b9eae..ac0ed4327 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.html
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="group$ | async as group">
+<div *ngIf="group$ | async as group; else loading">
   
   <div class="main-title">
     <h2>{{ group.group.name }}</h2>
@@ -14,7 +14,9 @@
   <div class="featuredBox">
     <div *ngFor="let asset of group.assets">
       <div class="card">
-        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
+        <a [routerLink]="['/assets/asset' | relativeUrl, asset.asset_id]">
+          <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
+        </a>
         <div class="title">
           <a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a>
         </div>
@@ -24,3 +26,10 @@
   </div>
 
 </div>
+
+<ng-template #loading>
+  <br>
+  <div class="text-center loadingGraphs">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.scss b/frontend/src/app/components/assets/asset-group/asset-group.component.scss
index 7a0735a24..c0b31f273 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.scss
+++ b/frontend/src/app/components/assets/asset-group/asset-group.component.scss
@@ -25,12 +25,17 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
+  @media (max-width: 767.98px) {
+    width: 150px;
+    height: 150px;
+  }
 }
 
 .title {
   font-size: 14px;
   font-weight: bold;
   margin-top: 10px;
+  text-align: center;
 }
 
 .sub-title {
@@ -40,12 +45,10 @@
 .assetIcon {
   width: 100px;
   height: 100px;
-}
-
-.image {
-  width: 100px;
-  height: 100px;
-  align-self: center;
+  @media (max-width: 767.98px) {
+    width: 50px;
+    height: 50px;
+  }
 }
 
 .view-link {
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
index 41be2b748..0ff049d16 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
+++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
@@ -13,12 +13,17 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
+  @media (max-width: 767.98px) {
+    width: 150px;
+    height: 150px;
+  }
 }
 
 .title {
   font-size: 14px;
   font-weight: bold;
   margin-top: 10px;
+  text-align: center;
 }
 
 .sub-title {
@@ -29,12 +34,10 @@
 .assetIcon {
   width: 100px;
   height: 100px;
-}
-
-.image {
-  width: 100px;
-  height: 100px;
-  align-self: center;
+  @media (max-width: 767.98px) {
+    width: 50px;
+    height: 50px;
+  }
 }
 
 .view-link {
diff --git a/frontend/src/app/components/assets/assets.component.html b/frontend/src/app/components/assets/assets.component.html
index 677e25058..d5accc9d7 100644
--- a/frontend/src/app/components/assets/assets.component.html
+++ b/frontend/src/app/components/assets/assets.component.html
@@ -3,15 +3,15 @@
     <thead>
       <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-md-table-cell" i18n="Asset Issuer Domain header">Issuer domain</th>
+      <th class="d-none d-lg-table-cell" i18n="Asset ID header">Asset ID</th>
     </thead>
     <tbody>
       <tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
         <td class="td-name"><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a></td>
         <td>{{ asset.ticker }}</td>
-        <td class="d-none d-md-block">{{ asset.entity && asset.entity.domain }}</td>
-        <td><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
+        <td class="d-none d-md-table-cell">{{ asset.entity && asset.entity.domain }}</td>
+        <td class="d-none d-lg-table-cell"><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
       </tr>
     </tbody>
   </table>
@@ -28,15 +28,15 @@
     <thead>
       <th 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-md-table-cell" i18n="Asset Issuer Domain header">Issuer domain</th>
+      <th class="d-none d-lg-table-cell" i18n="Asset ID header">Asset ID</th>
     </thead>
     <tbody>
       <tr *ngFor="let dummy of [0,0,0,0,0,0,0,0,0,0]">
         <td><span class="skeleton-loader"></span></td>
         <td><span class="skeleton-loader"></span></td>
-        <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
-        <td><span class="skeleton-loader"></span></td>
+        <td class="d-none d-md-table-cell"><span class="skeleton-loader"></span></td>
+        <td class="d-none d-lg-table-cell"><span class="skeleton-loader"></span></td>
       </tr>
     </tbody>
   </table>