Merge branch 'master' into nymkappa/bufix/blocks-list-skeleton

backend/src/api/common.ts

@@ -77,7 +77,7 @@ export class Common {
     };
   }
 
-  static sleep(ms: number): Promise<void> {
+  static sleep$(ms: number): Promise<void> {
     return new Promise((resolve) => {
        setTimeout(() => {
          resolve();

backend/src/api/database-migration.ts

@@ -1,8 +1,7 @@
 import config from '../config';
 import DB from '../database';
 import logger from '../logger';
-
+import { Common } from './common';
-const sleep = (ms: number) => new Promise(res => setTimeout(res, ms));
 
 class DatabaseMigration {
   private static currentVersion = 17;
@@ -25,7 +24,7 @@ class DatabaseMigration {
         await this.$createMigrationStateTable();
       } catch (e) {
         logger.err('MIGRATIONS: Unable to create `state` table, aborting in 10 seconds. ' + e);
-        await sleep(10000);
+        await Common.sleep$(10000);
         process.exit(-1);
       }
       logger.debug('MIGRATIONS: `state` table initialized.');
@@ -36,7 +35,7 @@ class DatabaseMigration {
       databaseSchemaVersion = await this.$getSchemaVersionFromDatabase();
     } catch (e) {
       logger.err('MIGRATIONS: Unable to get current database migration version, aborting in 10 seconds. ' + e);
-      await sleep(10000);
+      await Common.sleep$(10000);
       process.exit(-1);
     }
 
@@ -52,7 +51,7 @@ class DatabaseMigration {
       await this.$createMissingTablesAndIndexes(databaseSchemaVersion);
     } catch (e) {
       logger.err('MIGRATIONS: Unable to create required tables, aborting in 10 seconds. ' + e);
-      await sleep(10000);
+      await Common.sleep$(10000);
       process.exit(-1);
     }
 

backend/src/api/liquid/icons.ts

@@ -1,5 +1,4 @@
 import * as fs from 'fs';
-import config from '../../config';
 import logger from '../../logger';
 
 class Icons {

backend/src/api/mining.ts

@@ -15,7 +15,7 @@ class Mining {
   }
 
   /**
-   * Get historical block reward and total fee
+   * Get historical block total fee
    */
   public async $getHistoricalBlockFees(interval: string | null = null): Promise<any> {
     return await BlocksRepository.$getHistoricalBlockFees(
@@ -34,6 +34,16 @@ class Mining {
     );
   }
 
+  /**
+   * Get historical block fee rates percentiles
+   */
+   public async $getHistoricalBlockFeeRates(interval: string | null = null): Promise<any> {
+    return await BlocksRepository.$getHistoricalBlockFeeRates(
+      this.getTimeRange(interval),
+      Common.getSqlInterval(interval)
+    );
+  }
+
   /**
    * Generate high level overview of the pool ranks and general stats
    */

backend/src/index.ts

@@ -85,16 +85,16 @@ class Server {
 
     this.setUpWebsocketHandling();
 
-    await syncAssets.syncAssets();
+    await syncAssets.syncAssets$();
     diskCache.loadMempoolCache();
 
     if (config.DATABASE.ENABLED) {
       await DB.checkDbConnection();
       try {
-        if (process.env.npm_config_reindex != undefined) { // Re-index requests
+        if (process.env.npm_config_reindex !== undefined) { // Re-index requests
           const tables = process.env.npm_config_reindex.split(',');
           logger.warn(`Indexed data for "${process.env.npm_config_reindex}" tables will be erased in 5 seconds (using '--reindex')`);
-          await Common.sleep(5000);
+          await Common.sleep$(5000);
           await databaseMigration.$truncateIndexedData(tables);
         }
         await databaseMigration.$initializeOrMigrateDatabase();
@@ -326,6 +326,7 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', routes.$getRewardStats)
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees/:interval', routes.$getHistoricalBlockFees)
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/rewards/:interval', routes.$getHistoricalBlockRewards)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', routes.$getHistoricalBlockFeeRates)
       ;
     }
 

backend/src/repositories/BlocksRepository.ts

@@ -387,7 +387,9 @@ class BlocksRepository {
    */
   public async $getHistoricalBlockFees(div: number, interval: string | null): Promise<any> {
     try {
-      let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
+      let query = `SELECT
+        CAST(AVG(height) as INT) as avg_height,
+        CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
         CAST(AVG(fees) as INT) as avg_fees
         FROM blocks`;
 
@@ -410,7 +412,9 @@ class BlocksRepository {
    */
    public async $getHistoricalBlockRewards(div: number, interval: string | null): Promise<any> {
     try {
-      let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
+      let query = `SELECT
+        CAST(AVG(height) as INT) as avg_height,
+        CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
         CAST(AVG(reward) as INT) as avg_rewards
         FROM blocks`;
 
@@ -427,6 +431,37 @@ class BlocksRepository {
       throw e;
     }
   }
+
+  /**
+   * Get the historical averaged block fee rate percentiles
+   */
+   public async $getHistoricalBlockFeeRates(div: number, interval: string | null): Promise<any> {
+    try {
+      let query = `SELECT
+        CAST(AVG(height) as INT) as avg_height,
+        CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[0]')) as INT) as avg_fee_0,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[1]')) as INT) as avg_fee_10,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[2]')) as INT) as avg_fee_25,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[3]')) as INT) as avg_fee_50,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[4]')) as INT) as avg_fee_75,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[5]')) as INT) as avg_fee_90,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[6]')) as INT) as avg_fee_100
+      FROM blocks`;
+
+      if (interval !== null) {
+        query += ` WHERE blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
+      }
+
+      query += ` GROUP BY UNIX_TIMESTAMP(blockTimestamp) DIV ${div}`;
+
+      const [rows]: any = await DB.query(query);
+      return rows;
+    } catch (e) {
+      logger.err('Cannot generate block fee rates history. Reason: ' + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
 }
 
 export default new BlocksRepository();

backend/src/repositories/HashratesRepository.ts

@@ -102,7 +102,7 @@ class HashratesRepository {
   /**
    * Returns a pool hashrate history
    */
-   public async $getPoolWeeklyHashrate(slug: string): Promise<any[]> {
+  public async $getPoolWeeklyHashrate(slug: string): Promise<any[]> {
     const pool = await PoolsRepository.$getPool(slug);
     if (!pool) {
       throw new Error(`This mining pool does not exist`);

backend/src/routes.ts

@@ -575,8 +575,10 @@ class Routes {
   public async $getPools(interval: string, req: Request, res: Response) {
     try {
       const stats = await miningStats.$getPoolsStats(interval);
+      const blockCount = await BlocksRepository.$blockCount(null, null);
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
+      res.header('X-total-count', blockCount.toString());
       res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
       res.json(stats);
     } catch (e) {
@@ -587,14 +589,12 @@ class Routes {
   public async $getPoolsHistoricalHashrate(req: Request, res: Response) {
     try {
       const hashrates = await HashratesRepository.$getPoolsWeeklyHashrate(req.params.interval ?? null);
-      const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
+      const blockCount = await BlocksRepository.$blockCount(null, null);
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
+      res.header('X-total-count', blockCount.toString());
       res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
-      res.json({
+      res.json(hashrates);
-        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
-        hashrates: hashrates,
-      });
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);
     }
@@ -603,14 +603,12 @@ class Routes {
   public async $getPoolHistoricalHashrate(req: Request, res: Response) {
     try {
       const hashrates = await HashratesRepository.$getPoolWeeklyHashrate(req.params.slug);
-      const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
+      const blockCount = await BlocksRepository.$blockCount(null, null);
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
+      res.header('X-total-count', blockCount.toString());
       res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
-      res.json({
+      res.json(hashrates);
-        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
-        hashrates: hashrates,
-      });
     } catch (e) {
       if (e instanceof Error && e.message.indexOf('This mining pool does not exist') > -1) {
         res.status(404).send(e.message);
@@ -624,12 +622,12 @@ class Routes {
     try {
       const hashrates = await HashratesRepository.$getNetworkDailyHashrate(req.params.interval ?? null);
       const difficulty = await BlocksRepository.$getBlocksDifficulty(req.params.interval ?? null);
-      const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
+      const blockCount = await BlocksRepository.$blockCount(null, null);
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
+      res.header('X-total-count', blockCount.toString());
       res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
       res.json({
-        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
         hashrates: hashrates,
         difficulty: difficulty,
       });
@@ -641,14 +639,12 @@ class Routes {
   public async $getHistoricalBlockFees(req: Request, res: Response) {
     try {
       const blockFees = await mining.$getHistoricalBlockFees(req.params.interval ?? null);
-      const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
+      const blockCount = await BlocksRepository.$blockCount(null, null);
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
+      res.header('X-total-count', blockCount.toString());
       res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
-      res.json({
+      res.json(blockFees);
-        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
-        blockFees: blockFees,
-      });
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);
     }
@@ -657,13 +653,27 @@ class Routes {
   public async $getHistoricalBlockRewards(req: Request, res: Response) {
     try {
       const blockRewards = await mining.$getHistoricalBlockRewards(req.params.interval ?? null);
+      const blockCount = await BlocksRepository.$blockCount(null, null);
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.header('X-total-count', blockCount.toString());
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.json(blockRewards);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  public async $getHistoricalBlockFeeRates(req: Request, res: Response) {
+    try {
+      const blockFeeRates = await mining.$getHistoricalBlockFeeRates(req.params.interval ?? null);
       const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
       res.header('Pragma', 'public');
       res.header('Cache-control', 'public');
       res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
       res.json({
         oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
-        blockRewards: blockRewards,
+        blockFeeRates: blockFeeRates,
       });
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);
@@ -970,7 +980,7 @@ class Routes {
 
   public async $getRewardStats(req: Request, res: Response) {
     try {
-      const response = await mining.$getRewardStats(parseInt(req.params.blockCount))
+      const response = await mining.$getRewardStats(parseInt(req.params.blockCount, 10));
       res.json(response);
     } catch (e) {
       res.status(500).end();

backend/src/sync-assets.ts

@@ -9,55 +9,69 @@ const PATH = './';
 class SyncAssets {
   constructor() { }
 
-  public async syncAssets() {
+  public async syncAssets$() {
     for (const url of config.MEMPOOL.EXTERNAL_ASSETS) {
-      await this.downloadFile(url);
+      try {
+        await this.downloadFile$(url);
+      } catch (e) {
+        throw new Error(`Failed to download external asset. ` + (e instanceof Error ? e.message : e));
+      }
     }
   }
 
-  private async downloadFile(url: string) {
+  private async downloadFile$(url: string) {
-    const fileName = url.split('/').slice(-1)[0];
+    return new Promise((resolve, reject) => {
+      const fileName = url.split('/').slice(-1)[0];
 
-    try {
+      try {
-      if (config.SOCKS5PROXY.ENABLED) {
+        if (config.SOCKS5PROXY.ENABLED) {
-        let socksOptions: any = {
+          const socksOptions: any = {
-          agentOptions: {
+            agentOptions: {
-            keepAlive: true,
+              keepAlive: true,
-          },
+            },
-          host: config.SOCKS5PROXY.HOST,
+            host: config.SOCKS5PROXY.HOST,
-          port: config.SOCKS5PROXY.PORT
+            port: config.SOCKS5PROXY.PORT
-        };
+          };
 
-        if (config.SOCKS5PROXY.USERNAME && config.SOCKS5PROXY.PASSWORD) {
+          if (config.SOCKS5PROXY.USERNAME && config.SOCKS5PROXY.PASSWORD) {
-          socksOptions.username = config.SOCKS5PROXY.USERNAME;
+            socksOptions.username = config.SOCKS5PROXY.USERNAME;
-          socksOptions.password = config.SOCKS5PROXY.PASSWORD;
+            socksOptions.password = config.SOCKS5PROXY.PASSWORD;
+          }
+
+          const agent = new SocksProxyAgent(socksOptions);
+
+          logger.info(`Downloading external asset ${fileName} over the Tor network...`);
+          return axios.get(url, {
+            httpAgent: agent,
+            httpsAgent: agent,
+            responseType: 'stream',
+            timeout: 30000
+          }).then(function (response) {
+            const writer = fs.createWriteStream(PATH + fileName);
+            writer.on('finish', () => {
+              logger.info(`External asset ${fileName} saved to ${PATH + fileName}`);
+              resolve(0);
+            });
+            response.data.pipe(writer);
+          });
+        } else {
+          logger.info(`Downloading external asset ${fileName} over clearnet...`);
+          return axios.get(url, {
+            responseType: 'stream',
+            timeout: 30000
+          }).then(function (response) {
+            const writer = fs.createWriteStream(PATH + fileName);
+            writer.on('finish', () => {
+              logger.info(`External asset ${fileName} saved to ${PATH + fileName}`);
+              resolve(0);
+            });
+            response.data.pipe(writer);
+          });
         }
-
+      } catch (e: any) {
-        const agent = new SocksProxyAgent(socksOptions);
+        reject(e);
-
-        logger.info(`Downloading external asset ${fileName} over the Tor network...`);
-        await axios.get(url, {
-          httpAgent: agent,
-          httpsAgent: agent,
-          responseType: 'stream',
-          timeout: 30000
-        }).then(function (response) {
-          response.data.pipe(fs.createWriteStream(PATH + fileName));
-          logger.info(`External asset ${fileName} saved to ${PATH + fileName}`);
-        });
-      } else {
-        logger.info(`Downloading external asset ${fileName} over clearnet...`);
-        await axios.get(url, {
-          responseType: 'stream',
-          timeout: 30000
-        }).then(function (response) {
-          response.data.pipe(fs.createWriteStream(PATH + fileName));
-          logger.info(`External asset ${fileName} saved to ${PATH + fileName}`);
-        });
       }
-    } catch (e: any) {
+    });
-      throw new Error(`Failed to download external asset. ` + e);
-    }
   }
 }
 

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

@@ -35,6 +35,7 @@ import { GraphsComponent } from './components/graphs/graphs.component';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
 import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
 import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
+import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
 
 let routes: Routes = [
   {
@@ -126,7 +127,11 @@ let routes: Routes = [
           {
             path: 'mining/block-rewards',
             component: BlockRewardsGraphComponent,
-          }
+          },
+          {
+            path: 'mining/block-fee-rates',
+            component: BlockFeeRatesGraphComponent,
+          },
         ],
       },
       {
@@ -264,7 +269,11 @@ let routes: Routes = [
               {
                 path: 'mining/block-rewards',
                 component: BlockRewardsGraphComponent,
-              }
+              },
+              {
+                path: 'mining/block-fee-rates',
+                component: BlockFeeRatesGraphComponent,
+              },
             ]
           },
           {
@@ -400,7 +409,11 @@ let routes: Routes = [
               {
                 path: 'mining/block-rewards',
                 component: BlockRewardsGraphComponent,
-              }
+              },
+              {
+                path: 'mining/block-fee-rates',
+                component: BlockFeeRatesGraphComponent,
+              },
             ]
           },
           {

frontend/src/app/app.module.ts

@@ -83,6 +83,7 @@ import { RewardStatsComponent } from './components/reward-stats/reward-stats.com
 import { DataCyDirective } from './data-cy.directive';
 import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
 import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
+import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
 
 @NgModule({
   declarations: [
@@ -147,6 +148,7 @@ import { BlockRewardsGraphComponent } from './components/block-rewards-graph/blo
     RewardStatsComponent,
     BlockFeesGraphComponent,
     BlockRewardsGraphComponent,
+    BlockFeeRatesGraphComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

frontend/src/app/bitcoin.utils.ts

@@ -143,8 +143,10 @@ export function selectPowerOfTen(val: number) {
   };
 
   let selectedPowerOfTen;
-  if (val < powerOfTen.mega) {
+  if (val < powerOfTen.kilo) {
     selectedPowerOfTen = { divider: 1, unit: '' }; // no scaling
+  } else if (val < powerOfTen.mega) {
+    selectedPowerOfTen = { divider: powerOfTen.kilo, unit: 'k' };
   } else if (val < powerOfTen.giga) {
     selectedPowerOfTen = { divider: powerOfTen.mega, unit: 'M' };
   } else if (val < powerOfTen.terra) {

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

@@ -226,6 +226,10 @@
         <img class="image" src="/resources/profile/phoenix.jpg" />
         <span>Phoenix</span>
       </a>
+      <a href="https://github.com/layer2tech/mercury-wallet" target="_blank" title="Mercury Wallet">
+        <img class="image" src="/resources/profile/mercury.svg" />
+        <span>Mercury</span>
+      </a>
       <a href="https://github.com/muun/apollo" target="_blank" title="Muun Wallet">
         <img class="image" src="/resources/profile/muun.png" />
         <span>Muun</span>

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

@@ -185,6 +185,6 @@
 }
 
 .community-integrations-sponsor {
-  max-width: 750px;
+  max-width: 830px;
   margin: auto;
 }

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

@@ -64,7 +64,7 @@
         </div>
         <div class="w-100 d-block d-md-none"></div>
         <div class="col icon-holder">
-          <img *ngIf="!imageError; else defaultIcon" class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'" (error)="imageError = true">
+          <img *ngIf="!imageError; else defaultIcon" class="assetIcon" [src]="'/api/v1/asset/' + asset.asset_id + '/icon'" (error)="imageError = true">
           <ng-template #defaultIcon>
             <fa-icon class="defaultIcon" [icon]="['fas', 'database']" [fixedWidth]="true" size="8x"></fa-icon>
           </ng-template>

frontend/src/app/components/assets/asset-group/asset-group.component.html

@@ -15,7 +15,7 @@
     <div *ngFor="let asset of group.assets">
       <div class="card">
         <a [routerLink]="['/assets/asset' | relativeUrl, asset.asset_id]">
-          <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
+          <img class="assetIcon" [src]="'/api/v1/asset/' + asset.asset_id + '/icon'">
         </a>
         <div class="title">
           <a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a>

frontend/src/app/components/assets/assets-featured/assets-featured.component.html

@@ -3,14 +3,14 @@
   <div class="card" *ngFor="let group of featured">
     <ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
       <a [routerLink]="['/assets/group' | relativeUrl, group.id]">
-        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
+        <img class="assetIcon" [src]="'/api/v1/asset/' + group.assets[0] + '/icon'">
       </a>
       <div class="title"><a [routerLink]="['/assets/group' | relativeUrl, group.id]">{{ group.name }}</a></div>
       <div class="sub-title" i18n>Group of {{ group.assets.length | number }} assets</div>
     </ng-template>
     <ng-template #singleAsset>
       <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
-        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
+        <img class="assetIcon" [src]="'/api/v1/asset/' + group.asset + '/icon'">
       </a>
       <div class="title">
         <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html

@@ -0,0 +1,47 @@
+<div class="full-container">
+  <div class="card-header mb-0 mb-md-4">
+    <span i18n="mining.block-fee-rates">Block fee rates</span>
+    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
+      <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">
+          <input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 3">
+          <input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 7">
+          <input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
+          <input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
+          <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
+          <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
+          <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
+          <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
+          <input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
+          <input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
+        </label>
+      </div>
+    </form>
+  </div>
+
+  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    (chartInit)="onChartInit($event)">
+  </div>
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+
+</div>

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss

@@ -0,0 +1,135 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.full-container {
+  padding: 0px 15px;
+  width: 100%;
+  min-height: 500px;
+  height: calc(100% - 150px);
+  @media (max-width: 992px) {
+    height: 100%;
+    padding-bottom: 100px;
+  };
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 20px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 55px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 55px;
+  }
+}
+.chart-widget {
+  width: 100%;
+  height: 100%;
+  max-height: 270px;
+}
+
+.formRadioGroup {
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 1130px) {
+    position: relative;
+    top: -65px;
+  }
+  @media (min-width: 830px) and (max-width: 1130px) {
+    position: relative;
+    top: 0px;
+  }
+  @media (min-width: 830px) {
+    flex-direction: row;
+    float: right;
+    margin-top: 0px;
+  }
+  .btn-sm {
+    font-size: 9px;
+    @media (min-width: 830px) {
+      font-size: 14px;
+    }
+  }
+}
+
+.pool-distribution {
+  min-height: 56px;
+  display: block;
+  @media (min-width: 485px) {
+    display: flex;
+    flex-direction: row;
+  }
+  h5 {
+    margin-bottom: 10px;
+  }
+  .item {
+    width: 50%;
+    display: inline-block;
+    margin: 0px auto 20px;
+    &:nth-child(2) {
+      order: 2;
+      @media (min-width: 485px) {
+        order: 3;
+      }
+    }
+    &:nth-child(3) {
+      order: 3;
+      @media (min-width: 485px) {
+        order: 2;
+        display: block;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: block;
+      }
+    }
+    .card-title {
+      font-size: 1rem;
+      color: #4a68b9;
+    }
+    .card-text {
+      font-size: 18px;
+      span {
+        color: #ffffff66;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  max-width: 80px;
+  margin: 15px auto 3px;
+}

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts

@@ -0,0 +1,300 @@
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { Observable } from 'rxjs';
+import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { formatNumber } from '@angular/common';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
+import { StorageService } from 'src/app/services/storage.service';
+import { MiningService } from 'src/app/services/mining.service';
+import { selectPowerOfTen } from 'src/app/bitcoin.utils';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from 'src/app/services/state.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-block-fee-rates-graph',
+  templateUrl: './block-fee-rates-graph.component.html',
+  styleUrls: ['./block-fee-rates-graph.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockFeeRatesGraphComponent implements OnInit {
+  @Input() right: number | string = 45;
+  @Input() left: number | string = 75;
+
+  miningWindowPreference: string;
+  radioGroupForm: FormGroup;
+
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  statsObservable$: Observable<any>;
+  isLoading = true;
+  formatNumber = formatNumber;
+  timespan = '';
+  chartInstance: any = undefined;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private seoService: SeoService,
+    private apiService: ApiService,
+    private formBuilder: FormBuilder,
+    private storageService: StorageService,
+    private miningService: MiningService,
+    private stateService: StateService,
+    private router: Router,
+    private zone: NgZone,
+  ) {
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
+    this.radioGroupForm.controls.dateSpan.setValue('1y');
+  }
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`:@@mining.block-fee-rates:Block Fee Rates`);
+    this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
+    this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
+
+    this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
+      .pipe(
+        startWith(this.miningWindowPreference),
+        switchMap((timespan) => {
+          this.storageService.setValue('miningWindowPreference', timespan);
+          this.timespan = timespan;
+          this.isLoading = true;
+          return this.apiService.getHistoricalBlockFeeRates$(timespan)
+            .pipe(
+              tap((data: any) => {
+                // Group by percentile
+                const seriesData = {
+                  'Min': [],
+                  '10th': [],
+                  '25th': [],
+                  'Median': [],
+                  '75th': [],
+                  '90th': [],
+                  'Max': []
+                };
+                for (const rate of data.blockFeeRates) {
+                  const timestamp = rate.timestamp * 1000;
+                  seriesData['Min'].push([timestamp, rate.avg_fee_0, rate.avg_height]);
+                  seriesData['10th'].push([timestamp, rate.avg_fee_10, rate.avg_height]);
+                  seriesData['25th'].push([timestamp, rate.avg_fee_25, rate.avg_height]);
+                  seriesData['Median'].push([timestamp, rate.avg_fee_50, rate.avg_height]);
+                  seriesData['75th'].push([timestamp, rate.avg_fee_75, rate.avg_height]);
+                  seriesData['90th'].push([timestamp, rate.avg_fee_90, rate.avg_height]);
+                  seriesData['Max'].push([timestamp, rate.avg_fee_100, rate.avg_height]);
+                }
+
+                // Prepare chart
+                const series = [];
+                const legends = [];
+                for (const percentile in seriesData) {
+                  series.push({
+                    zlevel: 0,
+                    stack: 'Total',
+                    name: percentile,
+                    data: seriesData[percentile],
+                    type: 'bar',
+                    barWidth: '100%',
+                    large: true,
+                  });
+
+                  legends.push({
+                    name: percentile,
+                    inactiveColor: 'rgb(110, 112, 121)',
+                    textStyle: {
+                      color: 'white',
+                    },
+                    icon: 'roundRect',
+                    enabled: false,
+                    selected: false,
+                  });
+                }
+
+                this.prepareChartOptions({
+                  legends: legends,
+                  series: series,
+                });
+                this.isLoading = false;
+              }),
+              map((data: any) => {
+                const availableTimespanDay = (
+                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
+                ) / 3600 / 24;
+
+                return {
+                  availableTimespanDay: availableTimespanDay,
+                };
+              }),
+            );
+        }),
+        share()
+      );
+  }
+
+  prepareChartOptions(data) {
+    this.chartOptions = {
+      color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
+      animation: false,
+      grid: {
+        right: this.right,
+        left: this.left,
+        bottom: 80,
+        top: this.isMobile() ? 10 : 50,
+      },
+      tooltip: {
+        show: !this.isMobile(),
+        trigger: 'axis',
+        axisPointer: {
+          type: 'line'
+        },
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: '#b1b1b1',
+          align: 'left',
+        },
+        borderColor: '#000',
+        formatter: function (data) {
+          if (data.length <= 0) {
+            return '';
+          }
+          let tooltip = `<b style="color: white; margin-left: 2px">
+            ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
+
+          for (const pool of data.reverse()) {
+            tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]} sats/vByte<br>`;
+          }
+
+          if (['24h', '3d'].includes(this.timespan)) {
+            tooltip += `<small>At block: ${data[0].data[2]}</small>`;
+          } else {
+            tooltip += `<small>Around block ${data[0].data[2]}</small>`;
+          }
+
+          return tooltip;
+        }.bind(this)
+      },
+      xAxis: data.series.length === 0 ? undefined :
+      {
+        name: formatterXAxisLabel(this.locale, this.timespan),
+        nameLocation: 'middle',
+        nameTextStyle: {
+          padding: [10, 0, 0, 0],
+        },
+        type: 'category',
+        boundaryGap: false,
+        axisLine: { onZero: true },
+        axisLabel: {
+          formatter: val => formatterXAxisTimeCategory(this.locale, this.timespan, parseInt(val, 10)),
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12,
+          hideOverlap: true,
+          padding: [0, 5],
+        },
+      },
+      legend: (data.series.length === 0) ? undefined : {
+        data: data.legends,
+        selected: JSON.parse(this.storageService.getValue('fee_rates_legend')) ?? {
+          'Min': true,
+          '10th': true,
+          '25th': true,
+          'Median': true,
+          '75th': true,
+          '90th': true,
+          'Max': false,
+        },
+        id: 4242,
+      },
+      yAxis: data.series.length === 0 ? undefined : {
+        position: 'left',
+        axisLabel: {
+          color: 'rgb(110, 112, 121)',
+          formatter: (val) => {
+            const selectedPowerOfTen: any = selectPowerOfTen(val);
+            const newVal = Math.round(val / selectedPowerOfTen.divider);
+            return `${newVal}${selectedPowerOfTen.unit} s/vB`;
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        },
+        type: 'value',
+        max: (val) => this.timespan === 'all' ? Math.min(val.max, 5000) : undefined,
+      },
+      series: data.series,
+      dataZoom: [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        maxSpan: 100,
+        minSpan: 5,
+        moveOnMouseMove: false,
+      }, {
+        showDetail: false,
+        show: true,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        left: 20,
+        right: 15,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          }
+        },
+      }],
+    };
+  }
+
+  onChartInit(ec) {
+    if (this.chartInstance !== undefined) {
+      return;
+    }
+
+    this.chartInstance = ec;
+
+    this.chartInstance.on('click', (e) => {
+      if (e.data.data === 9999) { // "Other"
+        return;
+      }
+      this.zone.run(() => {
+        if (['24h', '3d'].includes(this.timespan)) {
+          const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.data[2]}`);
+          this.router.navigate([url]);
+        }
+      });
+    });
+
+    this.chartInstance.on('legendselectchanged', (e) => {
+      this.storageService.setValue('fee_rates_legend', JSON.stringify(e.selected));
+    });
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+}

frontend/src/app/components/block-fees-graph/block-fees-graph.component.html

@@ -3,34 +3,34 @@
     <span i18n="mining.block-fees">Block fees</span>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
           <input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 3">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 432">
           <input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 7">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 1008">
           <input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
           <input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 12960">
           <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
           <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 52560">
           <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 105120">
           <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 157680">
           <input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount > 157680">
           <input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
         </label>
       </div>
@@ -44,20 +44,3 @@
   </div>
 
 </div>
-
-<ng-template #loadingStats>
-  <div class="pool-distribution">
-    <div class="item">
-      <h5 class="card-title" i18n="mining.miners-luck">Hashrate</h5>
-      <p class="card-text">
-        <span class="skeleton-loader skeleton-loader-big"></span>
-      </p>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
-      <p class="card-text">
-        <span class="skeleton-loader skeleton-loader-big"></span>
-      </p>
-    </div>
-  </div>
-</ng-template>

frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts

@@ -25,7 +25,6 @@ import { MiningService } from 'src/app/services/mining.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockFeesGraphComponent implements OnInit {
-  @Input() tableOnly = false;
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
 
@@ -69,19 +68,15 @@ export class BlockFeesGraphComponent implements OnInit {
           this.isLoading = true;
           return this.apiService.getHistoricalBlockFees$(timespan)
             .pipe(
-              tap((data: any) => {
+              tap((response) => {
                 this.prepareChartOptions({
-                  blockFees: data.blockFees.map(val => [val.timestamp * 1000, val.avg_fees / 100000000]),
+                  blockFees: response.body.map(val => [val.timestamp * 1000, val.avg_fees / 100000000]),
                 });
                 this.isLoading = false;
               }),
-              map((data: any) => {
+              map((response) => {
-                const availableTimespanDay = (
-                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
-                ) / 3600 / 24;
-
                 return {
-                  availableTimespanDay: availableTimespanDay,
+                  blockCount: parseInt(response.headers.get('x-total-count'), 10),
                 };
               }),
             );
@@ -150,8 +145,12 @@ export class BlockFeesGraphComponent implements OnInit {
             }
           },
           splitLine: {
-            show: false,
+            lineStyle: {
-          }
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
+            }
+          },
         },
       ],
       series: [
@@ -172,7 +171,7 @@ export class BlockFeesGraphComponent implements OnInit {
         realtime: true,
         zoomLock: true,
         maxSpan: 100,
-        minSpan: 10,
+        minSpan: 5,
         moveOnMouseMove: false,
       }, {
         showDetail: false,

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html

@@ -4,34 +4,34 @@
     <span i18n="mining.block-rewards">Block rewards</span>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
           <input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 3">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 432">
           <input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 7">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 1008">
           <input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
           <input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 12960">
           <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
           <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 52560">
           <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 105120">
           <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 157680">
           <input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount > 157680">
           <input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
         </label>
       </div>
@@ -44,21 +44,4 @@
     <div class="spinner-border text-light"></div>
   </div>
 
-</div>
+</div>
-
-<ng-template #loadingStats>
-  <div class="pool-distribution">
-    <div class="item">
-      <h5 class="card-title" i18n="mining.miners-luck">Hashrate</h5>
-      <p class="card-text">
-        <span class="skeleton-loader skeleton-loader-big"></span>
-      </p>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
-      <p class="card-text">
-        <span class="skeleton-loader skeleton-loader-big"></span>
-      </p>
-    </div>
-  </div>
-</ng-template>

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts

@@ -66,19 +66,15 @@ export class BlockRewardsGraphComponent implements OnInit {
           this.isLoading = true;
           return this.apiService.getHistoricalBlockRewards$(timespan)
             .pipe(
-              tap((data: any) => {
+              tap((response) => {
                 this.prepareChartOptions({
-                  blockRewards: data.blockRewards.map(val => [val.timestamp * 1000, val.avg_rewards / 100000000]),
+                  blockRewards: response.body.map(val => [val.timestamp * 1000, val.avg_rewards / 100000000]),
                 });
                 this.isLoading = false;
               }),
-              map((data: any) => {
+              map((response) => {
-                const availableTimespanDay = (
-                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
-                ) / 3600 / 24;
-
                 return {
-                  availableTimespanDay: availableTimespanDay,
+                  blockCount: parseInt(response.headers.get('x-total-count'), 10),
                 };
               }),
             );
@@ -149,8 +145,12 @@ export class BlockRewardsGraphComponent implements OnInit {
             }
           },
           splitLine: {
-            show: false,
+            lineStyle: {
-          }
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
+            }
+          },
         },
       ],
       series: [
@@ -171,7 +171,7 @@ export class BlockRewardsGraphComponent implements OnInit {
         realtime: true,
         zoomLock: true,
         maxSpan: 100,
-        minSpan: 10,
+        minSpan: 5,
         moveOnMouseMove: false,
       }, {
         showDetail: false,

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.components.ts

@@ -32,7 +32,8 @@ export class DifficultyAdjustmentsTable implements OnInit {
   ngOnInit(): void {
     this.hashrateObservable$ = this.apiService.getHistoricalHashrate$('1y')
       .pipe(
-        map((data: any) => {
+        map((response) => {
+          const data = response.body;
           const availableTimespanDay = (
             (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
           ) / 3600 / 24;

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

@@ -16,6 +16,10 @@
         [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="mining.hashrate-difficulty">
         Hashrate & Difficulty
       </a>
+      <a class="dropdown-item" routerLinkActive="active"
+        [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" i18n="mining.block-fee-rates">
+        Block Fee Rates
+      </a>
       <a class="dropdown-item" routerLinkActive="active"
         [routerLink]="['/graphs/mining/block-fees' | relativeUrl]" i18n="mining.block-fees">
         Block Fees

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -22,25 +22,25 @@
     <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
           <input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 12960">
           <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
           <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 52560">
           <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 105120">
           <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 157680">
           <input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount > 157680">
           <input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
         </label>
       </div>

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -79,7 +79,8 @@ export class HashrateChartComponent implements OnInit {
           this.isLoading = true;
           return this.apiService.getHistoricalHashrate$(timespan)
             .pipe(
-              tap((data: any) => {
+              tap((response) => {
+                const data = response.body;
                 // We generate duplicated data point so the tooltip works nicely
                 const diffFixed = [];
                 let diffIndex = 1;
@@ -111,7 +112,6 @@ export class HashrateChartComponent implements OnInit {
                 this.prepareChartOptions({
                   hashrates: data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]),
                   difficulty: diffFixed.map(val => [val.timestamp * 1000, val.difficulty]),
-                  timestamp: data.oldestIndexedBlockTimestamp,
                 });
                 this.isLoading = false;
 
@@ -120,13 +120,10 @@ export class HashrateChartComponent implements OnInit {
                   throw new Error();
                 }
               }),
-              map((data: any) => {
+              map((response) => {
-                const availableTimespanDay = (
+                const data = response.body;
-                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
-                ) / 3600 / 24;
-
                 return {
-                  availableTimespanDay: availableTimespanDay,
+                  blockCount: parseInt(response.headers.get('x-total-count'), 10),
                   currentDifficulty: Math.round(data.difficulty[data.difficulty.length - 1].difficulty * 100) / 100,
                   currentHashrate: data.hashrates[data.hashrates.length - 1].avgHashrate,
                 };
@@ -290,8 +287,12 @@ export class HashrateChartComponent implements OnInit {
             }
           },
           splitLine: {
-            show: false,
+            lineStyle: {
-          }
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
+            }
+          },
         }
       ],
       series: data.hashrates.length === 0 ? [] : [
@@ -324,7 +325,7 @@ export class HashrateChartComponent implements OnInit {
         realtime: true,
         zoomLock: true,
         maxSpan: 100,
-        minSpan: 10,
+        minSpan: 5,
         moveOnMouseMove: false,
       }, {
         showDetail: false,

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -4,25 +4,25 @@
     <span i18n="mining.pools-dominance">Mining pools dominance</span>
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
           <input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 12960">
           <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
           <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 52560">
           <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 105120">
           <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 157680">
           <input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount > 157680">
           <input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
         </label>
       </div>

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -72,10 +72,11 @@ export class HashrateChartPoolsComponent implements OnInit {
           this.isLoading = true;
           return this.apiService.getHistoricalPoolsHashrate$(timespan)
             .pipe(
-              tap((data: any) => {
+              tap((response) => {
+                const hashrates = response.body;
                 // Prepare series (group all hashrates data point by pool)
                 const grouped = {};
-                for (const hashrate of data.hashrates) {
+                for (const hashrate of hashrates) {
                   if (!grouped.hasOwnProperty(hashrate.poolName)) {
                     grouped[hashrate.poolName] = [];
                   }
@@ -119,7 +120,6 @@ export class HashrateChartPoolsComponent implements OnInit {
                 this.prepareChartOptions({
                   legends: legends,
                   series: series,
-                  timestamp: data.oldestIndexedBlockTimestamp,
                 });
                 this.isLoading = false;
 
@@ -128,13 +128,10 @@ export class HashrateChartPoolsComponent implements OnInit {
                   throw new Error();
                 }
               }),
-              map((data: any) => {
+              map((response) => {
-                const availableTimespanDay = (
-                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
-                ) / 3600 / 24;
                 return {
-                  availableTimespanDay: availableTimespanDay,
+                  blockCount: parseInt(response.headers.get('x-total-count'), 10),
-                };
+                }
               }),
               retryWhen((errors) => errors.pipe(
                 delay(60000)

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -26,36 +26,36 @@
   <div class="card-header" *ngIf="!widget">
     <span i18n="mining.mining-pool-share">Mining pools share</span>
     <form [formGroup]="radioGroupForm" class="formRadioGroup"
-      *ngIf="!widget && (miningStatsObservable$ | async) as miningStats">
+      *ngIf="!widget && (miningStatsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 144">
           <input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 3">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 432">
           <input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 7">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 1008">
           <input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 30">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 4320">
           <input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 90">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 12960">
           <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 180">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 25920">
           <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 365">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 52560">
           <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 730">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 105120">
           <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 157680">
           <input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
         </label>
-        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay > 1095">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount > 157680">
           <input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
         </label>
       </div>

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -276,7 +276,7 @@ export class PoolRankingComponent implements OnInit {
       totalEmptyBlock: 0,
       totalEmptyBlockRatio: '',
       pools: [],
-      availableTimespanDay: 0,
+      totalBlockCount: 0,
       miningUnits: {
         hashrateDivider: 1,
         hashrateUnit: '',

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

@@ -56,7 +56,7 @@ export class PoolComponent implements OnInit {
             .pipe(
               switchMap((data) => {
                 this.isLoading = false;
-                this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]));
+                this.prepareChartOptions(data.map(val => [val.timestamp * 1000, val.avgHashrate]));
                 return [slug];
               }),
             );

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

@@ -179,7 +179,7 @@ export class StatisticsComponent implements OnInit {
     }
 
     // Find median value
-    const vBytes : number[] = [];
+    const vBytes: number[] = [];
     for (const stat of this.mempoolStats) {
       vBytes.push(stat.vbytes_per_second);
     }

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

@@ -79,7 +79,7 @@
                   <tr *ngFor="let group of featuredAssets">
                     <td class="asset-icon">
                       <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
-                        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
+                        <img class="assetIcon" [src]="'/api/v1/asset/' + group.asset + '/icon'">
                       </a>
                     </td>
                     <td class="asset-title">

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

@@ -125,10 +125,10 @@ export class ApiService {
     return this.httpClient.post<any>(this.apiBaseUrl + this.apiBasePath + '/api/tx', hexPayload, { responseType: 'text' as 'json'});
   }
 
-  listPools$(interval: string | undefined) : Observable<PoolsStats> {
+  listPools$(interval: string | undefined) : Observable<any> {
-    return this.httpClient.get<PoolsStats>(
+    return this.httpClient.get<any>(
       this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pools` +
-      (interval !== undefined ? `/${interval}` : '')
+      (interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
     );
   }
 
@@ -157,27 +157,34 @@ export class ApiService {
   getHistoricalHashrate$(interval: string | undefined): Observable<any> {
     return this.httpClient.get<any[]>(
         this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/hashrate` +
-        (interval !== undefined ? `/${interval}` : '')
+        (interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
       );
   }
 
   getHistoricalPoolsHashrate$(interval: string | undefined): Observable<any> {
     return this.httpClient.get<any[]>(
         this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/hashrate/pools` +
-        (interval !== undefined ? `/${interval}` : '')
+        (interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
       );
   }
 
   getHistoricalBlockFees$(interval: string | undefined) : Observable<any> {
     return this.httpClient.get<any[]>(
       this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fees` +
-      (interval !== undefined ? `/${interval}` : '')
+      (interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
     );
   }
 
   getHistoricalBlockRewards$(interval: string | undefined) : Observable<any> {
     return this.httpClient.get<any[]>(
       this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/rewards` +
+      (interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
+    );
+  }
+
+  getHistoricalBlockFeeRates$(interval: string | undefined) : Observable<any> {
+    return this.httpClient.get<any[]>(
+      this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fee-rates` +
       (interval !== undefined ? `/${interval}` : '')
     );
   }

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

@@ -18,7 +18,7 @@ export interface MiningStats {
   totalEmptyBlockRatio: string;
   pools: SinglePoolStats[];
   miningUnits: MiningUnits;
-  availableTimespanDay: number;
+  totalBlockCount: number;
 }
 
 @Injectable({
@@ -37,7 +37,7 @@ export class MiningService {
    */
   public getMiningStats(interval: string): Observable<MiningStats> {
     return this.apiService.listPools$(interval).pipe(
-      map(pools => this.generateMiningStats(pools))
+      map(response => this.generateMiningStats(response))
     );
   }
 
@@ -82,7 +82,8 @@ export class MiningService {
     return preference;
   }
 
-  private generateMiningStats(stats: PoolsStats): MiningStats {
+  private generateMiningStats(response): MiningStats {
+    const stats: PoolsStats = response.body;
     const miningUnits = this.getMiningUnits();
     const hashrateDivider = miningUnits.hashrateDivider;
 
@@ -100,10 +101,6 @@ export class MiningService {
       };
     });
 
-    const availableTimespanDay = (
-      (new Date().getTime() / 1000) - (stats.oldestIndexedBlockTimestamp)
-    ) / 3600 / 24;
-
     return {
       lastEstimatedHashrate: (stats.lastEstimatedHashrate / hashrateDivider).toFixed(2),
       blockCount: stats.blockCount,
@@ -111,7 +108,7 @@ export class MiningService {
       totalEmptyBlockRatio: totalEmptyBlockRatio,
       pools: poolsStats,
       miningUnits: miningUnits,
-      availableTimespanDay: availableTimespanDay,
+      totalBlockCount: parseInt(response.headers.get('x-total-count'), 10),
     };
   }
 }

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

@@ -1,10 +1,9 @@
 export const formatterXAxis = (
   locale: string,
   windowPreference: string,
-  value: string
+  value: string | number
 ) => {
-
+  if (typeof value === 'string' && value.length === 0) {
-  if(value.length === 0){
     return null;
   }
 
@@ -13,6 +12,7 @@ export const formatterXAxis = (
     case '2h':
       return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
     case '24h':
+    case '3d':
       return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric', minute: 'numeric' });
     case '1w':
     case '1m':
@@ -23,6 +23,8 @@ export const formatterXAxis = (
     case '2y':
     case '3y':
       return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+    case 'all':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'short' });
   }
 };
 
@@ -35,6 +37,7 @@ export const formatterXAxisLabel = (
     case '2h':
     case '24h':
       return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+    case '3d':
     case '1w':
       return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
     case '1m':
@@ -47,3 +50,30 @@ export const formatterXAxisLabel = (
       return null;
   }
 };
+
+export const formatterXAxisTimeCategory = (
+  locale: string,
+  windowPreference: string,
+  value: number
+) => {
+  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' });
+    case '3d':
+    case '1w':
+      return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric' });
+    case '1m':
+    case '3m':
+      return date.toLocaleDateString(locale, { month: 'long', day: 'numeric' });
+    case '6m':
+    case '1y':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+    case '2y':
+    case '3y':
+    case 'all':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
+  }
+};

frontend/src/resources/profile/mercury.svg

@@ -0,0 +1,25 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337 337">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #0054f4;
+      }
+
+      .cls-2 {
+        fill: #009cff;
+      }
+
+      .cls-3 {
+        fill: #0085c7;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M102.48,176l-.12.19a7.64,7.64,0,1,1-13.23-7.64l19.73-34.25a5,5,0,0,0-4.31-7.45H56.6c-10.05-.4-17.29,11-12.5,20l35,74.73h0a35.38,35.38,0,0,0,51.07,14.84Z"/>
+    <path class="cls-1" d="M294.41,228a14.22,14.22,0,0,0-1.47-6.11l-35-74.64h0a35.38,35.38,0,0,0-40.41-19.41l-.18,0,16.48,35.88a7.64,7.64,0,0,1,11.1,10l-35,60.58a5,5,0,0,0,4.37,7.57h66.11A13.79,13.79,0,0,0,294.41,228Z"/>
+    <g>
+      <path class="cls-2" d="M197.22,50.31c-.78-2-2.94-5.79-5.85-7-5-2.5-11.91-1.08-14.74,4.1l-45.84,79.43h0l-28.43,49.34a7.63,7.63,0,0,1-13.49-.5l51.69,112.55c4.22,9,16.09,8.77,20.59.19L188,242h0l43.74-75.79a7.63,7.63,0,0,1,13.67.93l-46-112Z"/>
+      <path class="cls-3" d="M245.49,167.35s0,0,0,0h0Z"/>
+    </g>
+  </g>
+</svg>

production/nginx-cache-warmer

@@ -57,6 +57,16 @@ do for url in / \
 	'/api/v1/mining/blocks/rewards/2y' \
 	'/api/v1/mining/blocks/rewards/3y' \
 	'/api/v1/mining/blocks/rewards/all' \
+	'/api/v1/mining/blocks/fee-rates/24h' \
+	'/api/v1/mining/blocks/fee-rates/3d' \
+	'/api/v1/mining/blocks/fee-rates/1w' \
+	'/api/v1/mining/blocks/fee-rates/1m' \
+	'/api/v1/mining/blocks/fee-rates/3m' \
+	'/api/v1/mining/blocks/fee-rates/6m' \
+	'/api/v1/mining/blocks/fee-rates/1y' \
+	'/api/v1/mining/blocks/fee-rates/2y' \
+	'/api/v1/mining/blocks/fee-rates/3y' \
+	'/api/v1/mining/blocks/fee-rates/all' \
 
 	do
 		curl -s "https://${hostname}${url}" >/dev/null