Automated database creation and migration

fixes #1002

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

@@ -108,7 +108,7 @@ export namespace IBitcoinApi {
     scriptPubKey: string;            //  (string) The hex-encoded scriptPubKey generated by the address
     isscript: boolean;               //  (boolean) If the key is a script
     iswitness: boolean;              //  (boolean) If the address is a witness
-    witness_version?: boolean;       //  (numeric, optional) The version number of the witness program
+    witness_version?: number;        //  (numeric, optional) The version number of the witness program
     witness_program: string;         //  (string, optional) The hex value of the witness program
     confidential_key?: string;       //  (string) Elements only
     unconfidential?: string;         //  (string) Elements only

backend/src/api/database-migration.ts

@@ -0,0 +1,178 @@
+import config from '../config';
+import { DB } from '../database';
+import logger from '../logger';
+
+class DatabaseMigration {
+  private static currentVersion = 1;
+  private queryTimeout = 120000;
+
+  constructor() { }
+
+  public async $initializeOrMigrateDatabase(): Promise<void> {
+    if (!await this.$checkIfTableExists('statistics')) {
+      await this.$initializeDatabaseTables();
+    }
+
+    if (await this.$checkIfTableExists('state')) {
+      const databaseSchemaVersion = await this.$getSchemaVersionFromDatabase();
+      if (DatabaseMigration.currentVersion > databaseSchemaVersion) {
+        await this.$migrateTableSchemaFromVersion(databaseSchemaVersion);
+      }
+    } else {
+      await this.$migrateTableSchemaFromVersion(0);
+    }
+  }
+
+  private async $initializeDatabaseTables(): Promise<void> {
+    const connection = await DB.pool.getConnection();
+    for (const query of this.getInitializeTableQueries()) {
+      await connection.query<any>({ sql: query, timeout: this.queryTimeout });
+    }
+    connection.release();
+    logger.info(`Initial database tables have been created`);
+  }
+
+  private async $migrateTableSchemaFromVersion(version: number): Promise<void> {
+    const connection = await DB.pool.getConnection();
+    for (const query of this.getMigrationQueriesFromVersion(version)) {
+      await connection.query<any>({ sql: query, timeout: this.queryTimeout });
+    }
+    connection.release();
+    await this.$updateToLatestSchemaVersion();
+    logger.info(`Database schema have been migrated from version ${version} to ${DatabaseMigration.currentVersion} (latest version)`);
+  }
+
+  private async $getSchemaVersionFromDatabase(): Promise<number> {
+    const connection = await DB.pool.getConnection();
+    const query = `SELECT number FROM state WHERE name = 'schema_version';`;
+    const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
+    connection.release();
+    return rows[0]['number'];
+  }
+
+  private async $updateToLatestSchemaVersion(): Promise<void> {
+    const connection = await DB.pool.getConnection();
+    const query = `UPDATE state SET number = ${DatabaseMigration.currentVersion} WHERE name = 'schema_version'`;
+    const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
+    connection.release();
+  }
+
+  private async $checkIfTableExists(table: string): Promise<boolean> {
+    const connection = await DB.pool.getConnection();
+    const query = `SELECT COUNT(*) FROM information_schema.tables WHERE table_schema = '${config.DATABASE.DATABASE}' AND TABLE_NAME = '${table}'`;
+    const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
+    connection.release();
+    return rows[0]['COUNT(*)'] === 1;
+  }
+
+  private getInitializeTableQueries(): string[] {
+    const queries: string[] = [];
+
+    queries.push(`CREATE TABLE IF NOT EXISTS statistics (
+      id int(11) NOT NULL,
+      added datetime NOT NULL,
+      unconfirmed_transactions int(11) UNSIGNED NOT NULL,
+      tx_per_second float UNSIGNED NOT NULL,
+      vbytes_per_second int(10) UNSIGNED NOT NULL,
+      mempool_byte_weight int(10) UNSIGNED NOT NULL,
+      fee_data longtext NOT NULL,
+      total_fee double UNSIGNED NOT NULL,
+      vsize_1 int(11) NOT NULL,
+      vsize_2 int(11) NOT NULL,
+      vsize_3 int(11) NOT NULL,
+      vsize_4 int(11) NOT NULL,
+      vsize_5 int(11) NOT NULL,
+      vsize_6 int(11) NOT NULL,
+      vsize_8 int(11) NOT NULL,
+      vsize_10 int(11) NOT NULL,
+      vsize_12 int(11) NOT NULL,
+      vsize_15 int(11) NOT NULL,
+      vsize_20 int(11) NOT NULL,
+      vsize_30 int(11) NOT NULL,
+      vsize_40 int(11) NOT NULL,
+      vsize_50 int(11) NOT NULL,
+      vsize_60 int(11) NOT NULL,
+      vsize_70 int(11) NOT NULL,
+      vsize_80 int(11) NOT NULL,
+      vsize_90 int(11) NOT NULL,
+      vsize_100 int(11) NOT NULL,
+      vsize_125 int(11) NOT NULL,
+      vsize_150 int(11) NOT NULL,
+      vsize_175 int(11) NOT NULL,
+      vsize_200 int(11) NOT NULL,
+      vsize_250 int(11) NOT NULL,
+      vsize_300 int(11) NOT NULL,
+      vsize_350 int(11) NOT NULL,
+      vsize_400 int(11) NOT NULL,
+      vsize_500 int(11) NOT NULL,
+      vsize_600 int(11) NOT NULL,
+      vsize_700 int(11) NOT NULL,
+      vsize_800 int(11) NOT NULL,
+      vsize_900 int(11) NOT NULL,
+      vsize_1000 int(11) NOT NULL,
+      vsize_1200 int(11) NOT NULL,
+      vsize_1400 int(11) NOT NULL,
+      vsize_1600 int(11) NOT NULL,
+      vsize_1800 int(11) NOT NULL,
+      vsize_2000 int(11) NOT NULL
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`);
+
+    queries.push(`ALTER TABLE statistics ADD PRIMARY KEY (id);`);
+    queries.push(`ALTER TABLE statistics MODIFY id int(11) NOT NULL AUTO_INCREMENT;`);
+
+    return queries;
+  }
+
+  private getMigrationQueriesFromVersion(version: number): string[] {
+    const queries: string[] = [];
+
+    if (version < 1) {
+      if (config.MEMPOOL.NETWORK !== 'liquid') {
+        queries.push(`UPDATE statistics SET
+          vsize_1 = vsize_1 + vsize_2, vsize_2 = vsize_3,
+          vsize_3 = vsize_4, vsize_4 = vsize_5,
+          vsize_5 = vsize_6, vsize_6 = vsize_8,
+          vsize_8 = vsize_10, vsize_10 = vsize_12,
+          vsize_12 = vsize_15, vsize_15 = vsize_20,
+          vsize_20 = vsize_30, vsize_30 = vsize_40,
+          vsize_40 = vsize_50, vsize_50 = vsize_60,
+          vsize_60 = vsize_70, vsize_70 = vsize_80,
+          vsize_80 = vsize_90, vsize_90 = vsize_100,
+          vsize_100 = vsize_125, vsize_125 = vsize_150,
+          vsize_150 = vsize_175, vsize_175 = vsize_200,
+          vsize_200 = vsize_250, vsize_250 = vsize_300,
+          vsize_300 = vsize_350, vsize_350 = vsize_400,
+          vsize_400 = vsize_500, vsize_500 = vsize_600,
+          vsize_600 = vsize_700, vsize_700 = vsize_800,
+          vsize_800 = vsize_900, vsize_900 = vsize_1000,
+          vsize_1000 = vsize_1200, vsize_1200 = vsize_1400,
+          vsize_1400 = vsize_1800, vsize_1800 = vsize_2000, vsize_2000 = 0`);
+      }
+
+      queries.push(`CREATE TABLE IF NOT EXISTS elements_pegs (
+        block int(11) NOT NULL,
+        datetime int(11) NOT NULL,
+        amount bigint(20) NOT NULL,
+        txid varchar(65) NOT NULL,
+        txindex int(11) NOT NULL,
+        bitcoinaddress varchar(100) NOT NULL,
+        bitcointxid varchar(65) NOT NULL,
+        bitcoinindex int(11) NOT NULL,
+        final_tx int(11) NOT NULL
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`);
+
+      queries.push(`CREATE TABLE IF NOT EXISTS state (
+        name varchar(25) NOT NULL,
+        number int(11) NULL,
+        string varchar(100) NULL
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`);
+
+      queries.push(`INSERT INTO state VALUES('schema_version', 0, NULL);`);
+      queries.push(`INSERT INTO state VALUES('last_elements_block', 0, NULL);`);
+    }
+
+    return queries;
+  }
+}
+
+export default new DatabaseMigration();

backend/src/api/liquid/elements-parser.ts

@@ -18,12 +18,12 @@ class ElementsParser {
       this.isRunning = true;
       const result = await bitcoinClient.getChainTips();
       const tip = result[0].height;
-      const latestBlock = await this.$getLatestBlockFromDatabase();
-      for (let height = latestBlock.block + 1; height <= tip; height++) {
+      const latestBlockHeight = await this.$getLatestBlockHeightFromDatabase();
+      for (let height = latestBlockHeight + 1; height <= tip; height++) {
         const blockHash: IBitcoinApi.ChainTips = await bitcoinClient.getBlockHash(height);
         const block: IBitcoinApi.Block = await bitcoinClient.getBlock(blockHash, 2);
         await this.$parseBlock(block);
-        await this.$saveLatestBlockToDatabase(block.height, block.time, block.hash);
+        await this.$saveLatestBlockToDatabase(block.height);
       }
       this.isRunning = false;
     } catch (e) {
@@ -92,18 +92,18 @@ class ElementsParser {
     logger.debug(`Saved L-BTC peg from block height #${height} with TXID ${txid}.`);
   }
 
-  protected async $getLatestBlockFromDatabase(): Promise<any> {
+  protected async $getLatestBlockHeightFromDatabase(): Promise<number> {
     const connection = await DB.pool.getConnection();
-    const query = `SELECT block, datetime, block_hash FROM last_elements_block`;
+    const query = `SELECT number FROM state WHERE name = 'last_elements_block'`;
     const [rows] = await connection.query<any>(query);
     connection.release();
-    return rows[0];
+    return rows[0]['number'];
   }
 
-  protected async $saveLatestBlockToDatabase(blockHeight: number, datetime: number, blockHash: string) {
+  protected async $saveLatestBlockToDatabase(blockHeight: number) {
     const connection = await DB.pool.getConnection();
-    const query = `UPDATE last_elements_block SET block = ?, datetime = ?, block_hash = ?`;
-    await connection.query<any>(query, [blockHeight, datetime, blockHash]);
+    const query = `UPDATE state SET number = ? WHERE name = 'last_elements_block'`;
+    await connection.query<any>(query, [blockHeight]);
     connection.release();
   }
 }

backend/src/api/statistics.ts

@@ -267,8 +267,57 @@ class Statistics {
     }
   }
 
-  private getQueryForDays(div: number) {
-    return `SELECT id, added, unconfirmed_transactions,
+  private getQueryForDaysAvg(div: number, interval: string) {
+    return `SELECT id, UNIX_TIMESTAMP(added) as added,
+      CAST(avg(unconfirmed_transactions) as FLOAT) as unconfirmed_transactions,
+      CAST(avg(tx_per_second) as FLOAT) as tx_per_second,
+      CAST(avg(vbytes_per_second) as FLOAT) as vbytes_per_second,
+      CAST(avg(vsize_1) as FLOAT) as vsize_1,
+      CAST(avg(vsize_2) as FLOAT) as vsize_2,
+      CAST(avg(vsize_3) as FLOAT) as vsize_3,
+      CAST(avg(vsize_4) as FLOAT) as vsize_4,
+      CAST(avg(vsize_5) as FLOAT) as vsize_5,
+      CAST(avg(vsize_6) as FLOAT) as vsize_6,
+      CAST(avg(vsize_8) as FLOAT) as vsize_8,
+      CAST(avg(vsize_10) as FLOAT) as vsize_10,
+      CAST(avg(vsize_12) as FLOAT) as vsize_12,
+      CAST(avg(vsize_15) as FLOAT) as vsize_15,
+      CAST(avg(vsize_20) as FLOAT) as vsize_20,
+      CAST(avg(vsize_30) as FLOAT) as vsize_30,
+      CAST(avg(vsize_40) as FLOAT) as vsize_40,
+      CAST(avg(vsize_50) as FLOAT) as vsize_50,
+      CAST(avg(vsize_60) as FLOAT) as vsize_60,
+      CAST(avg(vsize_70) as FLOAT) as vsize_70,
+      CAST(avg(vsize_80) as FLOAT) as vsize_80,
+      CAST(avg(vsize_90) as FLOAT) as vsize_90,
+      CAST(avg(vsize_100) as FLOAT) as vsize_100,
+      CAST(avg(vsize_125) as FLOAT) as vsize_125,
+      CAST(avg(vsize_150) as FLOAT) as vsize_150,
+      CAST(avg(vsize_175) as FLOAT) as vsize_175,
+      CAST(avg(vsize_200) as FLOAT) as vsize_200,
+      CAST(avg(vsize_250) as FLOAT) as vsize_250,
+      CAST(avg(vsize_300) as FLOAT) as vsize_300,
+      CAST(avg(vsize_350) as FLOAT) as vsize_350,
+      CAST(avg(vsize_400) as FLOAT) as vsize_400,
+      CAST(avg(vsize_500) as FLOAT) as vsize_500,
+      CAST(avg(vsize_600) as FLOAT) as vsize_600,
+      CAST(avg(vsize_700) as FLOAT) as vsize_700,
+      CAST(avg(vsize_800) as FLOAT) as vsize_800,
+      CAST(avg(vsize_900) as FLOAT) as vsize_900,
+      CAST(avg(vsize_1000) as FLOAT) as vsize_1000,
+      CAST(avg(vsize_1200) as FLOAT) as vsize_1200,
+      CAST(avg(vsize_1400) as FLOAT) as vsize_1400,
+      CAST(avg(vsize_1600) as FLOAT) as vsize_1600,
+      CAST(avg(vsize_1800) as FLOAT) as vsize_1800,
+      CAST(avg(vsize_2000) as FLOAT) as vsize_2000 \
+      FROM statistics \
+      WHERE added BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW() \
+      GROUP BY UNIX_TIMESTAMP(added) DIV ${div} \
+      ORDER BY id DESC;`;
+  }
+
+  private getQueryForDays(div: number, interval: string) {
+    return `SELECT id, UNIX_TIMESTAMP(added) as added, unconfirmed_transactions,
       tx_per_second,
       vbytes_per_second,
       vsize_1,
@@ -308,13 +357,17 @@ class Statistics {
       vsize_1400,
       vsize_1600,
       vsize_1800,
-      vsize_2000 FROM statistics GROUP BY UNIX_TIMESTAMP(added) DIV ${div} ORDER BY id DESC LIMIT 480`;
+      vsize_2000 \
+      FROM statistics \
+      WHERE added BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW() \
+      GROUP BY UNIX_TIMESTAMP(added) DIV ${div} \
+      ORDER BY id DESC;`;
   }
 
   public async $get(id: number): Promise<OptimizedStatistic | undefined> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = `SELECT * FROM statistics WHERE id = ?`;
+      const query = `SELECT *, UNIX_TIMESTAMP(added) as added FROM statistics WHERE id = ?`;
       const [rows] = await connection.query<any>(query, [id]);
       connection.release();
       if (rows[0]) {
@@ -328,7 +381,7 @@ class Statistics {
   public async $list2H(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = `SELECT * FROM statistics ORDER BY id DESC LIMIT 120`;
+      const query = `SELECT *, UNIX_TIMESTAMP(added) as added FROM statistics ORDER BY id DESC LIMIT 120`;
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
@@ -341,7 +394,7 @@ class Statistics {
   public async $list24H(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(180);
+      const query = this.getQueryForDaysAvg(120, '1 DAY'); // 2m interval
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
@@ -354,7 +407,7 @@ class Statistics {
   public async $list1W(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(1260);
+      const query = this.getQueryForDaysAvg(600, '1 WEEK'); // 10m interval
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
@@ -367,7 +420,7 @@ class Statistics {
   public async $list1M(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(5040);
+      const query = this.getQueryForDaysAvg(3600, '1 MONTH'); // 1h interval
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
@@ -380,7 +433,7 @@ class Statistics {
   public async $list3M(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(15120);
+      const query = this.getQueryForDaysAvg(14400, '3 MONTH'); // 4h interval
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
@@ -393,7 +446,7 @@ class Statistics {
   public async $list6M(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(30240);
+      const query = this.getQueryForDaysAvg(21600, '6 MONTH'); // 6h interval 
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
@@ -406,7 +459,7 @@ class Statistics {
   public async $list1Y(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(60480);
+      const query = this.getQueryForDays(43200, '1 YEAR'); // 12h interval
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
@@ -419,7 +472,7 @@ class Statistics {
   public async $list2Y(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(120960);
+      const query = this.getQueryForDays(86400, "2 YEAR"); // 1d interval
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);
@@ -432,7 +485,7 @@ class Statistics {
   public async $list3Y(): Promise<OptimizedStatistic[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = this.getQueryForDays(181440);
+      const query = this.getQueryForDays(86400, "3 YEAR"); // 1d interval
       const [rows] = await connection.query<any>({ sql: query, timeout: this.queryTimeout });
       connection.release();
       return this.mapStatisticToOptimizedStatistic(rows);

backend/src/index.ts

@@ -21,6 +21,7 @@ import backendInfo from './api/backend-info';
 import loadingIndicators from './api/loading-indicators';
 import mempool from './api/mempool';
 import elementsParser from './api/liquid/elements-parser';
+import databaseMigration from './api/database-migration';
 
 class Server {
   private wss: WebSocket.Server | undefined;
@@ -81,6 +82,11 @@ class Server {
 
     if (config.DATABASE.ENABLED) {
       await checkDbConnection();
+      try {
+        await databaseMigration.$initializeOrMigrateDatabase();
+      } catch (e) {
+        throw new Error(e instanceof Error ? e.message : 'Error');
+      }
     }
 
     if (config.STATISTICS.ENABLED && config.DATABASE.ENABLED && cluster.isMaster) {

frontend/cypress.json

@@ -11,5 +11,6 @@
   "retries": {
     "runMode": 3,
     "openMode": 0
-  }
-}
+  },
+  "chromeWebSecurity": false
+}

frontend/cypress/fixtures/mainnet_rbf.json

@@ -0,0 +1,52 @@
+{
+  "rbfTransaction": {
+    "txid": "8913ec7ba0ede285dbd120e46f6d61a28f2903c10814a6f6c4f97d0edf3e1f46",
+    "version": 2,
+    "locktime": 632699,
+    "vin": [
+      {
+        "txid": "02238126a63ea2669c5f378012180ef8b54402a949316f9b2f1352c51730a086",
+        "vout": 0,
+        "prevout": {
+          "scriptpubkey": "a914f8e495456956c833e5e8c69b9a9dc041aa14c72f87",
+          "scriptpubkey_asm": "OP_HASH160 OP_PUSHBYTES_20 f8e495456956c833e5e8c69b9a9dc041aa14c72f OP_EQUAL",
+          "scriptpubkey_type": "p2sh",
+          "scriptpubkey_address": "3QP3LMD8veT5GtWV83Nosif2Bhr73857VB",
+          "value": 25000000
+        },
+        "scriptsig": "22002043288fbbc0fc5efa86c229dbb7d88ab78d57957c65b5d5ceaece70838976ad1b",
+        "scriptsig_asm": "OP_PUSHBYTES_34 002043288fbbc0fc5efa86c229dbb7d88ab78d57957c65b5d5ceaece70838976ad1b",
+        "witness": [
+          "",
+          "3044022009e2d3a8e645f65bc89c8492cd9c08e6fb02609fd402214884a754a1970145340220575bb325429def59f3a3f1e22d9740a3feecbe97438ff3bb5796b2c46b3c477f01",
+          "3044022039c34372882da8fc1c1243bd72b5e7e5e6870301ef56bdebb87bc647fb50f9b5022071a704ee77d742f78b10e45be675d4c45a5f31e884139e75c975144fde70e41701",
+          "522102346eb7133f11e0dc279bc592d5ac948a91676372a6144c9ae2085625d7fbf70421021b9508a458f9d59be4eb8cc87ad582c3b494106fb1d4ec22801569be0700eb7b52ae"
+        ],
+        "is_coinbase": false,
+        "sequence": 4294967293,
+        "inner_redeemscript_asm": "OP_0 OP_PUSHBYTES_32 43288fbbc0fc5efa86c229dbb7d88ab78d57957c65b5d5ceaece70838976ad1b",
+        "inner_witnessscript_asm": "OP_PUSHNUM_2 OP_PUSHBYTES_33 02346eb7133f11e0dc279bc592d5ac948a91676372a6144c9ae2085625d7fbf704 OP_PUSHBYTES_33 021b9508a458f9d59be4eb8cc87ad582c3b494106fb1d4ec22801569be0700eb7b OP_PUSHNUM_2 OP_CHECKMULTISIG"
+      }
+    ],
+    "vout": [
+      {
+        "scriptpubkey": "a914fd4e5e59dd5cf2dc48eaedf1a2a1650ca1ce9d7f87",
+        "scriptpubkey_asm": "OP_HASH160 OP_PUSHBYTES_20 fd4e5e59dd5cf2dc48eaedf1a2a1650ca1ce9d7f OP_EQUAL",
+        "scriptpubkey_type": "p2sh",
+        "scriptpubkey_address": "3QnNmDhZS7toHA7bhhbTPBdtpLJoeecq5c",
+        "value": 13986350
+      },
+      {
+        "scriptpubkey": "76a914edc93d0446deec1c2d514f3a490f050096e74e0e88ac",
+        "scriptpubkey_asm": "OP_DUP OP_HASH160 OP_PUSHBYTES_20 edc93d0446deec1c2d514f3a490f050096e74e0e OP_EQUALVERIFY OP_CHECKSIG",
+        "scriptpubkey_type": "p2pkh",
+        "scriptpubkey_address": "1NgJDkTUqJxxCAAZrrsC87kWag5kphrRtM",
+        "value": 11000000
+      }
+    ],
+    "size": 372,
+    "weight": 828,
+    "fee": 1.5,
+    "status": { "confirmed": false }
+  }
+}

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

@@ -62,6 +62,54 @@ describe('Liquid', () => {
             });
         });
 
+        it('renders unconfidential addresses correctly on mobile', () => {
+            cy.viewport('iphone-6');
+            cy.visit(`${basePath}/address/ex1qqmmjdwrlg59c8q4l75sj6wedjx57tj5grt8pat`);
+            cy.waitForSkeletonGone();
+            //TODO: Add proper IDs for these selectors
+            const firstRowSelector = '.container-xl > :nth-child(3) > div > :nth-child(1) > .table > tbody';
+            const thirdRowSelector = '.container-xl > :nth-child(3) > div > :nth-child(3)';
+            cy.get(firstRowSelector).invoke('css', 'width').then(firstRowWidth => {
+                cy.get(thirdRowSelector).invoke('css', 'width').then(thirdRowWidth => {
+                    expect(parseInt(firstRowWidth)).to.be.lessThan(parseInt(thirdRowWidth));
+                });
+            });
+        });
+
+        describe('peg in/peg out', () => {
+            it('loads peg in addresses', () => {
+                cy.visit(`${basePath}/tx/fe764f7bedfc2a37b29d9c8aef67d64a57d253a6b11c5a55555cfd5826483a58`);
+                cy.waitForSkeletonGone();
+                //TODO: Change to an element id so we don't assert on a string
+                cy.get('#table-tx-vin').should('contain', 'Peg-in');
+                cy.get('#table-tx-vin a').click().then(() => {
+                    cy.waitForSkeletonGone();
+                    if (baseModule === 'liquid') {
+                        cy.url().should('eq', 'https://mempool.space/tx/f148c0d854db4174ea420655235f910543f0ec3680566dcfdf84fb0a1697b592');
+                    } else {
+                        //TODO: Use an environment variable to get the hostname
+                        cy.url().should('eq', 'http://localhost:4200/tx/f148c0d854db4174ea420655235f910543f0ec3680566dcfdf84fb0a1697b592');
+                    }
+                });
+            });
+
+            it('loads peg out addresses', () => {
+                cy.visit(`${basePath}/tx/ecf6eba04ffb3946faa172343c87162df76f1a57b07b0d6dc6ad956b13376dc8`);
+                cy.waitForSkeletonGone();
+                cy.get('#table-tx-vout a').first().click().then(() => {
+                    cy.waitForSkeletonGone();
+                    if (baseModule === 'liquid') {
+                        cy.url().should('eq', 'https://mempool.space/address/1BxoGcMg14oaH3CwHD2hF4gU9VcfgX5yoR');
+                    } else {
+                        //TODO: Use an environment variable to get the hostname
+                        cy.url().should('eq', 'http://localhost:4200/address/1BxoGcMg14oaH3CwHD2hF4gU9VcfgX5yoR');
+                    }
+                    //TODO: Add a custom class so we don't assert on a string
+                    cy.get('.badge').should('contain','Liquid Peg Out');
+                });
+            });
+        });
+
         describe('assets', () => {
             it('shows the assets screen', () => {
                 cy.visit(`${basePath}/assets`);

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

@@ -2,6 +2,36 @@ import { emitMempoolInfo, dropWebSocket } from "../../support/websocket";
 
 const baseModule = Cypress.env("BASE_MODULE");
 
+
+//Credit: https://github.com/bahmutov/cypress-examples/blob/6cedb17f83a3bb03ded13cf1d6a3f0656ca2cdf5/docs/recipes/overlapping-elements.md
+
+/**
+ * Returns true if two DOM rectangles are overlapping
+ * @param {DOMRect} rect1 the bounding client rectangle of the first element
+ * @param {DOMRect} rect2 the bounding client rectangle of the second element
+ * @returns {boolean}
+*/
+const areOverlapping = (rect1, rect2) => {
+    // if one rectangle is on the left side of the other
+    if (rect1.right < rect2.left || rect2.right < rect1.left) {
+        return false
+    }
+
+    // if one rectangle is above the other
+    if (rect1.bottom < rect2.top || rect2.bottom < rect1.top) {
+        return false
+    }
+
+    // the rectangles must overlap
+    return true
+}
+
+/**
+ * Returns the bounding rectangle of the first DOM
+ * element in the given jQuery object.
+ */
+const getRectangle = ($el) => $el[0].getBoundingClientRect();
+
 describe('Mainnet', () => {
     beforeEach(() => {
         //cy.intercept('/sockjs-node/info*').as('socket');
@@ -56,7 +86,7 @@ describe('Mainnet', () => {
             cy.get('.badge', {timeout: 25000}).should('not.exist');
             emitMempoolInfo({
                 'params': {
-                loaded: true
+                    command: 'init'
                 }
             });
             cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
@@ -283,7 +313,7 @@ describe('Mainnet', () => {
 
             emitMempoolInfo({
                 'params': {
-                loaded: true
+                    command: 'init'
                 }
             });
 
@@ -428,6 +458,78 @@ describe('Mainnet', () => {
                 cy.get('.pagination-container ul.pagination').first().children().should('have.length', 7);
             });
         });
+
+        describe('RBF transactions', () => {
+            it('shows RBF transactions properly (mobile)', () => {
+                cy.viewport('iphone-xr');
+                cy.mockMempoolSocket();
+                cy.visit('/tx/f81a08699b62b2070ad8fe0f2a076f8bea0386a2fdcd8124caee42cbc564a0d5');
+
+                cy.waitForSkeletonGone();
+
+                emitMempoolInfo({
+                    'params': {
+                        command: 'init'
+                    }
+                });
+
+                cy.get('#mempool-block-0');
+
+                emitMempoolInfo({
+                    'params': {
+                        command: 'rbfTransaction'
+                    }
+                });
+
+                cy.get('.alert-mempool').should('be.visible');
+                cy.get('.alert-mempool').invoke('css', 'width').then((alertWidth) => {
+                    cy.get('.container-xl > :nth-child(3)').invoke('css', 'width').should('equal', alertWidth);
+                });
+
+                cy.get('.btn-success').then(getRectangle).then((rectA) => {
+                    cy.get('.alert-mempool').then(getRectangle).then((rectB) => {
+                        expect(areOverlapping(rectA, rectB), 'Confirmations box and RBF alert are overlapping').to.be.false;
+                    });
+                });
+            });
+
+            it('shows RBF transactions properly (desktop)', () => {
+                cy.viewport('macbook-16');
+                cy.mockMempoolSocket();
+                cy.visit('/tx/f81a08699b62b2070ad8fe0f2a076f8bea0386a2fdcd8124caee42cbc564a0d5');
+
+                cy.waitForSkeletonGone();
+
+                emitMempoolInfo({
+                    'params': {
+                        command: 'init'
+                    }
+                });
+
+                cy.get('#mempool-block-0');
+
+                emitMempoolInfo({
+                    'params': {
+                        command: 'rbfTransaction'
+                    }
+                });
+
+                cy.get('.alert-mempool').should('be.visible');
+
+                const alertLocator = '.alert-mempool';
+                const tableLocator = '.container-xl > :nth-child(3)';
+
+                cy.get(tableLocator).invoke('css', 'width').then((firstWidth) => {
+                    cy.get(alertLocator).invoke('css', 'width').should('equal', firstWidth);
+                });
+
+                cy.get('.btn-success').then(getRectangle).then((rectA) => {
+                    cy.get('.alert-mempool').then(getRectangle).then((rectB) => {
+                        expect(areOverlapping(rectA, rectB), 'Confirmations box and RBF alert are overlapping').to.be.false;
+                    });
+                });
+            });
+        });
     } else {
         it.skip(`Tests cannot be run on the selected BASE_MODULE ${baseModule}`);
     }

frontend/cypress/support/websocket.ts

@@ -31,19 +31,19 @@ export const mockWebSocket = () => {
 	cy.on('window:before:load', (win) => {
 		const winWebSocket = win.WebSocket;
 		cy.stub(win, 'WebSocket').callsFake((url) => {
-            console.log(url);
+			console.log(url);
 			if ((new URL(url).pathname.indexOf('/sockjs-node/') !== 0)) {
 				const { server, websocket } = createMock(url);
 
 				win.mockServer = server;
 				win.mockServer.on('connection', (socket) => {
 					win.mockSocket = socket;
-                    win.mockSocket.send('{"action":"init"}');
+					win.mockSocket.send('{"action":"init"}');
 				});
 
-                win.mockServer.on('message', (message) => {
-                    console.log(message);
-                });
+				win.mockServer.on('message', (message) => {
+					console.log(message);
+				});
 
 				return websocket;
 			} else {
@@ -68,7 +68,13 @@ export const emitMempoolInfo = ({
 			//TODO: Use network specific mocks
 			case "signet":
 			case "testnet":
+			case "mainnet":
 			default:
+				break;
+		}
+
+		switch (params.command) {
+			case "init": {
 				win.mockSocket.send('{"action":"init"}');
 				win.mockSocket.send('{"action":"want","data":["blocks","stats","mempool-blocks","live-2h-chart"]}');
 				win.mockSocket.send('{"conversions":{"USD":32365.338815782445}}');
@@ -78,6 +84,16 @@ export const emitMempoolInfo = ({
 				cy.readFile('cypress/fixtures/mainnet_mempoolInfo.json', 'ascii').then((fixture) => {
 					win.mockSocket.send(JSON.stringify(fixture));
 				});
+				break;
+			}
+			case "rbfTransaction": {
+				cy.readFile('cypress/fixtures/mainnet_rbf.json', 'ascii').then((fixture) => {
+					win.mockSocket.send(JSON.stringify(fixture));
+				});
+				break;
+			}
+			default:
+				break;
 		}
 	});
     cy.waitForSkeletonGone();
@@ -89,4 +105,4 @@ export const dropWebSocket = (() => {
         win.mockServer.simulate("error");
     });
     return cy.wait(500);
-});
+});

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

@@ -14,7 +14,7 @@ import { AssetsComponent } from './assets/assets.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
-import { ApiDocsComponent } from './components/api-docs/api-docs.component';
+import { DocsComponent } from './components/docs/docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
@@ -66,9 +66,21 @@ let routes: Routes = [
         path: 'about',
         component: AboutComponent,
       },
+      {
+        path: 'docs/api/:type',
+        component: DocsComponent
+      },
+      {
+        path: 'docs/api',
+        redirectTo: 'docs/api/rest'
+      },
+      {
+        path: 'docs',
+        redirectTo: 'docs/api/rest'
+      },
       {
         path: 'api',
-        component: ApiDocsComponent,
+        redirectTo: 'docs/api/rest'
       },
       {
         path: 'terms-of-service',
@@ -146,9 +158,21 @@ let routes: Routes = [
             path: 'assets',
             component: AssetsComponent,
           },
+          {
+            path: 'docs/api/:type',
+            component: DocsComponent
+          },
+          {
+            path: 'docs/api',
+            redirectTo: 'docs/api/rest'
+          },
+          {
+            path: 'docs',
+            redirectTo: 'docs/api/rest'
+          },
           {
             path: 'api',
-            component: ApiDocsComponent,
+            redirectTo: 'docs/api/rest'
           },
         ],
       },
@@ -212,9 +236,21 @@ let routes: Routes = [
             children: [],
             component: AddressComponent
           },
+          {
+            path: 'docs/api/:type',
+            component: DocsComponent
+          },
+          {
+            path: 'docs/api',
+            redirectTo: 'docs/api/rest'
+          },
+          {
+            path: 'docs',
+            redirectTo: 'docs/api/rest'
+          },
           {
             path: 'api',
-            component: ApiDocsComponent,
+            redirectTo: 'docs/api/rest'
           },
         ],
       },
@@ -278,9 +314,21 @@ let routes: Routes = [
             children: [],
             component: AddressComponent
           },
+          {
+            path: 'docs/api/:type',
+            component: DocsComponent
+          },
+          {
+            path: 'docs/api',
+            redirectTo: 'docs/api/rest'
+          },
+          {
+            path: 'docs',
+            redirectTo: 'docs/api/rest'
+          },
           {
             path: 'api',
-            component: ApiDocsComponent,
+            redirectTo: 'docs/api/rest'
           },
         ],
       },
@@ -380,9 +428,21 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
         path: 'assets',
         component: AssetsComponent,
       },
+      {
+        path: 'docs/api/:type',
+        component: DocsComponent
+      },
+      {
+        path: 'docs/api',
+        redirectTo: 'docs/api/rest'
+      },
+      {
+        path: 'docs',
+        redirectTo: 'docs/api/rest'
+      },
       {
         path: 'api',
-        component: ApiDocsComponent,
+        redirectTo: 'docs/api/rest'
       },
       {
         path: 'about',
@@ -429,3 +489,4 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
+

frontend/src/app/app.module.ts

@@ -48,9 +48,10 @@ import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
-import { ApiDocsComponent } from './components/api-docs/api-docs.component';
-import { CodeTemplateComponent } from './components/api-docs/code-template.component';
+  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook } from '@fortawesome/free-solid-svg-icons';
+import { ApiDocsComponent } from './components/docs/api-docs.component';
+import { DocsComponent } from './components/docs/docs.component';
+import { CodeTemplateComponent } from './components/docs/code-template.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
@@ -100,6 +101,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
     TrademarkPolicyComponent,
     SponsorComponent,
     PushTransactionComponent,
+    DocsComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
@@ -158,5 +160,6 @@ export class AppModule {
     library.addIcons(faCaretDown);
     library.addIcons(faAngleRight);
     library.addIcons(faAngleLeft);
+    library.addIcons(faBook);
   }
 }

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

@@ -7,7 +7,7 @@ import { BisqBlockComponent } from './bisq-block/bisq-block.component';
 import { BisqBlocksComponent } from './bisq-blocks/bisq-blocks.component';
 import { BisqAddressComponent } from './bisq-address/bisq-address.component';
 import { BisqStatsComponent } from './bisq-stats/bisq-stats.component';
-import { ApiDocsComponent } from '../components/api-docs/api-docs.component';
+import { DocsComponent } from '../components/docs/docs.component';
 import { BisqDashboardComponent } from './bisq-dashboard/bisq-dashboard.component';
 import { BisqMarketComponent } from './bisq-market/bisq-market.component';
 import { BisqMainDashboardComponent } from './bisq-main-dashboard/bisq-main-dashboard.component';
@@ -60,9 +60,21 @@ const routes: Routes = [
       path: 'about',
       component: AboutComponent,
     },
+    {
+      path: 'docs/api/:type',
+      component: DocsComponent
+    },
+    {
+      path: 'docs/api',
+      redirectTo: 'docs/api/rest'
+    },
+    {
+      path: 'docs',
+      redirectTo: 'docs/api/rest'
+    },
     {
       path: 'api',
-      component: ApiDocsComponent,
+      redirectTo: 'docs/api/rest'
     },
     {
       path: 'terms-of-service',

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

@@ -54,6 +54,10 @@
         <img class="image" src="/resources/profile/unchained.svg" />
         <span>Unchained</span>
       </a>
+      <a href="https://blockstream.com/" target="_blank" title="Blockstream">
+        <img class="image" src="/resources/profile/blockstream.svg" />
+        <span>Blockstream</span>
+      </a>
     </div>
   </div>
 

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

@@ -21,7 +21,10 @@
             <tbody>
               <tr *ngIf="addressInfo && addressInfo.unconfidential">
                 <td i18n="address.unconfidential">Unconfidential</td>
-                <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">{{ addressInfo.unconfidential }}</a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></td>
+                <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
+                  <span class="d-inline d-lg-none">{{ addressInfo.unconfidential | shortenString : 14 }}</span>
+                  <span class="d-none d-lg-inline">{{ addressInfo.unconfidential }}</span>
+                </a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></td>
               </tr>
               <ng-template [ngIf]="!address.electrum">
                 <tr>

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

@@ -1,899 +0,0 @@
-<ng-container *ngIf="{ val: network$ | async } as network">
-  <div class="container-xl text-left">
-    <div class="text-center">
-      <h2>{{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API Service</ng-container></h2>
-    </div>
-
-    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
-
-      <li *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [ngbNavItem]="0">
-        <a ngbNavLink i18n="api-docs.tab.general|API Docs tab for General">General</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark">
-            <ngb-panel id="difficultyAdjustment" *ngIf="network.val !== 'liquid'">
-              <ng-template ngbPanelTitle>
-                <span>GET Difficulty Adjustment</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="difficulty">
-                  <div class="endpoint">
-                    <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                    <a [href]="wrapUrl(network.val, code.difficulty)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/difficulty-adjustment</a>
-                  </div>
-                  <div class="description">
-                    <div class="subtitle" i18n>Description</div>
-                      <div i18n>Returns details about difficulty adjustment.</div>
-                  </div>
-                  <app-code-template [hostname]="hostname" [code]="code.difficulty" [network]="network.val" ></app-code-template>
-                </div>
-              </ng-template>
-            </ngb-panel>
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li *ngIf="network.val === 'bisq'" [ngbNavItem]="0">
-        <a ngbNavLink i18n="Bisq All Markets">Markets</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-
-            <ngb-panel id="bisqMarketsCurrencies">
-              <ng-template ngbPanelTitle>
-                <span>GET Market Currencies</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.marketsCurrencies)" target="_blank">GET {{ baseNetworkUrl }}/api/currencies</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Provides list of available currencies for a given base currency. </div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.marketsCurrencies" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="marketDepth">
-              <ng-template ngbPanelTitle>
-                <span>GET Market Depth</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.marketDepth)" target="_blank">GET {{ baseNetworkUrl }}/api/depth?market=[:market]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Provides list of open offer prices for a single market.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.marketDepth" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="bisqMarketsHloc">
-              <ng-template ngbPanelTitle>
-                <span>GET Market HLOC</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.marketHloc)" target="_blank">GET {{ baseNetworkUrl }}/api/hloc?market=[:market]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Provides hi/low/open/close data for a given market. This can be used to generate a candlestick chart.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.marketHloc" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="bisqMarketsMarkets">
-              <ng-template ngbPanelTitle>
-                <span>GET Markets</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.markets)" target="_blank">GET {{ baseNetworkUrl }}/api/markets</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Provides list of available markets.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.markets" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="bisqMarketsOffers">
-              <ng-template ngbPanelTitle>
-                <span>GET Market Offers</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.marketOffers)" target="_blank">GET {{ baseNetworkUrl }}/api/offers?market=[:market]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Provides list of open offer details for a single market.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.marketOffers" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="bisqMarketsTicker">
-              <ng-template ngbPanelTitle>
-                <span>GET Market Ticker</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.marketTicker)" target="_blank">GET {{ baseNetworkUrl }}/api/ticker?market=[:market]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Provides 24 hour price ticker for single market or all markets</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.marketTicker" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="bisqMarketsTrades">
-              <ng-template ngbPanelTitle>
-                <span>GET Market Trades</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.marketTrades)" target="_blank">GET {{ baseNetworkUrl }}/api/trades?market=[:market]&limit=[:limit]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Provides list of completed trades for a single market.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.marketTrades" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="bisqMarketsVolumes">
-              <ng-template ngbPanelTitle>
-                <span>GET Market Volumes</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.marketVolumes)" target="_blank">GET {{ baseNetworkUrl }}/api/volumes?basecurrency=[:basecurrency]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Provides periodic volume data in terms of base currency for one or all markets.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.marketVolumes" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li *ngIf="network.val === 'bisq'" [ngbNavItem]="1">
-        <a ngbNavLink i18n="api-docs.tab.bsq|API Docs tab for BSQ">General</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-
-            <ngb-panel id="bisqStats">
-              <ng-template ngbPanelTitle>
-                <span>GET Stats</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.stats)" target="_blank'" target="_blank">GET {{ baseNetworkUrl }}/api/stats</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns statistics about all Bisq transactions.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.stats" [network]="network.val"></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li [ngbNavItem]="2">
-        <a ngbNavLink i18n="api-docs.tab.addresses|API Docs tab for Addresses">Addresses</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-            <ngb-panel id="address">
-              <ng-template ngbPanelTitle>
-                <span>GET Address</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.address)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                    <div i18n>Returns details about an address. Available fields: <code>address</code>, <code>chain_stats</code>, and <code>mempool_stats</code>. {{ '{' }}chain,mempool{{ '}' }}_stats each contain an object with <code>tx_count</code>, <code>funded_txo_count</code>, <code>funded_txo_sum</code>, <code>spent_txo_count</code>, and <code>spent_txo_sum</code>.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.address" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'"  id="addressTransactions">
-              <ng-template ngbPanelTitle>
-                <span>GET Address Transactions</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.addressTransactions)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Get transaction history for the specified address/scripthash, sorted with newest first. Returns up to 50 mempool transactions plus the first 25 confirmed transactions. You can request more confirmed transactions using <code>:last_seen_txid</code> (see below).</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.addressTransactions" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="addressTransactionsChain">
-              <ng-template ngbPanelTitle>
-                <span>GET Address Transactions Chain</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.addressTransactionsChain)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs/chain</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Get confirmed transaction history for the specified address/scripthash, sorted with newest first. Returns 25 transactions per page. More can be requested by specifying the last txid seen by the previous query.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.addressTransactionsChain" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="addressTransactionsMempool">
-              <ng-template ngbPanelTitle>
-                <span>GET Address Transactions Mempool</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.addressTransactionsMempool)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs/mempool</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Get unconfirmed transaction history for the specified address/scripthash. Returns up to 50 transactions (no paging).</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.addressTransactionsMempool" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="addressUTXO">
-              <ng-template ngbPanelTitle>
-                <span>GET Address UTXO</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.addressUTXO)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/utxo</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Get the list of unspent transaction outputs associated with the address/scripthash. Available fields: <code>txid</code>, <code>vout</code>, <code>value</code>, and <code>status</code> (with the status of the funding tx).<ng-container *ngIf="network.val === 'liquid'">There is also a <code>valuecommitment</code> field that may appear in place of <code>value</code>, plus the following additional fields: <code>asset</code>/<code>assetcommitment</code>, <code>nonce</code>/<code>noncecommitment</code>, <code>surjection_proof</code>, and <code>range_proof</code>.</ng-container></div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.addressUTXO" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li *ngIf="network.val === 'liquid'" [ngbNavItem]="3">
-        <a ngbNavLink i18n="api-docs.tab.assets|API Docs tab for Assets">Assets</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-
-            <ngb-panel id="assets">
-              <ng-template ngbPanelTitle>
-                <span>GET Assets</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.assets)" target="_blank">GET /liquid/api/asset/:asset_id</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns information about a Liquid asset.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.assets" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="assetTransactions">
-              <ng-template ngbPanelTitle>
-                <span>GET Asset Transactions</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <a [href]="wrapUrl(network.val, code.assetTransactions)" target="_blank">GET /liquid/api/asset/:asset_id/txs[/mempool|/chain]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns transactions associated with the specified Liquid asset. For the network's native asset, returns a list of peg in, peg out, and burn transactions. For user-issued assets, returns a list of issuance, reissuance, and burn transactions. Does not include regular transactions transferring this asset.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.assetTransactions" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="assetSupply">
-              <ng-template ngbPanelTitle>
-                <span>GET Asset Supply</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.assetSupply)" target="_blank">GET /liquid/api/asset/:asset_id/supply[/decimal]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Get the current total supply of the specified asset. For the native asset (L-BTC), this is calculated as [chain,mempool]_stats.peg_in_amount - [chain,mempool]_stats.peg_out_amount - [chain,mempool]_stats.burned_amount. For issued assets, this is calculated as [chain,mempool]_stats.issued_amount - [chain,mempool]_stats.burned_amount. Not available for assets with blinded issuances. If /decimal is specified, returns the supply as a decimal according to the asset's divisibility. Otherwise, returned in base units.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.assetSupply" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li [ngbNavItem]="4">
-        <a ngbNavLink i18n="api-docs.tab.blocks|API Docs tab for Blocks">Blocks</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-
-            <ngb-panel id="block">
-              <ng-template ngbPanelTitle>
-                <span>GET Block</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.block)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns details about a block. Available fields: <code>id</code>, <code>height</code>, <code>version</code>, <code>timestamp</code>, <code>bits</code>, <code>nonce</code>, <code>merkle_root</code>, <code>tx_count</code>, <code>size</code>, <code>weight</code>,<ng-container *ngIf="network.val === 'liquid'"> <code>proof</code>,</ng-container> and <code>previousblockhash</code>.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.block" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blockHeader">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Header</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blockHeader)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/header</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the hex-encoded block header.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockHeader" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blockHeight">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Height</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blockHeader)" target="_blank">GET {{ baseNetworkUrl }}/api/block-height/:height</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the hash of the block currently at <code>:height</code>.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockHeight" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blockRaw">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Raw</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <a [href]="wrapUrl(network.val, code.blockRaw)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/raw</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the raw block representation in binary.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockRaw" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blockStatus">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Status</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="title">Get Block Status</div>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blockStatus)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/status</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the confirmation status of a block. Available fields: <code>in_best_chain</code> (boolean, false for orphaned blocks), <code>next_best</code> (the hash of the next block, only available for blocks in the best chain).</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockStatus" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="blockTipHeight">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Tip Height</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blockTipHeight)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/tip/height</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the height of the last block.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockTipHeight" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTipHash">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Tip Hash</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blockTipHash)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/tip/hash</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the hash of the last block.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockTipHash" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxId">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Transaction ID</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blockTxId)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txid/:index</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the transaction at index <code>:index</code> within the specified block.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockTxId" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxIds">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Transaction IDs</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blockTxIds)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txids</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns a list of all txids in the block.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockTxIds" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxs">
-              <ng-template ngbPanelTitle>
-                <span>GET Block Transactions</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blockTxs)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txs[/:start_index]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns a list of transactions in the block (up to 25 transactions beginning at <code>start_index</code>). Transactions returned here do not have the <code>status</code> field, since all the transactions share the same block and confirmation status.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blockTxs" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="blocks">
-              <ng-template ngbPanelTitle>
-                <span>GET Blocks</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blocks)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks[/:start_height]</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the 10 newest blocks starting at the tip or at <code>:start_height</code> if specified.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blocks" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val === 'bisq'" id="blocks">
-              <ng-template ngbPanelTitle>
-                <span>GET Blocks</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.blocksBisq)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/:index/:length</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the 10 newest blocks starting at the tip or at <code>:start_height</code> if specified.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.blocksBisq" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="5">
-        <a ngbNavLink i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark">
-
-            <ngb-panel id="feeMempoolBlocks">
-              <ng-template ngbPanelTitle>
-                <span>GET Mempool Blocks Fees</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.feeMempoolBlocks)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/fees/mempool-blocks</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.feeMempoolBlocks" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="feeRecommended">
-              <ng-template ngbPanelTitle>
-                <span>GET Recommended Fees</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.feeRecommended)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/fees/recommended</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.feeRecommended" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="6">
-        <a ngbNavLink i18n="api-docs.tab.mempool|API Docs tab for Mempool">Mempool</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-
-            <ngb-panel id="mempool">
-              <ng-template ngbPanelTitle>
-                <span>GET Mempool</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.mempool)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n="api-docs.mempool.mempool|API Docs for /api/mempool">Returns current mempool backlog statistics.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.mempool" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="mempoolTxs">
-              <ng-template ngbPanelTitle>
-                <span>GET Mempool Transactions IDs</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.mempoolTxs)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool/txids</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n="api-docs.mempool.txids|API Docs for /api/mempool/txids">Get the full list of txids in the mempool as an array. The order of the txids is arbitrary and does not match bitcoind.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.mempoolTxs" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="mempoolRecent">
-              <ng-template ngbPanelTitle>
-                <span>GET Mempool Recent</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.mempoolRecent)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool/recent</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n="api-docs.mempool.recent|API Docs for /api/mempool/recent">Get a list of the last 10 transactions to enter the mempool. Each transaction object contains simplified overview data, with the following fields: <code>txid</code>, <code>fee</code>, <code>vsize</code>, and <code>value</code>.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.mempoolRecent" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li [ngbNavItem]="7">
-        <a ngbNavLink i18n="api-docs.tab.transactions|API Docs tab for Transactions">Transactions</a>
-        <ng-template ngbNavContent>
-          <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="cpfp">
-              <ng-template ngbPanelTitle>
-                <span>GET Children Pay for Parent</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.transactionCpfp)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/cpfp/:txid</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n="api-docs.fees.cpfp|API Docs for /api/v1/fees/cpfp">Returns the ancestors and the best descendant fees for a transaction.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionCpfp" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel id="transaction">
-              <ng-template ngbPanelTitle>
-                <span>GET Transaction</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <a [href]="wrapUrl(network.val, code.transaction)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns details about a transaction. Available fields: <code>txid</code>, <code>version</code>, <code>locktime</code>, <code>size</code>, <code>weight</code>, <code>fee</code>, <code>vin</code>, <code>vout</code>, and <code>status</code>.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transaction" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionHex">
-              <ng-template ngbPanelTitle>
-                <span>GET Transaction Hex</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                    <a [href]="wrapUrl(network.val, code.transactionHex)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/hex</a>
-                  </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns a transaction serialized as hex.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionHex" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" id="transactionMerkleBlockProof">
-              <ng-template ngbPanelTitle>
-                <span>GET Transaction Merkleblock Proof</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.transactionMerkleBlockProof)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/merkleblock-proof</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns a merkle inclusion proof for the transaction using <a href="https://bitcoin.org/en/glossary/merkle-block">bitcoind's merkleblock</a> format.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionMerkleBlockProof" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionMerkleProof">
-              <ng-template ngbPanelTitle>
-                <span>GET Transaction Merkle Proof</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.transactionMerkleProof)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/merkle-proof</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns a merkle inclusion proof for the transaction using <a href="https://electrumx.readthedocs.io/en/latest/protocol-methods.html#blockchain-transaction-get-merkle">Electrum's blockchain.transaction.get_merkle format.</a></div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionMerkleProof" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionOutspend">
-              <ng-template ngbPanelTitle>
-                <span>GET Transaction Outspend</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.transactionOutspend)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/outspend/:vout</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the spending status of a transaction output. Available fields: <code>spent</code> (boolean), <code>txid</code> (optional), <code>vin</code> (optional), and <code>status</code> (optional, the status of the spending tx).</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionOutspend" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionOutspends">
-              <ng-template ngbPanelTitle>
-                <span>GET Transaction Outspends</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.transactionOutspends)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/outspends</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the spending status of all transaction outputs.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionOutspends" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionRaw">
-              <ng-template ngbPanelTitle>
-                <span>GET Transaction Raw</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.transactionRaw)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/raw</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns a transaction as binary data.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionRaw" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionStatus">
-              <ng-template ngbPanelTitle>
-                <span>GET Transaction Status</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.transactionStatus)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/status</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns the confirmation status of a transaction. Available fields: <code>confirmed</code> (boolean), <code>block_height</code> (optional), and <code>block_hash</code> (optional).</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionStatus" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val === 'bisq'" id="transactionsBisq">
-              <ng-template ngbPanelTitle>
-                <span>GET Transactions</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="title">Get Mempool Txids</div>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <a [href]="wrapUrl(network.val, code.transactionsBisq)" target="_blank">GET {{ baseNetworkUrl }}/api/txs/:index/:length</a>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Returns :length of latest Bisq transactions, starting from :index.</div>
-                </div>
-                <app-code-template [hostname]="hostname" [code]="code.transactionsBisq" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-            <ngb-panel *ngIf="network.val !== 'bisq'" id="postTransaction">
-              <ng-template ngbPanelTitle>
-                <span>POST Transaction</span>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <div class="endpoint">
-                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                  <div>POST /api/tx</div>
-                </div>
-                <div class="description">
-                  <div class="subtitle" i18n>Description</div>
-                  <div i18n>Broadcast a raw transaction to the network. The transaction should be provided as hex in the request body. The <code>txid</code> will be returned on success.</div>
-                </div>
-                <app-code-template [method]="'post'" [hostname]="hostname" [code]="code.transactionPost" [network]="network.val" ></app-code-template>
-              </ng-template>
-            </ngb-panel>
-
-          </ngb-accordion>
-        </ng-template>
-      </li>
-
-      <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="8">
-        <a ngbNavLink i18n="api-docs.tab.websocket|API Docs tab for Websocket">Websocket</a>
-        <ng-template ngbNavContent >
-          <div class="websocket">
-            <div class="endpoint">
-              <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-              {{ wrapUrl(network.val, code.websocket, true) }}
-            </div>
-            <div class="description">
-              <div class="subtitle" i18n>Description</div>
-              <div i18n="api-docs.websocket.websocket">Default push: <code>{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</code> to express what you want pushed. Available: <code>blocks</code>, <code>mempool-blocks</code>, <code>live-2h-chart</code>, and <code>stats</code>.<br><br>Push transactions related to address: <code>{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</code> to receive all new transactions containing that address as input or output. Returns an array of transactions. <code>address-transactions</code> for new mempool transactions, and <code>block-transactions</code> for new block confirmed transactions.</div>
-            </div>
-            <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="code.websocket" [network]="network.val" ></app-code-template>
-          </div>
-        </ng-template>
-      </li>
-
-    </ul>
-
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
-
-    <br>
-
-    <div class="text-center">
-      <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
-      |
-      <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
-    </div>
-
-  </div>
-</ng-container>

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

@@ -38,8 +38,8 @@
       <li class="nav-item" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/stats']" (click)="collapse()"><fa-icon [icon]="['fas', 'file-alt']" [fixedWidth]="true"  i18n-title="master-page.stats" title="Stats"></fa-icon></a>
       </li>
-      <li class="nav-item mr-2" routerLinkActive="active">
-        <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/docs']" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true"  i18n-title="master-page.docs" title="Docs"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>

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

@@ -0,0 +1,3 @@
+.btn-link {
+  padding: 0.25rem 0 0.1rem 0.5rem;
+}

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

@@ -0,0 +1,880 @@
+<ng-container *ngIf="{ val: network$ | async } as network">
+  <div class="container-xl text-left">
+
+    <div id="restAPI" *ngIf="restTabActivated">
+
+      <p>Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
+
+      <div class="api-category" *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">
+        <h4 i18n="api-docs.tab.general|API Docs tab for General">General</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark">
+
+          <ngb-panel id="difficultyAdjustment" *ngIf="network.val !== 'liquid'">
+            <ng-template ngbPanelTitle>
+              <span>GET Difficulty Adjustment</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="difficulty">
+                <div class="endpoint">
+                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                  <a [href]="wrapUrl(network.val, code.difficulty)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/difficulty-adjustment</a>
+                </div>
+                <div class="description">
+                  <div class="subtitle" i18n>Description</div>
+                    <div i18n>Returns details about difficulty adjustment.</div>
+                </div>
+                <app-code-template [hostname]="hostname" [code]="code.difficulty" [network]="network.val" ></app-code-template>
+              </div>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+
+      <div class="api-category" *ngIf="network.val === 'bisq'">
+        <h4 i18n="Bisq All Markets">Markets</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel id="bisqMarketsCurrencies">
+            <ng-template ngbPanelTitle>
+              <span>GET Market Currencies</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.marketsCurrencies)" target="_blank">GET {{ baseNetworkUrl }}/api/currencies</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Provides list of available currencies for a given base currency. </div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.marketsCurrencies" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="marketDepth">
+            <ng-template ngbPanelTitle>
+              <span>GET Market Depth</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.marketDepth)" target="_blank">GET {{ baseNetworkUrl }}/api/depth?market=[:market]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Provides list of open offer prices for a single market.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.marketDepth" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="bisqMarketsHloc">
+            <ng-template ngbPanelTitle>
+              <span>GET Market HLOC</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.marketHloc)" target="_blank">GET {{ baseNetworkUrl }}/api/hloc?market=[:market]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Provides hi/low/open/close data for a given market. This can be used to generate a candlestick chart.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.marketHloc" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="bisqMarketsMarkets">
+            <ng-template ngbPanelTitle>
+              <span>GET Markets</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.markets)" target="_blank">GET {{ baseNetworkUrl }}/api/markets</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Provides list of available markets.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.markets" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="bisqMarketsOffers">
+            <ng-template ngbPanelTitle>
+              <span>GET Market Offers</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.marketOffers)" target="_blank">GET {{ baseNetworkUrl }}/api/offers?market=[:market]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Provides list of open offer details for a single market.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.marketOffers" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="bisqMarketsTicker">
+            <ng-template ngbPanelTitle>
+              <span>GET Market Ticker</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.marketTicker)" target="_blank">GET {{ baseNetworkUrl }}/api/ticker?market=[:market]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Provides 24 hour price ticker for single market or all markets</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.marketTicker" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="bisqMarketsTrades">
+            <ng-template ngbPanelTitle>
+              <span>GET Market Trades</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.marketTrades)" target="_blank">GET {{ baseNetworkUrl }}/api/trades?market=[:market]&limit=[:limit]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Provides list of completed trades for a single market.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.marketTrades" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="bisqMarketsVolumes">
+            <ng-template ngbPanelTitle>
+              <span>GET Market Volumes</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.marketVolumes)" target="_blank">GET {{ baseNetworkUrl }}/api/volumes?basecurrency=[:basecurrency]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Provides periodic volume data in terms of base currency for one or all markets.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.marketVolumes" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+
+      <div class="api-category" *ngIf="network.val === 'bisq'">
+        <h4 ngbNavLink i18n="api-docs.tab.bsq|API Docs tab for BSQ">General</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel id="bisqStats">
+            <ng-template ngbPanelTitle>
+              <span>GET Stats</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.stats)" target="_blank'" target="_blank">GET {{ baseNetworkUrl }}/api/stats</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns statistics about all Bisq transactions.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.stats" [network]="network.val"></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+
+      <div class="api-category">
+        <h4 i18n="api-docs.tab.addresses|API Docs tab for Addresses">Addresses</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel id="address">
+            <ng-template ngbPanelTitle>
+              <span>GET Address</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.address)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                  <div i18n>Returns details about an address. Available fields: <code>address</code>, <code>chain_stats</code>, and <code>mempool_stats</code>. {{ '{' }}chain,mempool{{ '}' }}_stats each contain an object with <code>tx_count</code>, <code>funded_txo_count</code>, <code>funded_txo_sum</code>, <code>spent_txo_count</code>, and <code>spent_txo_sum</code>.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.address" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'"  id="addressTransactions">
+            <ng-template ngbPanelTitle>
+              <span>GET Address Transactions</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.addressTransactions)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Get transaction history for the specified address/scripthash, sorted with newest first. Returns up to 50 mempool transactions plus the first 25 confirmed transactions. You can request more confirmed transactions using <code>:last_seen_txid</code> (see below).</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.addressTransactions" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="addressTransactionsChain">
+            <ng-template ngbPanelTitle>
+              <span>GET Address Transactions Chain</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.addressTransactionsChain)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs/chain</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Get confirmed transaction history for the specified address/scripthash, sorted with newest first. Returns 25 transactions per page. More can be requested by specifying the last txid seen by the previous query.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.addressTransactionsChain" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="addressTransactionsMempool">
+            <ng-template ngbPanelTitle>
+              <span>GET Address Transactions Mempool</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.addressTransactionsMempool)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs/mempool</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Get unconfirmed transaction history for the specified address/scripthash. Returns up to 50 transactions (no paging).</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.addressTransactionsMempool" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="addressUTXO">
+            <ng-template ngbPanelTitle>
+              <span>GET Address UTXO</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.addressUTXO)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/utxo</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Get the list of unspent transaction outputs associated with the address/scripthash. Available fields: <code>txid</code>, <code>vout</code>, <code>value</code>, and <code>status</code> (with the status of the funding tx).<ng-container *ngIf="network.val === 'liquid'">There is also a <code>valuecommitment</code> field that may appear in place of <code>value</code>, plus the following additional fields: <code>asset</code>/<code>assetcommitment</code>, <code>nonce</code>/<code>noncecommitment</code>, <code>surjection_proof</code>, and <code>range_proof</code>.</ng-container></div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.addressUTXO" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+
+      <div class="api-category" *ngIf="network.val === 'liquid'">
+        <h4 i18n="api-docs.tab.assets|API Docs tab for Assets">Assets</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel id="assets">
+            <ng-template ngbPanelTitle>
+              <span>GET Assets</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.assets)" target="_blank">GET /liquid/api/asset/:asset_id</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns information about a Liquid asset.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.assets" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="assetTransactions">
+            <ng-template ngbPanelTitle>
+              <span>GET Asset Transactions</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <a [href]="wrapUrl(network.val, code.assetTransactions)" target="_blank">GET /liquid/api/asset/:asset_id/txs[/mempool|/chain]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns transactions associated with the specified Liquid asset. For the network's native asset, returns a list of peg in, peg out, and burn transactions. For user-issued assets, returns a list of issuance, reissuance, and burn transactions. Does not include regular transactions transferring this asset.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.assetTransactions" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="assetSupply">
+            <ng-template ngbPanelTitle>
+              <span>GET Asset Supply</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.assetSupply)" target="_blank">GET /liquid/api/asset/:asset_id/supply[/decimal]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Get the current total supply of the specified asset. For the native asset (L-BTC), this is calculated as [chain,mempool]_stats.peg_in_amount - [chain,mempool]_stats.peg_out_amount - [chain,mempool]_stats.burned_amount. For issued assets, this is calculated as [chain,mempool]_stats.issued_amount - [chain,mempool]_stats.burned_amount. Not available for assets with blinded issuances. If /decimal is specified, returns the supply as a decimal according to the asset's divisibility. Otherwise, returned in base units.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.assetSupply" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+
+      <div class="api-category">
+        <h4 i18n="api-docs.tab.blocks|API Docs tab for Blocks">Blocks</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel id="block">
+            <ng-template ngbPanelTitle>
+              <span>GET Block</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.block)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns details about a block. Available fields: <code>id</code>, <code>height</code>, <code>version</code>, <code>timestamp</code>, <code>bits</code>, <code>nonce</code>, <code>merkle_root</code>, <code>tx_count</code>, <code>size</code>, <code>weight</code>,<ng-container *ngIf="network.val === 'liquid'"> <code>proof</code>,</ng-container> and <code>previousblockhash</code>.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.block" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockHeader">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Header</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blockHeader)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/header</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the hex-encoded block header.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockHeader" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockHeight">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Height</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blockHeader)" target="_blank">GET {{ baseNetworkUrl }}/api/block-height/:height</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the hash of the block currently at <code>:height</code>.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockHeight" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockRaw">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Raw</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <a [href]="wrapUrl(network.val, code.blockRaw)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/raw</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the raw block representation in binary.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockRaw" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockStatus">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Status</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="title">Get Block Status</div>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blockStatus)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/status</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the confirmation status of a block. Available fields: <code>in_best_chain</code> (boolean, false for orphaned blocks), <code>next_best</code> (the hash of the next block, only available for blocks in the best chain).</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockStatus" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="blockTipHeight">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Tip Height</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blockTipHeight)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/tip/height</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the height of the last block.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockTipHeight" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTipHash">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Tip Hash</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blockTipHash)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/tip/hash</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the hash of the last block.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockTipHash" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxId">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Transaction ID</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blockTxId)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txid/:index</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the transaction at index <code>:index</code> within the specified block.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockTxId" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxIds">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Transaction IDs</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blockTxIds)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txids</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns a list of all txids in the block.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockTxIds" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxs">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Transactions</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blockTxs)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txs[/:start_index]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns a list of transactions in the block (up to 25 transactions beginning at <code>start_index</code>). Transactions returned here do not have the <code>status</code> field, since all the transactions share the same block and confirmation status.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blockTxs" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="blocks">
+            <ng-template ngbPanelTitle>
+              <span>GET Blocks</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blocks)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks[/:start_height]</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the 10 newest blocks starting at the tip or at <code>:start_height</code> if specified.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blocks" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val === 'bisq'" id="blocks">
+            <ng-template ngbPanelTitle>
+              <span>GET Blocks</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.blocksBisq)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/:index/:length</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the 10 newest blocks starting at the tip or at <code>:start_height</code> if specified.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.blocksBisq" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+
+      <div class="api-category" *ngIf="network.val !== 'bisq'">
+        <h4 i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark">
+
+          <ngb-panel id="feeMempoolBlocks">
+            <ng-template ngbPanelTitle>
+              <span>GET Mempool Blocks Fees</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.feeMempoolBlocks)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/fees/mempool-blocks</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.feeMempoolBlocks" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="feeRecommended">
+            <ng-template ngbPanelTitle>
+              <span>GET Recommended Fees</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.feeRecommended)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/fees/recommended</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.feeRecommended" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+
+      <div class="api-category" *ngIf="network.val !== 'bisq'">
+        <h4 i18n="api-docs.tab.mempool|API Docs tab for Mempool">Mempool</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel id="mempool">
+            <ng-template ngbPanelTitle>
+              <span>GET Mempool</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.mempool)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.mempool.mempool|API Docs for /api/mempool">Returns current mempool backlog statistics.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.mempool" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="mempoolTxs">
+            <ng-template ngbPanelTitle>
+              <span>GET Mempool Transactions IDs</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.mempoolTxs)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool/txids</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.mempool.txids|API Docs for /api/mempool/txids">Get the full list of txids in the mempool as an array. The order of the txids is arbitrary and does not match bitcoind.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.mempoolTxs" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="mempoolRecent">
+            <ng-template ngbPanelTitle>
+              <span>GET Mempool Recent</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.mempoolRecent)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool/recent</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.mempool.recent|API Docs for /api/mempool/recent">Get a list of the last 10 transactions to enter the mempool. Each transaction object contains simplified overview data, with the following fields: <code>txid</code>, <code>fee</code>, <code>vsize</code>, and <code>value</code>.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.mempoolRecent" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+
+      <div class="api-category">
+        <h4 i18n="api-docs.tab.transactions|API Docs tab for Transactions">Transactions</h4>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="cpfp">
+            <ng-template ngbPanelTitle>
+              <span>GET Children Pay for Parent</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.transactionCpfp)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/cpfp/:txid</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.cpfp|API Docs for /api/v1/fees/cpfp">Returns the ancestors and the best descendant fees for a transaction.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionCpfp" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel id="transaction">
+            <ng-template ngbPanelTitle>
+              <span>GET Transaction</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <a [href]="wrapUrl(network.val, code.transaction)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns details about a transaction. Available fields: <code>txid</code>, <code>version</code>, <code>locktime</code>, <code>size</code>, <code>weight</code>, <code>fee</code>, <code>vin</code>, <code>vout</code>, and <code>status</code>.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transaction" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionHex">
+            <ng-template ngbPanelTitle>
+              <span>GET Transaction Hex</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                  <a [href]="wrapUrl(network.val, code.transactionHex)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/hex</a>
+                </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns a transaction serialized as hex.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionHex" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" id="transactionMerkleBlockProof">
+            <ng-template ngbPanelTitle>
+              <span>GET Transaction Merkleblock Proof</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.transactionMerkleBlockProof)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/merkleblock-proof</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns a merkle inclusion proof for the transaction using <a href="https://bitcoin.org/en/glossary/merkle-block">bitcoind's merkleblock</a> format.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionMerkleBlockProof" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionMerkleProof">
+            <ng-template ngbPanelTitle>
+              <span>GET Transaction Merkle Proof</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.transactionMerkleProof)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/merkle-proof</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns a merkle inclusion proof for the transaction using <a href="https://electrumx.readthedocs.io/en/latest/protocol-methods.html#blockchain-transaction-get-merkle">Electrum's blockchain.transaction.get_merkle format.</a></div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionMerkleProof" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionOutspend">
+            <ng-template ngbPanelTitle>
+              <span>GET Transaction Outspend</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.transactionOutspend)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/outspend/:vout</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the spending status of a transaction output. Available fields: <code>spent</code> (boolean), <code>txid</code> (optional), <code>vin</code> (optional), and <code>status</code> (optional, the status of the spending tx).</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionOutspend" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionOutspends">
+            <ng-template ngbPanelTitle>
+              <span>GET Transaction Outspends</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.transactionOutspends)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/outspends</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the spending status of all transaction outputs.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionOutspends" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionRaw">
+            <ng-template ngbPanelTitle>
+              <span>GET Transaction Raw</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.transactionRaw)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/raw</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns a transaction as binary data.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionRaw" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionStatus">
+            <ng-template ngbPanelTitle>
+              <span>GET Transaction Status</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.transactionStatus)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/status</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the confirmation status of a transaction. Available fields: <code>confirmed</code> (boolean), <code>block_height</code> (optional), and <code>block_hash</code> (optional).</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionStatus" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val === 'bisq'" id="transactionsBisq">
+            <ng-template ngbPanelTitle>
+              <span>GET Transactions</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="title">Get Mempool Txids</div>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a [href]="wrapUrl(network.val, code.transactionsBisq)" target="_blank">GET {{ baseNetworkUrl }}/api/txs/:index/:length</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns :length of latest Bisq transactions, starting from :index.</div>
+              </div>
+              <app-code-template [hostname]="hostname" [code]="code.transactionsBisq" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+          <ngb-panel *ngIf="network.val !== 'bisq'" id="postTransaction">
+            <ng-template ngbPanelTitle>
+              <span>POST Transaction</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <div>POST /api/tx</div>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Broadcast a raw transaction to the network. The transaction should be provided as hex in the request body. The <code>txid</code> will be returned on success.</div>
+              </div>
+              <app-code-template [method]="'post'" [hostname]="hostname" [code]="code.transactionPost" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
+        </ngb-accordion>
+      </div>
+    </div>
+
+    <div id="websocketAPI" *ngIf="!restTabActivated && ( network.val !== 'bisq' )">
+      <div class="api-category">
+        <div class="websocket">
+          <div class="endpoint">
+            <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+            {{ wrapUrl(network.val, code.websocket, true) }}
+          </div>
+          <div class="description">
+            <div class="subtitle" i18n>Description</div>
+            <div i18n="api-docs.websocket.websocket">Default push: <code>{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</code> to express what you want pushed. Available: <code>blocks</code>, <code>mempool-blocks</code>, <code>live-2h-chart</code>, and <code>stats</code>.<br><br>Push transactions related to address: <code>{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</code> to receive all new transactions containing that address as input or output. Returns an array of transactions. <code>address-transactions</code> for new mempool transactions, and <code>block-transactions</code> for new block confirmed transactions.</div>
+          </div>
+          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="code.websocket" [network]="network.val" ></app-code-template>
+        </div>
+      </div>
+    </div>
+
+    <br>
+
+    <div class="text-center">
+      <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+      |
+      <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
+    </div>
+
+  </div>
+</ng-container>

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

@@ -29,7 +29,7 @@ li.nav-item {
   }
 }
 
-.code-tab { 
+.code-tab {
   width: auto;
   margin: 20px auto 10px;
   li.nav-item {
@@ -67,10 +67,15 @@ li.nav-item {
   height: 1px;
   background: #333;
 }
-.websocket {
-  padding: 15px;
-}
 
 .difficulty {
   padding: 15px;
-}
+}
+
+#restAPI .api-category {
+  margin: 30px 0;
+}
+
+.api-category h4 {
+  margin-bottom: 15px;
+}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { Env, StateService } from 'src/app/services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
@@ -16,6 +16,7 @@ export class ApiDocsComponent implements OnInit {
   env: Env;
   code: any;
   baseNetworkUrl = '';
+  @Input() restTabActivated: Boolean;
 
   constructor(
     private stateService: StateService,

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

@@ -0,0 +1,31 @@
+<div class="container-xl">
+  <div class="text-center">
+
+    <h2 i18n="documentation.title">Documentation</h2>
+
+    <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
+
+      <li [ngbNavItem]="0">
+        <a ngbNavLink routerLink="../rest">API - REST</a>
+        <ng-template ngbNavContent>
+
+          <app-api-docs [restTabActivated]="true"></app-api-docs>
+
+        </ng-template>
+      </li>
+
+      <li [ngbNavItem]="1" *ngIf="showWebSocketTab">
+        <a ngbNavLink routerLink="../websocket">API - WebSocket</a>
+        <ng-template ngbNavContent>
+
+          <app-api-docs [restTabActivated]="false"></app-api-docs>
+
+        </ng-template>
+      </li>
+
+    </ul>
+
+    <div id="main-tab-content" [ngbNavOutlet]="nav" class="mt-2"></div>
+
+  </div>
+</div>

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

@@ -0,0 +1,4 @@
+#main-tab-content {
+  text-align: left;
+  padding-top: 10px;
+}

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

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Env, StateService } from 'src/app/services/state.service';
+
+@Component({
+  selector: 'app-docs',
+  templateUrl: './docs.component.html',
+  styleUrls: ['./docs.component.scss']
+})
+export class DocsComponent implements OnInit {
+
+  activeTab = 0;
+  env: Env;
+  showWebSocketTab = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit(): void {
+    const url = this.route.snapshot.url;
+    this.activeTab = ( url[2].path === "rest" ) ? 0 : 1;
+    this.env = this.stateService.env;
+    this.showWebSocketTab = ( ! ( ( this.env.BASE_MODULE === "bisq" ) || ( this.stateService.network === "bisq" ) ) );
+  }
+}

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { formatDate } from '@angular/common';
 import { EChartsOption } from 'echarts';
 import { OnChanges } from '@angular/core';
 import { StorageService } from 'src/app/services/storage.service';
+import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-incoming-transactions-graph',
@@ -25,6 +25,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
   @Input() top: number | string = '20';
   @Input() left: number | string = '0';
   @Input() template: ('widget' | 'advanced') = 'widget';
+  @Input() windowPreferenceOverride: string;
 
   isLoading = true;
   mempoolStatsChartOption: EChartsOption = {};
@@ -46,7 +47,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
     if (!this.data) {
       return;
     }
-    this.windowPreference = this.storageService.getValue('graphWindowPreference');
+    this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
     this.mountChart();
   }
 
@@ -73,10 +74,12 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
         maxSpan: 100,
         minSpan: 10,
       }, {
+        showDetail: false,
         show: (this.template === 'advanced') ? true : false,
         type: 'slider',
         brushSelect: false,
         realtime: true,
+        bottom: 0,
         selectedDataBackground: {
           lineStyle: {
             color: '#fff',
@@ -85,7 +88,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
           areaStyle: {
             opacity: 0,
           }
-        }
+        },
       }],
       tooltip: {
         trigger: 'axis',
@@ -102,29 +105,39 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
+          const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);         
           const colorSpan = (color: string) => `<span class="indicator" style="background-color: ` + color + `"></span>`;
-          let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
+          let itemFormatted = '<div class="title">' + axisValueLabel + '</div>';
           params.map((item: any, index: number) => {
             if (index < 26) {
               itemFormatted += `<div class="item">
                 <div class="indicator-container">${colorSpan(item.color)}</div>
                 <div class="grow"></div>
-                <div class="value">${item.value} <span class="symbol">vB/s</span></div>
+                <div class="value">${item.value[1]} <span class="symbol">vB/s</span></div>
               </div>`;
             }
           });
           return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
         }
       },
-      xAxis: {
-        type: 'category',
-        axisLabel: {
-          align: 'center',
-          fontSize: 11,
-          lineHeight: 12
-        },
-        data: this.data.labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
-      },
+      xAxis: [
+        {
+          name: formatterXAxisLabel(this.locale, this.windowPreference),
+          nameLocation: 'middle',
+          nameTextStyle: {
+            padding: [20, 0, 0, 0],
+          },
+          type: 'time',
+          axisLabel: {
+            margin: 20,
+            align: 'center',
+            fontSize: 11,
+            lineHeight: 12,
+            hideOverlap: true,
+            padding: [0, 5],
+          },
+        }
+      ],
       yAxis: {
         type: 'value',
         axisLabel: {

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

@@ -44,7 +44,7 @@
         <a class="nav-link" [routerLink]="['/assets']" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
       </li>
       <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active">
-        <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
@@ -59,4 +59,4 @@
 
 <router-outlet></router-outlet>
 
-<br>
+<br>

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

@@ -57,8 +57,8 @@
       <li *ngIf="network.val === 'liquid'" class="nav-item" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/liquid/assets']" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
       </li>
-      <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active">
-        <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/docs' | relativeUrl ]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="documentation.title" title="Documentation"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>

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

@@ -1,13 +1,12 @@
 import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
-import { formatDate } from '@angular/common';
 import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
 import { formatNumber } from "@angular/common";
-
 import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
 import { StorageService } from 'src/app/services/storage.service';
 import { EChartsOption } from 'echarts';
 import { feeLevels, chartColors } from 'src/app/app.constants';
+import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-mempool-graph',
@@ -32,6 +31,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   @Input() left: number | string = 75;
   @Input() template: ('widget' | 'advanced') = 'widget';
   @Input() showZoom = true;
+  @Input() windowPreferenceOverride: string;
 
   isLoading = true;
   mempoolVsizeFeesData: any;
@@ -62,7 +62,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     if (!this.data) {
       return;
     }
-    this.windowPreference = this.storageService.getValue('graphWindowPreference');
+    this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
     this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
     this.mountFeeChart();
   }
@@ -97,13 +97,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   }
 
   generateArray(mempoolStats: OptimizedMempoolStats[]) {
-    const finalArray: number[][] = [];
-    let feesArray: number[] = [];
+    const finalArray: number[][][] = [];
+    let feesArray: number[][] = [];
     let limitFeesTemplate = this.template === 'advanced' ? 26 : 20;
     for (let index = limitFeesTemplate; index > -1; index--) {
       feesArray = [];
       mempoolStats.forEach((stats) => {
-        feesArray.push(stats.vsizes[index] ? stats.vsizes[index] : 0);
+        feesArray.push([stats.added * 1000, stats.vsizes[index] ? stats.vsizes[index] : 0]);
       });
       finalArray.push(feesArray);
     }
@@ -113,7 +113,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
 
   mountFeeChart() {
     this.orderLevels();
-    const { labels, series } = this.mempoolVsizeFeesData;
+    const { series } = this.mempoolVsizeFeesData;
 
     const seriesGraph = [];
     const newColors = [];
@@ -186,14 +186,15 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
+          const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);         
           const { totalValue, totalValueArray } = this.getTotalValues(params);
           const itemFormatted = [];
           let totalParcial = 0;
           let progressPercentageText = '';
           const items = this.inverted ? [...params].reverse() : params;
           items.map((item: any, index: number) => {
-            totalParcial += item.value;
-            const progressPercentage = (item.value / totalValue) * 100;
+            totalParcial += item.value[1];
+            const progressPercentage = (item.value[1] / totalValue) * 100;
             const progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
             let activeItemClass = '';
             let hoverActive = 0;
@@ -233,7 +234,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
               </td>
               <td class="total-progress-sum">
                 <span>
-                  ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
+                  ${this.vbytesPipe.transform(item.value[1], 2, 'vB', 'MvB', false)}
                 </span>
               </td>
               <td class="total-progress-sum">
@@ -257,7 +258,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           const titleSum = $localize`Sum`;
           return `<div class="fees-wrapper-tooltip-chart ${classActive}">
             <div class="title">
-              ${params[0].axisValue}
+              ${axisValueLabel}
               <span class="total-value">
                 ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
               </span>
@@ -288,6 +289,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         maxSpan: 100,
         minSpan: 10,
       }, {
+        showDetail: false,
         show: (this.template === 'advanced' && this.showZoom) ? true : false,
         type: 'slider',
         brushSelect: false,
@@ -312,15 +314,22 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       },
       xAxis: [
         {
-          type: 'category',
+          name: formatterXAxisLabel(this.locale, this.windowPreference),
+          nameLocation: 'middle',
+          nameTextStyle: {
+            padding: [20, 0, 0, 0],
+          },
+          type: 'time',
           boundaryGap: false,
           axisLine: { onZero: true },
           axisLabel: {
+            margin: 20,
             align: 'center',
             fontSize: 11,
             lineHeight: 12,
+            hideOverlap: true,
+            padding: [0, 5],
           },
-          data: labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
         }
       ],
       yAxis: {
@@ -346,7 +355,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     const totalValueArray = [];
     const valuesInverted = this.inverted ? values : [...values].reverse();
     for (const item of valuesInverted) {
-      totalValueTemp += item.value;
+      totalValueTemp += item.value[1];
       totalValueArray.push(totalValueTemp);
     }
     return {

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

@@ -134,7 +134,7 @@ export class StatisticsComponent implements OnInit {
 
     this.mempoolTransactionsWeightPerSecondData = {
       labels: labels,
-      series: [mempoolStats.map((stats) => stats.vbytes_per_second)],
+      series: [mempoolStats.map((stats) => [stats.added * 1000, stats.vbytes_per_second])],
     };
   }
 

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

@@ -20,8 +20,6 @@
         <app-clipboard [text]="txId"></app-clipboard>
       </span>
 
-      <span class="grow"></span>
-
       <div class="container-buttons">
         <ng-template [ngIf]="tx?.status?.confirmed">
           <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success">
@@ -196,7 +194,7 @@
       <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
     </div>
 
-    <button type="button" class="btn btn-outline-info btn-sm float-right" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
+    <button type="button" class="btn btn-outline-info details-button btn-sm float-right" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
 
     <div class="clearfix"></div>
 

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

@@ -3,25 +3,11 @@
 }
 
 .container-buttons {
-	text-align: right;
-  align-self: start;
-  width: auto;
-  margin-right: 15px;
-  right: 0;
-  position: absolute;
-	@media (min-width: 650px) {
-    right: auto;
-    margin-right: auto;
-    position: relative;
-  }
-	@media (min-width: 768px) {
-    align-self: center;
-		float: right;
-	}
+  align-self: center;
 }
 
 .title-block {
-  flex-direction: column;
+	flex-wrap: wrap;
   @media (min-width: 650px) {
     flex-direction: row;
   }
@@ -32,6 +18,7 @@
 }
 .tx-link {
   display: flex;
+	flex-grow: 1;
   margin-bottom: 0px;
   margin-top: 8px;
 	@media (min-width: 650px) {
@@ -45,6 +32,9 @@
     top: 1px;
     position: relative;
 	}
+	@media (max-width: 768px) {
+	  order: 3;
+	}
 }
 
 .td-width {
@@ -127,7 +117,6 @@
 	}
 }
 
-
 .title {
   h2 {
     line-height: 1;
@@ -137,7 +126,14 @@
 }
 
 .btn-outline-info {
-  margin-top: -10px;
+	margin-top: 5px;
+	@media (min-width: 768px){
+		margin-top: 0px;
+	}
+}
+
+.details-button {
+  margin-top: -5px;
 	@media (min-width: 768px){
 		display: inline-block;
     margin-top: 0px;

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

@@ -54,6 +54,7 @@
                 [limitFee]="150"
                 [limitFilterFee]="1"
                 [data]="mempoolStats.value?.mempool"
+                [windowPreferenceOverride]="'2h'"
                 ></app-mempool-graph>
               </div>
             </ng-container>
@@ -73,6 +74,7 @@
                 <app-incoming-transactions-graph
                   [left]="50"
                   [data]="mempoolStats.value?.weightPerSecond"
+                  [windowPreferenceOverride]="'2h'"
                   ></app-incoming-transactions-graph>
               </div>
             </ng-template>

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

@@ -254,7 +254,6 @@ export class DashboardComponent implements OnInit {
           );
         }),
         map((mempoolStats) => {
-          const data = this.handleNewMempoolData(mempoolStats.concat([]));
           return {
             mempool: mempoolStats,
             weightPerSecond: this.handleNewMempoolData(mempoolStats.concat([])),
@@ -286,7 +285,7 @@ export class DashboardComponent implements OnInit {
 
     return {
       labels: labels,
-      series: [mempoolStats.map((stats) => stats.vbytes_per_second)],
+      series: [mempoolStats.map((stats) => [stats.added * 1000, stats.vbytes_per_second])],
     };
   }
 

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

@@ -1,6 +1,6 @@
 export interface OptimizedMempoolStats {
   id: number;
-  added: string;
+  added: number;
   unconfirmed_transactions: number;
   tx_per_second: number;
   vbytes_per_second: number;
@@ -42,7 +42,7 @@ export interface AddressInformation {
   scriptPubKey: string;            //  (string) The hex-encoded scriptPubKey generated by the address
   isscript: boolean;               //  (boolean) If the key is a script
   iswitness: boolean;              //  (boolean) If the address is a witness
-  witness_version?: boolean;       //  (numeric, optional) The version number of the witness program
+  witness_version?: number;        //  (numeric, optional) The version number of the witness program
   witness_program: string;         //  (string, optional) The hex value of the witness program
   confidential_key?: string;       //  (string) Elements only
   unconfidential?: string;         //  (string) Elements only

frontend/src/app/services/storage.service.ts

@@ -1,9 +1,25 @@
 import { Injectable } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
 })
 export class StorageService {
+  constructor(private router: Router, private route: ActivatedRoute) {
+    let graphWindowPreference: string = this.getValue('graphWindowPreference');
+    if (graphWindowPreference === null) { // First visit to mempool.space
+      if (this.router.url.includes("graphs")) {
+        this.setValue('graphWindowPreference', this.route.snapshot.fragment ? this.route.snapshot.fragment : "2h");
+      } else {
+        this.setValue('graphWindowPreference', "2h");
+      }
+    } else if (this.router.url.includes("graphs")) { // Visit a different graphs#fragment from last visit
+        if (this.route.snapshot.fragment !== null && graphWindowPreference !== this.route.snapshot.fragment) {
+          this.setValue('graphWindowPreference', this.route.snapshot.fragment);
+        }
+      }
+  }
+
   getValue(key: string): string {
     try {
       return localStorage.getItem(key);

frontend/src/app/shared/graphs.utils.ts

@@ -0,0 +1,49 @@
+export const formatterXAxis = (
+  locale: string,
+  windowPreference: string,
+  value: string
+) => {
+
+  if(value.length === 0){
+    return null;
+  }
+
+  const date = new Date(value);
+  switch (windowPreference) {
+    case '2h':
+      return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
+    case '24h':
+      return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric', minute: 'numeric' });
+    case '1w':
+    case '1m':
+    case '3m':
+    case '6m':
+    case '1y':
+      return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });
+    case '2y':
+    case '3y':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+  }
+};
+
+export const formatterXAxisLabel = (
+  locale: string,
+  windowPreference: string,
+) => {
+  const date = new Date();
+  switch (windowPreference) {
+    case '2h':
+    case '24h':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+    case '1w':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
+    case '1m':
+    case '3m':
+    case '6m':
+      return date.toLocaleDateString(locale, { year: 'numeric' });
+    case '1y':
+    case '2y':
+    case '3y':
+      return null;
+  }
+};

frontend/src/locale/messages.ar.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="ar">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">
@@ -11,6 +11,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.carousel.slide-number">
         <source> Slide <x equiv-text="OnHover$ = new" id="INTERPOLATION"/> of <x equiv-text=";   private _pa" id="INTERPOLATION_1"/> </source>
+        <target>الشريحة <x equiv-text="OnHover$ = new" id="INTERPOLATION"/> من <x equiv-text=";   private _pa" id="INTERPOLATION_1"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/carousel/carousel.ts</context>
           <context context-type="linenumber">114,118</context>
@@ -147,6 +148,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.progressbar.value">
         <source><x equiv-text="; }    /**    *" id="INTERPOLATION"/></source>
+        <target><x equiv-text="; }    /**    *" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/progressbar/progressbar.ts</context>
           <context context-type="linenumber">32,38</context>
@@ -250,6 +252,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.timepicker.AM">
         <source><x equiv-text="NgbTime;    pr" id="INTERPOLATION"/></source>
+        <target><x equiv-text="NgbTime;    pr" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/timepicker/timepicker.ts</context>
           <context context-type="linenumber">115,121</context>
@@ -257,6 +260,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.timepicker.PM">
         <source><x equiv-text="t() meridian: b" id="INTERPOLATION"/></source>
+        <target><x equiv-text="t() meridian: b" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/timepicker/timepicker.ts</context>
           <context context-type="linenumber">123,131</context>
@@ -490,6 +494,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="70572fa5fe9d93f071fbb0f3556d86de39f9e4af">
         <source>Block <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></source>
+        <target>الكتلة <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/> <x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/bisq/bisq-block/bisq-block.component.html</context>
           <context context-type="linenumber">4</context>
@@ -2077,6 +2082,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a351aa34e0a33f13f4d3eb06de0faee9e99f8d0a">
         <source>General</source>
+        <target>عام</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">181,183</context>
@@ -2761,6 +2767,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="bdf0e930eb22431140a2eaeacd809cc5f8ebd38c">
         <source>Next Block</source>
+        <target>الكتلة القادمة</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">7,8</context>
@@ -2773,6 +2780,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a0e07a711d171f4d40dd388d70ed32f9b8101e0a">
         <source>Previous Block</source>
+        <target>الكتلة السابقة</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">26,27</context>
@@ -3314,6 +3322,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="f13cbfe8cfc955918e9f64466d2cafddb4760d9a">
         <source>Broadcast Transaction</source>
+        <target>نشر التحويلات</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/push-transaction/push-transaction.component.html</context>
           <context context-type="linenumber">2</context>
@@ -3922,6 +3931,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="e7699861471f18a60e583512c45d84b388cfa120">
         <source>Previous output type</source>
+        <target>نص النتائج السابقة.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
           <context context-type="linenumber">109,110</context>
@@ -4036,6 +4046,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="e6da407140d70e08b6fba731455f8e0d72f900b5">
         <source>This transaction uses Taproot</source>
+        <target>هذه الحوالة استخدمت التابروت</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-features/tx-features.component.html</context>
           <context context-type="linenumber">8</context>
@@ -4044,6 +4055,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="71ed5c65589f49a732b8e93a780200191b2b6596">
         <source>Taproot</source>
+        <target>تابروت</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-features/tx-features.component.html</context>
           <context context-type="linenumber">8</context>
@@ -4094,6 +4106,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="60601e02e7c1f6c4dbabd0ef0bb8946003db8dec">
         <source>Only ~<x equiv-text="{{ medianFeeNeeded | feeRounding }}" id="INTERPOLATION"/> sat/vB was needed to get into this block</source>
+        <target>كان المطلوب <x equiv-text="{{ medianFeeNeeded | feeRounding }}" id="INTERPOLATION"/> سات/vB فقط لأضافة المعاملة لهذة الكتلة</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-fee-rating/tx-fee-rating.component.html</context>
           <context context-type="linenumber">2</context>

frontend/src/locale/messages.ca.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="ca">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.cs.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="cs">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">
@@ -11,6 +11,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.carousel.slide-number">
         <source> Slide <x equiv-text="OnHover$ = new" id="INTERPOLATION"/> of <x equiv-text=";   private _pa" id="INTERPOLATION_1"/> </source>
+        <target> Slide <x equiv-text="OnHover$ = new" id="INTERPOLATION"/> z <x equiv-text=";   private _pa" id="INTERPOLATION_1"/> </target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/carousel/carousel.ts</context>
           <context context-type="linenumber">114,118</context>
@@ -147,6 +148,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.progressbar.value">
         <source><x equiv-text="; }    /**    *" id="INTERPOLATION"/></source>
+        <target><x equiv-text="; }    /**    *" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/progressbar/progressbar.ts</context>
           <context context-type="linenumber">32,38</context>
@@ -250,6 +252,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.timepicker.AM">
         <source><x equiv-text="NgbTime;    pr" id="INTERPOLATION"/></source>
+        <target><x equiv-text="NgbTime;    pr" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/timepicker/timepicker.ts</context>
           <context context-type="linenumber">115,121</context>
@@ -257,6 +260,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.timepicker.PM">
         <source><x equiv-text="t() meridian: b" id="INTERPOLATION"/></source>
+        <target><x equiv-text="t() meridian: b" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/timepicker/timepicker.ts</context>
           <context context-type="linenumber">123,131</context>
@@ -490,6 +494,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="70572fa5fe9d93f071fbb0f3556d86de39f9e4af">
         <source>Block <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></source>
+        <target>Blok <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/bisq/bisq-block/bisq-block.component.html</context>
           <context context-type="linenumber">4</context>
@@ -1544,6 +1549,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="04ffd930e7a2dc086c952a3a51b42c836bf21cc1">
         <source>Unconfidential</source>
+        <target>Nedůvěrné</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
           <context context-type="linenumber">23,24</context>
@@ -2021,6 +2027,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="842f6eb4d8f230db4bdf483a08d4d2a77e2d5869">
         <source>Provides list of available currencies for a given base currency. </source>
+        <target>Poskytuje seznam dostupných měn pro danou základní měnu. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">51,53</context>
@@ -2028,6 +2035,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9c7dafb6f51e229d02a80844f6f99a01487e7cb2">
         <source>Provides list of open offer prices for a single market.</source>
+        <target>Poskytuje seznam otevřených nabídkových cen pro jeden trh.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">68,70</context>
@@ -2035,6 +2043,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9e95c144fcb1afd7724dc5a3aad31125a59d9d71">
         <source>Provides hi/low/open/close data for a given market. This can be used to generate a candlestick chart.</source>
+        <target>Poskytuje údaje o vysokých/nízkých/otevřených/zavřených hodnotách pro daný trh. To lze použít k vytvoření svíčkového grafu.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">85,87</context>
@@ -2042,6 +2051,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9c6e8e72b7a5f4e8a0e8ede12ab5ede4e0af2484">
         <source>Provides list of available markets.</source>
+        <target>Poskytuje seznam dostupných trhů.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">102,104</context>
@@ -2049,6 +2059,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a02929fcc15f8b54d2f6d602722d2c7d1d790a2a">
         <source>Provides list of open offer details for a single market.</source>
+        <target>Poskytuje seznam otevřených nabídek pro jeden trh.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">119,121</context>
@@ -2056,6 +2067,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="342f8a4ceda8cda17584e920ad7459b41e86b069">
         <source>Provides 24 hour price ticker for single market or all markets</source>
+        <target>Poskytuje 24hodinový cenový ticker pro jeden trh nebo všechny trhy</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">136,138</context>
@@ -2063,6 +2075,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="dd194a2109134d62cb518ba0ccfc296701de5522">
         <source>Provides list of completed trades for a single market.</source>
+        <target>Poskytuje seznam dokončených obchodů pro jeden trh.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">153,155</context>
@@ -2070,6 +2083,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="b925fd1f3213560c0737f6016be18eaba7c28c9c">
         <source>Provides periodic volume data in terms of base currency for one or all markets.</source>
+        <target>Poskytuje pravidelné údaje o objemu v základní měně pro jeden nebo všechny trhy.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">170,172</context>
@@ -2077,6 +2091,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a351aa34e0a33f13f4d3eb06de0faee9e99f8d0a">
         <source>General</source>
+        <target>Obecné</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">181,183</context>
@@ -2761,6 +2776,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="bdf0e930eb22431140a2eaeacd809cc5f8ebd38c">
         <source>Next Block</source>
+        <target>Další blok</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">7,8</context>
@@ -2773,6 +2789,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a0e07a711d171f4d40dd388d70ed32f9b8101e0a">
         <source>Previous Block</source>
+        <target>Předchozí blok</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">26,27</context>
@@ -3275,6 +3292,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="2348971518300945764">
         <source>Range</source>
+        <target>Rozsah</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/mempool-graph/mempool-graph.component.ts</context>
           <context context-type="linenumber">263</context>
@@ -3282,6 +3300,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="1033261550402895380">
         <source>Sum</source>
+        <target>Součet</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/mempool-graph/mempool-graph.component.ts</context>
           <context context-type="linenumber">265</context>
@@ -3314,6 +3333,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="f13cbfe8cfc955918e9f64466d2cafddb4760d9a">
         <source>Broadcast Transaction</source>
+        <target>Vysílat transakci</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/push-transaction/push-transaction.component.html</context>
           <context context-type="linenumber">2</context>
@@ -3420,6 +3440,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="5ca707824ab93066c7d9b44e1b8bf216725c2c22">
         <source>Filter</source>
+        <target>Filtr</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/statistics/statistics.component.html</context>
           <context context-type="linenumber">40</context>
@@ -3774,6 +3795,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="516a786e59a57efaf80e11370b4bade400f19445">
         <source>Locktime</source>
+        <target>Locktime</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transaction/transaction.component.html</context>
           <context context-type="linenumber">236,238</context>
@@ -3922,6 +3944,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="e7699861471f18a60e583512c45d84b388cfa120">
         <source>Previous output type</source>
+        <target>Předchozí typ výstupu</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
           <context context-type="linenumber">109,110</context>
@@ -4036,6 +4059,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="e6da407140d70e08b6fba731455f8e0d72f900b5">
         <source>This transaction uses Taproot</source>
+        <target>Tato transakce používá Taproot</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-features/tx-features.component.html</context>
           <context context-type="linenumber">8</context>
@@ -4044,6 +4068,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="71ed5c65589f49a732b8e93a780200191b2b6596">
         <source>Taproot</source>
+        <target>Taproot</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-features/tx-features.component.html</context>
           <context context-type="linenumber">8</context>
@@ -4094,6 +4119,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="60601e02e7c1f6c4dbabd0ef0bb8946003db8dec">
         <source>Only ~<x equiv-text="{{ medianFeeNeeded | feeRounding }}" id="INTERPOLATION"/> sat/vB was needed to get into this block</source>
+        <target>Pro vstup do tohoto bloku bylo potřeba pouze ~<x equiv-text="{{ medianFeeNeeded | feeRounding }}" id="INTERPOLATION"/> sat/vB</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-fee-rating/tx-fee-rating.component.html</context>
           <context context-type="linenumber">2</context>
@@ -4230,6 +4256,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="eb7a000cd340b44291d790f7b56f7b926edc275b">
         <source>L-BTC in circulation</source>
+        <target>L-BTC v oběhu</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
           <context context-type="linenumber">207,208</context>

frontend/src/locale/messages.de.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="de">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.en_US.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.es.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="es">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.fa.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="fa">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">
@@ -11,6 +11,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.carousel.slide-number">
         <source> Slide <x equiv-text="OnHover$ = new" id="INTERPOLATION"/> of <x equiv-text=";   private _pa" id="INTERPOLATION_1"/> </source>
+        <target>صفحه <x equiv-text="OnHover$ = new" id="INTERPOLATION"/> از <x equiv-text=";   private _pa" id="INTERPOLATION_1"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/carousel/carousel.ts</context>
           <context context-type="linenumber">114,118</context>
@@ -147,6 +148,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.progressbar.value">
         <source><x equiv-text="; }    /**    *" id="INTERPOLATION"/></source>
+        <target><x equiv-text="; }    /**    *" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/progressbar/progressbar.ts</context>
           <context context-type="linenumber">32,38</context>
@@ -250,6 +252,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.timepicker.AM">
         <source><x equiv-text="NgbTime;    pr" id="INTERPOLATION"/></source>
+        <target><x equiv-text="NgbTime;    pr" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/timepicker/timepicker.ts</context>
           <context context-type="linenumber">115,121</context>
@@ -257,6 +260,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.timepicker.PM">
         <source><x equiv-text="t() meridian: b" id="INTERPOLATION"/></source>
+        <target><x equiv-text="t() meridian: b" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/timepicker/timepicker.ts</context>
           <context context-type="linenumber">123,131</context>
@@ -490,6 +494,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="70572fa5fe9d93f071fbb0f3556d86de39f9e4af">
         <source>Block <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></source>
+        <target>بلاک <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/bisq/bisq-block/bisq-block.component.html</context>
           <context context-type="linenumber">4</context>
@@ -1544,6 +1549,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="04ffd930e7a2dc086c952a3a51b42c836bf21cc1">
         <source>Unconfidential</source>
+        <target>غیرمحرمانه</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
           <context context-type="linenumber">23,24</context>
@@ -2021,6 +2027,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="842f6eb4d8f230db4bdf483a08d4d2a77e2d5869">
         <source>Provides list of available currencies for a given base currency. </source>
+        <target>لیست ارزهای در دسترس برای یک ارز پایه را ارائه می‌دهد.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">51,53</context>
@@ -2028,6 +2035,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9c7dafb6f51e229d02a80844f6f99a01487e7cb2">
         <source>Provides list of open offer prices for a single market.</source>
+        <target>لیست قیمت‌های پیشنهادهای باز برای یک بازار را ارائه می‌دهد.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">68,70</context>
@@ -2035,6 +2043,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9e95c144fcb1afd7724dc5a3aad31125a59d9d71">
         <source>Provides hi/low/open/close data for a given market. This can be used to generate a candlestick chart.</source>
+        <target>داده‌های بیشینه/کمینه/باز/بسته مربوط به یک بازار را ارائه می‌دهد. از آن می‌توان برای ساختن نمودار شمعی استفاده کرد.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">85,87</context>
@@ -2042,6 +2051,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9c6e8e72b7a5f4e8a0e8ede12ab5ede4e0af2484">
         <source>Provides list of available markets.</source>
+        <target>لیست بازارهای در دسترس را ارائه می‌دهد</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">102,104</context>
@@ -2049,6 +2059,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a02929fcc15f8b54d2f6d602722d2c7d1d790a2a">
         <source>Provides list of open offer details for a single market.</source>
+        <target>لیست جزئیات پیشنهادهای باز برای یک بازار را ارائه می‌دهد.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">119,121</context>
@@ -2056,6 +2067,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="342f8a4ceda8cda17584e920ad7459b41e86b069">
         <source>Provides 24 hour price ticker for single market or all markets</source>
+        <target>نشان‌گر قیمتی 24 ساعته برای یک یا همه بازارها را ارائه می‌دهد</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">136,138</context>
@@ -2063,6 +2075,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="dd194a2109134d62cb518ba0ccfc296701de5522">
         <source>Provides list of completed trades for a single market.</source>
+        <target>لیست معاملات کامل شده برای یک بازار را ارائه می‌دهد.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">153,155</context>
@@ -2070,6 +2083,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="b925fd1f3213560c0737f6016be18eaba7c28c9c">
         <source>Provides periodic volume data in terms of base currency for one or all markets.</source>
+        <target>داده‌های حجم دوره‌ای را بر اساس ارز پایه برای یک یا همه بازارها ارائه می‌دهد.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">170,172</context>
@@ -2077,6 +2091,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a351aa34e0a33f13f4d3eb06de0faee9e99f8d0a">
         <source>General</source>
+        <target>عمومی</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">181,183</context>
@@ -2765,6 +2780,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="bdf0e930eb22431140a2eaeacd809cc5f8ebd38c">
         <source>Next Block</source>
+        <target>بلاک بعدی</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">7,8</context>
@@ -2777,6 +2793,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a0e07a711d171f4d40dd388d70ed32f9b8101e0a">
         <source>Previous Block</source>
+        <target>بلاک قبلی</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">26,27</context>
@@ -3279,6 +3296,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="2348971518300945764">
         <source>Range</source>
+        <target>بازه</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/mempool-graph/mempool-graph.component.ts</context>
           <context context-type="linenumber">263</context>
@@ -3286,6 +3304,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="1033261550402895380">
         <source>Sum</source>
+        <target>مجموع</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/mempool-graph/mempool-graph.component.ts</context>
           <context context-type="linenumber">265</context>
@@ -3318,6 +3337,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="f13cbfe8cfc955918e9f64466d2cafddb4760d9a">
         <source>Broadcast Transaction</source>
+        <target>انتشار تراکنش</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/push-transaction/push-transaction.component.html</context>
           <context context-type="linenumber">2</context>
@@ -3424,6 +3444,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="5ca707824ab93066c7d9b44e1b8bf216725c2c22">
         <source>Filter</source>
+        <target>پالایش</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/statistics/statistics.component.html</context>
           <context context-type="linenumber">40</context>
@@ -3778,6 +3799,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="516a786e59a57efaf80e11370b4bade400f19445">
         <source>Locktime</source>
+        <target>قفل‌زمانی</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transaction/transaction.component.html</context>
           <context context-type="linenumber">236,238</context>
@@ -3926,6 +3948,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="e7699861471f18a60e583512c45d84b388cfa120">
         <source>Previous output type</source>
+        <target>نوع خروجی قبلی</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
           <context context-type="linenumber">109,110</context>
@@ -4040,6 +4063,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="e6da407140d70e08b6fba731455f8e0d72f900b5">
         <source>This transaction uses Taproot</source>
+        <target>این تراکنش از تپروت استقاده می‌کند</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-features/tx-features.component.html</context>
           <context context-type="linenumber">8</context>
@@ -4048,6 +4072,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="71ed5c65589f49a732b8e93a780200191b2b6596">
         <source>Taproot</source>
+        <target>تپروت</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-features/tx-features.component.html</context>
           <context context-type="linenumber">8</context>
@@ -4098,6 +4123,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="60601e02e7c1f6c4dbabd0ef0bb8946003db8dec">
         <source>Only ~<x equiv-text="{{ medianFeeNeeded | feeRounding }}" id="INTERPOLATION"/> sat/vB was needed to get into this block</source>
+        <target>تنها به حدود <x equiv-text="{{ medianFeeNeeded | feeRounding }}" id="INTERPOLATION"/> ساتوشی بر بایت مجازی نیاز بود تا در این بلاک قرار بگیرد</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-fee-rating/tx-fee-rating.component.html</context>
           <context context-type="linenumber">2</context>
@@ -4234,6 +4260,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="eb7a000cd340b44291d790f7b56f7b926edc275b">
         <source>L-BTC in circulation</source>
+        <target>مقدار L-BTC در گردش</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
           <context context-type="linenumber">207,208</context>

frontend/src/locale/messages.fi.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="fi">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">
@@ -11,6 +11,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.carousel.slide-number">
         <source> Slide <x equiv-text="OnHover$ = new" id="INTERPOLATION"/> of <x equiv-text=";   private _pa" id="INTERPOLATION_1"/> </source>
+        <target> Slide <x equiv-text="OnHover$ = new" id="INTERPOLATION"/> of <x equiv-text=";   private _pa" id="INTERPOLATION_1"/> </target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/carousel/carousel.ts</context>
           <context context-type="linenumber">114,118</context>
@@ -147,6 +148,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.progressbar.value">
         <source><x equiv-text="; }    /**    *" id="INTERPOLATION"/></source>
+        <target><x equiv-text="; }    /**    *" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/progressbar/progressbar.ts</context>
           <context context-type="linenumber">32,38</context>
@@ -250,6 +252,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.timepicker.AM">
         <source><x equiv-text="NgbTime;    pr" id="INTERPOLATION"/></source>
+        <target><x equiv-text="NgbTime;    pr" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/timepicker/timepicker.ts</context>
           <context context-type="linenumber">115,121</context>
@@ -257,6 +260,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="ngb.timepicker.PM">
         <source><x equiv-text="t() meridian: b" id="INTERPOLATION"/></source>
+        <target><x equiv-text="t() meridian: b" id="INTERPOLATION"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">node_modules/@ng-bootstrap/src/timepicker/timepicker.ts</context>
           <context context-type="linenumber">123,131</context>
@@ -490,6 +494,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="70572fa5fe9d93f071fbb0f3556d86de39f9e4af">
         <source>Block <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></source>
+        <target>Lohko <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/bisq/bisq-block/bisq-block.component.html</context>
           <context context-type="linenumber">4</context>
@@ -1544,6 +1549,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="04ffd930e7a2dc086c952a3a51b42c836bf21cc1">
         <source>Unconfidential</source>
+        <target>Ei-luottamuksellinen</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
           <context context-type="linenumber">23,24</context>
@@ -2021,6 +2027,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="842f6eb4d8f230db4bdf483a08d4d2a77e2d5869">
         <source>Provides list of available currencies for a given base currency. </source>
+        <target>Luettelo tietylle perusvaluutalle käytettävissä olevista valuutoista. </target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">51,53</context>
@@ -2028,6 +2035,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9c7dafb6f51e229d02a80844f6f99a01487e7cb2">
         <source>Provides list of open offer prices for a single market.</source>
+        <target>Tarjoaa luettelon yksittäisten markkinoiden avoimista tarjoushinnoista.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">68,70</context>
@@ -2035,6 +2043,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9e95c144fcb1afd7724dc5a3aad31125a59d9d71">
         <source>Provides hi/low/open/close data for a given market. This can be used to generate a candlestick chart.</source>
+        <target>Tarjoaa hi/low/open/close -tiedot tietyille markkinoille. Tätä voidaan käyttää candlestick-kaavion luomiseen.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">85,87</context>
@@ -2042,6 +2051,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="9c6e8e72b7a5f4e8a0e8ede12ab5ede4e0af2484">
         <source>Provides list of available markets.</source>
+        <target>Tarjoaa luettelon saatavilla olevista markkinoista.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">102,104</context>
@@ -2049,6 +2059,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a02929fcc15f8b54d2f6d602722d2c7d1d790a2a">
         <source>Provides list of open offer details for a single market.</source>
+        <target>Tarjoaa luettelon avoimen tarjouksen yksityiskohdista yksittäisillä markkinoilla.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">119,121</context>
@@ -2056,6 +2067,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="342f8a4ceda8cda17584e920ad7459b41e86b069">
         <source>Provides 24 hour price ticker for single market or all markets</source>
+        <target>Tarjoaa 24 tunnin hintatickerin yksittäisille markkinoille tai kaikille markkinoille.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">136,138</context>
@@ -2063,6 +2075,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="dd194a2109134d62cb518ba0ccfc296701de5522">
         <source>Provides list of completed trades for a single market.</source>
+        <target>Tarjoaa luettelon yksittäisen markkinan toteutuneista kaupoista.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">153,155</context>
@@ -2070,6 +2083,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="b925fd1f3213560c0737f6016be18eaba7c28c9c">
         <source>Provides periodic volume data in terms of base currency for one or all markets.</source>
+        <target>Tarjoaa säännöllisiä volyymitietoja perusvaluutan muodossa yhdeltä tai kaikilta markkinoilta.</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">170,172</context>
@@ -2077,6 +2091,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a351aa34e0a33f13f4d3eb06de0faee9e99f8d0a">
         <source>General</source>
+        <target>Yleinen</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">181,183</context>
@@ -2761,6 +2776,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="bdf0e930eb22431140a2eaeacd809cc5f8ebd38c">
         <source>Next Block</source>
+        <target>Seuraava lohko</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">7,8</context>
@@ -2773,6 +2789,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a0e07a711d171f4d40dd388d70ed32f9b8101e0a">
         <source>Previous Block</source>
+        <target>Edellinen lohko</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">26,27</context>
@@ -3275,6 +3292,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="2348971518300945764">
         <source>Range</source>
+        <target>Alue</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/mempool-graph/mempool-graph.component.ts</context>
           <context context-type="linenumber">263</context>
@@ -3282,6 +3300,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="1033261550402895380">
         <source>Sum</source>
+        <target>Summa</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/mempool-graph/mempool-graph.component.ts</context>
           <context context-type="linenumber">265</context>
@@ -3420,6 +3439,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="5ca707824ab93066c7d9b44e1b8bf216725c2c22">
         <source>Filter</source>
+        <target>Suodatin</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/statistics/statistics.component.html</context>
           <context context-type="linenumber">40</context>
@@ -3774,6 +3794,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="516a786e59a57efaf80e11370b4bade400f19445">
         <source>Locktime</source>
+        <target>Lukitusaika</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transaction/transaction.component.html</context>
           <context context-type="linenumber">236,238</context>
@@ -3922,6 +3943,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="e7699861471f18a60e583512c45d84b388cfa120">
         <source>Previous output type</source>
+        <target>Edellinen tulostetyyppi</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
           <context context-type="linenumber">109,110</context>
@@ -4036,6 +4058,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="e6da407140d70e08b6fba731455f8e0d72f900b5">
         <source>This transaction uses Taproot</source>
+        <target>Tässä siirtotapahtumassa käytetään Taproot:ia</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-features/tx-features.component.html</context>
           <context context-type="linenumber">8</context>
@@ -4044,6 +4067,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="71ed5c65589f49a732b8e93a780200191b2b6596">
         <source>Taproot</source>
+        <target>Taproot</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-features/tx-features.component.html</context>
           <context context-type="linenumber">8</context>
@@ -4094,6 +4118,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="60601e02e7c1f6c4dbabd0ef0bb8946003db8dec">
         <source>Only ~<x equiv-text="{{ medianFeeNeeded | feeRounding }}" id="INTERPOLATION"/> sat/vB was needed to get into this block</source>
+        <target>Vain ~ <x equiv-text="{{ medianFeeNeeded | feeRounding }}" id="INTERPOLATION"/> sat/vB tarvittiin tähän lohkoon pääsemiseksi</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/tx-fee-rating/tx-fee-rating.component.html</context>
           <context context-type="linenumber">2</context>
@@ -4230,6 +4255,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="eb7a000cd340b44291d790f7b56f7b926edc275b">
         <source>L-BTC in circulation</source>
+        <target>Käytössä olevat L-BTC</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
           <context context-type="linenumber">207,208</context>

frontend/src/locale/messages.fr.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="fr">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.he.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="he">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.hi.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="hi">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.hr.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="hr">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.hu.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="hu">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.it.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="it">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.ja.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="ja">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.ka.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="ka">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.ko.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="ko">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.mk.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="mk">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.nb.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="nb">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.nl.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="nl">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.pl.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="pl">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">
@@ -3364,7 +3364,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="78fe1342aab9e91cb7cbd1becbaacf3b719546b3">
         <source>TXID, block height, hash or address</source>
-        <target>ID transakcji, wysokość bloku, hash lub adres</target>
+        <target>ID transakcji, numer bloku, hash lub adres</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/search-form/search-form.component.html</context>
           <context context-type="linenumber">4</context>

frontend/src/locale/messages.pt.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="pt">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.ro.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="ro">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.ru.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="ru">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.sl.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="sl">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.sv.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="sv">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.th.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="th">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.tr.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="tr">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.uk.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="uk">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.vi.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="vi">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">

frontend/src/locale/messages.zh.xlf

@@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
   <file datatype="plaintext" original="ng2.template" source-language="en-US" target-language="zh">
     <body>
       <trans-unit datatype="html" id="ngb.alert.close">
@@ -490,6 +490,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="70572fa5fe9d93f071fbb0f3556d86de39f9e4af">
         <source>Block <x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></source>
+        <target>区块<x ctype="x-ng_container" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;blockTemplateContent&quot;&gt;" id="START_TAG_NG_CONTAINER"/><x ctype="x-ng_container" equiv-text="&lt;/ng-container&gt;" id="CLOSE_TAG_NG_CONTAINER"/></target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/bisq/bisq-block/bisq-block.component.html</context>
           <context context-type="linenumber">4</context>
@@ -1544,6 +1545,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="04ffd930e7a2dc086c952a3a51b42c836bf21cc1">
         <source>Unconfidential</source>
+        <target>不保密</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/address/address.component.html</context>
           <context context-type="linenumber">23,24</context>
@@ -2077,6 +2079,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a351aa34e0a33f13f4d3eb06de0faee9e99f8d0a">
         <source>General</source>
+        <target>通用</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/api-docs/api-docs.component.html</context>
           <context context-type="linenumber">181,183</context>
@@ -2761,6 +2764,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="bdf0e930eb22431140a2eaeacd809cc5f8ebd38c">
         <source>Next Block</source>
+        <target>下一个区块</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">7,8</context>
@@ -2773,6 +2777,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="a0e07a711d171f4d40dd388d70ed32f9b8101e0a">
         <source>Previous Block</source>
+        <target>上一个区块</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/block/block.component.html</context>
           <context context-type="linenumber">26,27</context>
@@ -3314,6 +3319,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="f13cbfe8cfc955918e9f64466d2cafddb4760d9a">
         <source>Broadcast Transaction</source>
+        <target>广播交易</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/push-transaction/push-transaction.component.html</context>
           <context context-type="linenumber">2</context>
@@ -3420,6 +3426,7 @@
       </trans-unit>
       <trans-unit datatype="html" id="5ca707824ab93066c7d9b44e1b8bf216725c2c22">
         <source>Filter</source>
+        <target>过滤</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/statistics/statistics.component.html</context>
           <context context-type="linenumber">40</context>

frontend/src/resources/profile/blockstream.svg

@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="Layer_1" x="0px" y="0px" viewBox="200 200 600 600" style="enable-background:new 0 0 1000 1000;background-color: #111316 !important" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#111316;}
+	.st1{fill:#00C3FF;}
+	.st2{fill:#7EE0FF;}
+</style>
+<path class="st1" d="M659.7,392.3c10.2,14.3,18.4,29.9,24.5,46.4l21.8-7.1c-6.9-18.9-16.4-36.8-28.1-53.1L659.7,392.3z"/>
+<path class="st1" d="M510.6,289.2c-5.8-0.2-11.7-0.2-17.5,0l1.6,22.8c8.8-0.3,17.6-0.1,26.3,0.7c8.7,0.8,17.4,2.2,26,4.2l5.8-22.1  c-9.8-2.3-19.7-3.9-29.7-4.8C519,289.6,514.7,289.3,510.6,289.2z"/>
+<path class="st1" d="M297.1,605.5c-9.1-18.6-15.7-38.3-19.5-58.6l-23.9,3.8c4.2,23,11.6,45.3,22,66.2L297.1,605.5z"/>
+<path class="st1" d="M284.8,375.6l21.2,11.8c10.6-17.8,23.5-34,38.5-48.3l-16.2-18C311.3,337.2,296.7,355.5,284.8,375.6z"/>
+<path class="st1" d="M254.8,453.5l23.8,4.2c4.2-20.3,11.2-39.9,20.7-58.3l-21.2-11.7C267.3,408.5,259.5,430.6,254.8,453.5z"/>
+<path class="st1" d="M409.9,268.8l9.5,22.2c19.3-7.6,39.5-12.5,60.1-14.5l-1.7-24.1C454.5,254.6,431.7,260.1,409.9,268.8z"/>
+<path class="st1" d="M338.5,311.8l16.2,18c15.8-13.4,33.3-24.6,52.1-33.4l-9.5-22.2C376,283.9,356.2,296.6,338.5,311.8z"/>
+<path class="st1" d="M697.1,667.6l-18.9-15.1c-13.4,15.8-28.9,29.7-46,41.4l13,20.5C664.6,701.3,682.1,685.6,697.1,667.6z"/>
+<path class="st1" d="M402.5,710.7c-18.6-9.1-35.9-20.7-51.4-34.5l-16.5,17.7c17.4,15.6,37,28.6,58,38.8L402.5,710.7z"/>
+<path class="st1" d="M755.4,528.2c3.1-32.6-0.2-65.5-9.7-96.8l-23,7.6c13.2,44.4,12.7,91.7-1.3,135.8l22.8,8.1  C749.9,565.2,753.7,546.8,755.4,528.2z"/>
+<path class="st1" d="M614.2,689.2L602,670c-15.1,9-31.3,16-48.3,20.7l5.4,22.2C578.5,707.5,597,699.6,614.2,689.2z"/>
+<path class="st1" d="M314.5,528.8c-1.7-14.2-1.9-28.6-0.5-42.9c0.3-3.5,0.7-6.5,1.2-9.6l-22.5-4c-0.5,3.8-1,7.6-1.4,11.5  c-1.5,16.1-1.3,32.4,0.7,48.5L314.5,528.8z"/>
+<path class="st1" d="M568.2,284.7c19.9,5.8,38.9,14.4,56.4,25.4l13.5-20.2c-19.8-12.5-41.2-22.1-63.7-28.7L568.2,284.7z"/>
+<path class="st1" d="M469.8,755.8l2.3-24.1c-19.5-2.6-38.6-7.8-56.8-15.3l-10.1,22.2C425.8,747.1,447.6,752.9,469.8,755.8z"/>
+<path class="st1" d="M351.3,657.7l15.7-16.6c-12.4-12.5-23.1-26.5-31.8-41.8l-20.3,10.7C324.8,627.4,337.1,643.5,351.3,657.7z"/>
+<path class="st1" d="M649.5,297.7l-13.6,20.2c16.9,12,32,26.3,45.1,42.4l19.4-14.8C685.7,327.2,668.6,311.2,649.5,297.7z"/>
+<path class="st1" d="M672.7,633.2c12-16.1,21.8-33.7,29.1-52.5l-21.5-7.7c-6.4,16.4-15,31.9-25.5,46L672.7,633.2z"/>
+<path class="st2" d="M690.6,449.6l-21.6,7.2c6,20.7,8,42.4,6,63.8c-1.1,11.9-3.4,23.7-6.9,35.2l21.5,7.6c4.1-13.2,6.9-26.9,8.2-40.7  C700.1,498.1,697.6,473.3,690.6,449.6z"/>
+<path class="st2" d="M475.2,698l2.1-22.7c-13.3-2-26.4-5.5-38.9-10.5l-9.4,20.7C443.8,691.5,459.3,695.7,475.2,698z"/>
+<path class="st2" d="M631.8,456.2l20.4-6.9c-4.9-12.9-11.4-25.2-19.4-36.6l-17.1,13C622.3,435.2,627.7,445.4,631.8,456.2z"/>
+<path class="st2" d="M508.4,345.7h-11.2l1.5,21.4c11.5-0.3,22.9,0.7,34.2,3.2l5.5-20.7c-6.8-1.5-13.6-2.6-20.5-3.2  C514.8,346.1,511.6,345.9,508.4,345.7z"/>
+<path class="st2" d="M335.5,403.8l20,11.1c7.5-12.4,16.5-23.7,26.9-33.8L367,364.1C354.8,375.9,344.2,389.2,335.5,403.8z"/>
+<path class="st2" d="M553.8,339.5c13.8,4.2,27.1,10.2,39.4,17.7l12.7-19c-14.4-8.9-30-15.8-46.2-20.7L553.8,339.5z"/>
+<path class="st2" d="M635.9,394.5l18.1-13.8c-10.7-13.2-23.2-24.9-36.9-34.8l-12.7,19C616.2,373.4,626.7,383.3,635.9,394.5z"/>
+<path class="st2" d="M611.5,584.6l16.8,13.4c8.2-11.2,14.9-23.3,20.1-36.2l-20.2-7.2C623.8,565.2,618.2,575.3,611.5,584.6z"/>
+<path class="st2" d="M389.9,635.1l-15.6,16.6c12.8,11.2,26.9,20.7,42.2,28.2l9.4-20.7C412.9,652.8,400.8,644.6,389.9,635.1z"/>
+<path class="st2" d="M369.2,520.2c-1-9.7-1.1-19.5-0.2-29.2c0.2-1.7,0.4-3.5,0.6-5.1l-21.1-3.8c-0.3,2.3-0.6,4.6-0.8,6.9  c-1.1,11.5-0.9,23,0.3,34.5L369.2,520.2z"/>
+<path class="st2" d="M333.6,538l-22.6,3.5c3.2,16.7,8.6,33,16,48.3l20.2-10.7C340.9,566,336.4,552.2,333.6,538z"/>
+<path class="st2" d="M601.7,646.3l12.3,19.2c14-9.6,26.7-21,37.7-33.8l-17.9-14.2C624.4,628.4,613.6,638.1,601.7,646.3z"/>
+<path class="st2" d="M348.8,426.9l-19.9-11c-7.8,15.1-13.5,31.2-17,47.8l22.5,4C337.4,453.5,342.2,439.8,348.8,426.9z"/>
+<path class="st2" d="M540.6,636.9l5,20.7c13.3-3.8,26.1-9.2,38.1-16.2l-11.6-18.1C562.2,629,551.6,633.6,540.6,636.9z"/>
+<path class="st2" d="M384,573.5l-19,9.9c6.9,12,15.4,23,25.1,32.9l14.8-15.7C396.9,592.4,389.9,583.3,384,573.5z"/>
+<path class="st2" d="M496.7,677.1c-1.9,0-3.8-0.2-5.7-0.4l-2.1,22.7c17.9,1.3,35.9,0.1,53.4-3.5l-5.3-22.2  C523.8,676.5,510.2,677.6,496.7,677.1z"/>
+<path class="st2" d="M377.3,354.9l15.3,16.9c11.1-9.3,23.3-17.1,36.4-23.3l-9-21C404.6,334.7,390.3,343.9,377.3,354.9z"/>
+<path class="st2" d="M432.7,322.1l9,21c13.5-5.2,27.6-8.7,42-10.3L482,310C465.1,311.9,448.5,315.9,432.7,322.1z"/>
+<path class="st1" d="M490.3,757.5c21.5,0.7,43-1.1,64.2-5.2l-5-23.3c-18.3,3.8-37,5.3-55.8,4.6c-3,0-5.2-0.4-8.2-0.6l-2.1,24.4  c2.3,0.1,4.6,0.1,6.9,0L490.3,757.5z"/>
+</svg>

frontend/src/styles.scss

@@ -555,7 +555,7 @@ html:lang(ru) .card-title {
 }
 
 .tx-wrapper-tooltip-chart-advanced {
-  width: 115px;
+  width: 140px;
   .indicator-container {
     .indicator {
       margin-right: 5px;

mariadb-structure.sql

@@ -1,106 +0,0 @@
-SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
-SET time_zone = "+00:00";
-
-CREATE TABLE `blocks` (
-  `height` int(11) NOT NULL,
-  `hash` varchar(65) NOT NULL,
-  `size` int(11) NOT NULL,
-  `weight` int(11) NOT NULL,
-  `minFee` int(11) NOT NULL,
-  `maxFee` int(11) NOT NULL,
-  `time` int(11) NOT NULL,
-  `fees` double NOT NULL,
-  `nTx` int(11) NOT NULL,
-  `medianFee` double NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-
-CREATE TABLE `statistics` (
-  `id` int(11) NOT NULL,
-  `added` datetime NOT NULL,
-  `unconfirmed_transactions` int(11) UNSIGNED NOT NULL,
-  `tx_per_second` float UNSIGNED NOT NULL,
-  `vbytes_per_second` int(10) UNSIGNED NOT NULL,
-  `mempool_byte_weight` int(10) UNSIGNED NOT NULL,
-  `fee_data` longtext NOT NULL,
-  `total_fee` double UNSIGNED NOT NULL,
-  `vsize_1` int(11) NOT NULL,
-  `vsize_2` int(11) NOT NULL,
-  `vsize_3` int(11) NOT NULL,
-  `vsize_4` int(11) NOT NULL,
-  `vsize_5` int(11) NOT NULL,
-  `vsize_6` int(11) NOT NULL,
-  `vsize_8` int(11) NOT NULL,
-  `vsize_10` int(11) NOT NULL,
-  `vsize_12` int(11) NOT NULL,
-  `vsize_15` int(11) NOT NULL,
-  `vsize_20` int(11) NOT NULL,
-  `vsize_30` int(11) NOT NULL,
-  `vsize_40` int(11) NOT NULL,
-  `vsize_50` int(11) NOT NULL,
-  `vsize_60` int(11) NOT NULL,
-  `vsize_70` int(11) NOT NULL,
-  `vsize_80` int(11) NOT NULL,
-  `vsize_90` int(11) NOT NULL,
-  `vsize_100` int(11) NOT NULL,
-  `vsize_125` int(11) NOT NULL,
-  `vsize_150` int(11) NOT NULL,
-  `vsize_175` int(11) NOT NULL,
-  `vsize_200` int(11) NOT NULL,
-  `vsize_250` int(11) NOT NULL,
-  `vsize_300` int(11) NOT NULL,
-  `vsize_350` int(11) NOT NULL,
-  `vsize_400` int(11) NOT NULL,
-  `vsize_500` int(11) NOT NULL,
-  `vsize_600` int(11) NOT NULL,
-  `vsize_700` int(11) NOT NULL,
-  `vsize_800` int(11) NOT NULL,
-  `vsize_900` int(11) NOT NULL,
-  `vsize_1000` int(11) NOT NULL,
-  `vsize_1200` int(11) NOT NULL,
-  `vsize_1400` int(11) NOT NULL,
-  `vsize_1600` int(11) NOT NULL,
-  `vsize_1800` int(11) NOT NULL,
-  `vsize_2000` int(11) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-
-CREATE TABLE `transactions` (
-  `blockheight` int(11) NOT NULL,
-  `txid` varchar(65) NOT NULL,
-  `fee` double NOT NULL,
-  `feePerVsize` double NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-
-
-ALTER TABLE `blocks`
-  ADD PRIMARY KEY (`height`);
-
-ALTER TABLE `statistics`
-  ADD PRIMARY KEY (`id`);
-
-ALTER TABLE `transactions`
-  ADD PRIMARY KEY (`txid`),
-  ADD KEY `blockheight` (`blockheight`);
-
-
-ALTER TABLE `statistics`
-  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
-
-CREATE TABLE `last_elements_block` (
-  `block` int(11) NOT NULL,
-  `datetime` int(11) NOT NULL,
-  `block_hash` varchar(65) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-
-INSERT INTO `last_elements_block` VALUES(0, 0, '');
-
-CREATE TABLE `elements_pegs` (
-  `block` int(11) NOT NULL,
-  `datetime` int(11) NOT NULL,
-  `amount` bigint(20) NOT NULL,
-  `txid` varchar(65) NOT NULL,
-  `txindex` int(11) NOT NULL,
-  `bitcoinaddress` varchar(100) NOT NULL,
-  `bitcointxid` varchar(65) NOT NULL,
-  `bitcoinindex` int(11) NOT NULL,
-  `final_tx` int(11) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8;