Merge branch 'master' into nymkappa/bugfix/fast-forward-re-org
This commit is contained in:
		
						commit
						8d279edfe7
					
				@ -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();
 | 
			
		||||
 | 
			
		||||
@ -1,8 +1,7 @@
 | 
			
		||||
import config from '../config';
 | 
			
		||||
import DB from '../database';
 | 
			
		||||
import logger from '../logger';
 | 
			
		||||
 | 
			
		||||
const sleep = (ms: number) => new Promise(res => setTimeout(res, ms));
 | 
			
		||||
import { Common } from './common';
 | 
			
		||||
 | 
			
		||||
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);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,4 @@
 | 
			
		||||
import * as fs from 'fs';
 | 
			
		||||
import config from '../../config';
 | 
			
		||||
import logger from '../../logger';
 | 
			
		||||
 | 
			
		||||
class Icons {
 | 
			
		||||
 | 
			
		||||
@ -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
 | 
			
		||||
   */
 | 
			
		||||
 | 
			
		||||
@ -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();
 | 
			
		||||
@ -322,6 +322,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)
 | 
			
		||||
      ;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -416,7 +416,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`;
 | 
			
		||||
 | 
			
		||||
@ -439,7 +441,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`;
 | 
			
		||||
 | 
			
		||||
@ -456,6 +460,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();
 | 
			
		||||
 | 
			
		||||
@ -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`);
 | 
			
		||||
 | 
			
		||||
@ -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({
 | 
			
		||||
        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
 | 
			
		||||
        hashrates: hashrates,
 | 
			
		||||
      });
 | 
			
		||||
      res.json(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({
 | 
			
		||||
        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
 | 
			
		||||
        hashrates: hashrates,
 | 
			
		||||
      });
 | 
			
		||||
      res.json(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({
 | 
			
		||||
        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
 | 
			
		||||
        blockFees: blockFees,
 | 
			
		||||
      });
 | 
			
		||||
      res.json(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();
 | 
			
		||||
 | 
			
		||||
@ -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) {
 | 
			
		||||
    const fileName = url.split('/').slice(-1)[0];
 | 
			
		||||
  private async downloadFile$(url: string) {
 | 
			
		||||
    return new Promise((resolve, reject) => {
 | 
			
		||||
      const fileName = url.split('/').slice(-1)[0];
 | 
			
		||||
 | 
			
		||||
    try {
 | 
			
		||||
      if (config.SOCKS5PROXY.ENABLED) {
 | 
			
		||||
        let socksOptions: any = {
 | 
			
		||||
          agentOptions: {
 | 
			
		||||
            keepAlive: true,
 | 
			
		||||
          },
 | 
			
		||||
          host: config.SOCKS5PROXY.HOST,
 | 
			
		||||
          port: config.SOCKS5PROXY.PORT
 | 
			
		||||
        };
 | 
			
		||||
      try {
 | 
			
		||||
        if (config.SOCKS5PROXY.ENABLED) {
 | 
			
		||||
          const socksOptions: any = {
 | 
			
		||||
            agentOptions: {
 | 
			
		||||
              keepAlive: true,
 | 
			
		||||
            },
 | 
			
		||||
            host: config.SOCKS5PROXY.HOST,
 | 
			
		||||
            port: config.SOCKS5PROXY.PORT
 | 
			
		||||
          };
 | 
			
		||||
 | 
			
		||||
        if (config.SOCKS5PROXY.USERNAME && config.SOCKS5PROXY.PASSWORD) {
 | 
			
		||||
          socksOptions.username = config.SOCKS5PROXY.USERNAME;
 | 
			
		||||
          socksOptions.password = config.SOCKS5PROXY.PASSWORD;
 | 
			
		||||
          if (config.SOCKS5PROXY.USERNAME && config.SOCKS5PROXY.PASSWORD) {
 | 
			
		||||
            socksOptions.username = config.SOCKS5PROXY.USERNAME;
 | 
			
		||||
            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);
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        const agent = new SocksProxyAgent(socksOptions);
 | 
			
		||||
 | 
			
		||||
        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) {
 | 
			
		||||
        reject(e);
 | 
			
		||||
      }
 | 
			
		||||
    } catch (e: any) {
 | 
			
		||||
      throw new Error(`Failed to download external asset. ` + e);
 | 
			
		||||
    }
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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,
 | 
			
		||||
              },
 | 
			
		||||
            ]
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
 | 
			
		||||
@ -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' }),
 | 
			
		||||
 | 
			
		||||
@ -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) {
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -185,6 +185,6 @@
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.community-integrations-sponsor {
 | 
			
		||||
  max-width: 750px;
 | 
			
		||||
  max-width: 830px;
 | 
			
		||||
  margin: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
@ -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;
 | 
			
		||||
}
 | 
			
		||||
@ -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);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@ -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>
 | 
			
		||||
@ -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) => {
 | 
			
		||||
                const availableTimespanDay = (
 | 
			
		||||
                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
 | 
			
		||||
                ) / 3600 / 24;
 | 
			
		||||
 | 
			
		||||
              map((response) => {
 | 
			
		||||
                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,
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
<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>
 | 
			
		||||
</div>
 | 
			
		||||
@ -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) => {
 | 
			
		||||
                const availableTimespanDay = (
 | 
			
		||||
                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
 | 
			
		||||
                ) / 3600 / 24;
 | 
			
		||||
 | 
			
		||||
              map((response) => {
 | 
			
		||||
                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,
 | 
			
		||||
 | 
			
		||||
@ -19,14 +19,14 @@
 | 
			
		||||
      </thead>
 | 
			
		||||
      <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
 | 
			
		||||
        <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
 | 
			
		||||
          <td class="height " [class]="widget ? 'widget' : ''">
 | 
			
		||||
          <td [class]="widget ? 'widget' : ''">
 | 
			
		||||
            <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
 | 
			
		||||
              }}</a>
 | 
			
		||||
          </td>
 | 
			
		||||
          <td class="pool text-left" [class]="widget ? 'widget' : ''">
 | 
			
		||||
            <div class="tooltip-custom">
 | 
			
		||||
              <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
 | 
			
		||||
                <img width="23" height="23" src="{{ block.extras.pool['logo'] }}"
 | 
			
		||||
                <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
 | 
			
		||||
                  onError="this.src = './resources/mining-pools/default.svg'">
 | 
			
		||||
                <span class="pool-name">{{ block.extras.pool.name }}</span>
 | 
			
		||||
              </a>
 | 
			
		||||
@ -61,26 +61,26 @@
 | 
			
		||||
        <tbody>
 | 
			
		||||
          <tr *ngFor="let item of skeletonLines">
 | 
			
		||||
            <td class="height" [class]="widget ? 'widget' : ''">
 | 
			
		||||
              <span class="skeleton-loader"></span>
 | 
			
		||||
              <span class="skeleton-loader" style="max-width: 75px"></span>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="pool text-left" [class]="widget ? 'widget' : ''">
 | 
			
		||||
              <img width="25" height="25" style="opacity: 0">
 | 
			
		||||
              <span class="skeleton-loader"></span>
 | 
			
		||||
              <img width="1" height="25" style="opacity: 0">
 | 
			
		||||
              <span class="skeleton-loader" style="max-width: 125px"></span>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="timestamp" *ngIf="!widget">
 | 
			
		||||
              <span class="skeleton-loader"></span>
 | 
			
		||||
              <span class="skeleton-loader" style="max-width: 150px"></span>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="mined" *ngIf="!widget">
 | 
			
		||||
              <span class="skeleton-loader"></span>
 | 
			
		||||
              <span class="skeleton-loader" style="max-width: 125px"></span>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="reward text-right" [class]="widget ? 'widget' : ''">
 | 
			
		||||
              <span class="skeleton-loader"></span>
 | 
			
		||||
              <span class="skeleton-loader" style="max-width: 75px"></span>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="fees text-right" *ngIf="!widget">
 | 
			
		||||
              <span class="skeleton-loader"></span>
 | 
			
		||||
              <span class="skeleton-loader" style="max-width: 75px"></span>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="txs text-right" [class]="widget ? 'widget' : ''">
 | 
			
		||||
              <span class="skeleton-loader"></span>
 | 
			
		||||
              <span class="skeleton-loader" style="max-width: 75px"></span>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="size" *ngIf="!widget">
 | 
			
		||||
              <span class="skeleton-loader"></span>
 | 
			
		||||
 | 
			
		||||
@ -35,6 +35,9 @@ td {
 | 
			
		||||
 | 
			
		||||
.pool {
 | 
			
		||||
  width: 17%;
 | 
			
		||||
  @media (max-width: 576px) {
 | 
			
		||||
    width: 34%;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.pool.widget {
 | 
			
		||||
  width: 40%;
 | 
			
		||||
@ -51,9 +54,6 @@ td {
 | 
			
		||||
 | 
			
		||||
.height {
 | 
			
		||||
  width: 10%;
 | 
			
		||||
  @media (max-width: 1100px) {
 | 
			
		||||
    width: 10%;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.height.widget {
 | 
			
		||||
  width: 20%;
 | 
			
		||||
@ -63,6 +63,7 @@ td {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.timestamp {
 | 
			
		||||
  width: 18%;
 | 
			
		||||
  @media (max-width: 900px) {
 | 
			
		||||
    display: none;
 | 
			
		||||
  }
 | 
			
		||||
@ -92,6 +93,7 @@ td {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.fees {
 | 
			
		||||
  width: 10%;
 | 
			
		||||
  @media (max-width: 650px) {
 | 
			
		||||
    display: none;
 | 
			
		||||
  }
 | 
			
		||||
@ -101,6 +103,7 @@ td {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.reward {
 | 
			
		||||
  width: 10%;
 | 
			
		||||
  @media (max-width: 576px) {
 | 
			
		||||
    width: 7%;
 | 
			
		||||
    padding-right: 30px;
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
 | 
			
		||||
@ -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
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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) => {
 | 
			
		||||
                const availableTimespanDay = (
 | 
			
		||||
                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
 | 
			
		||||
                ) / 3600 / 24;
 | 
			
		||||
 | 
			
		||||
              map((response) => {
 | 
			
		||||
                const data = response.body;
 | 
			
		||||
                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,
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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) => {
 | 
			
		||||
                const availableTimespanDay = (
 | 
			
		||||
                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
 | 
			
		||||
                ) / 3600 / 24;
 | 
			
		||||
              map((response) => {
 | 
			
		||||
                return {
 | 
			
		||||
                  availableTimespanDay: availableTimespanDay,
 | 
			
		||||
                };
 | 
			
		||||
                  blockCount: parseInt(response.headers.get('x-total-count'), 10),
 | 
			
		||||
                }
 | 
			
		||||
              }),
 | 
			
		||||
              retryWhen((errors) => errors.pipe(
 | 
			
		||||
                delay(60000)
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -276,7 +276,7 @@ export class PoolRankingComponent implements OnInit {
 | 
			
		||||
      totalEmptyBlock: 0,
 | 
			
		||||
      totalEmptyBlockRatio: '',
 | 
			
		||||
      pools: [],
 | 
			
		||||
      availableTimespanDay: 0,
 | 
			
		||||
      totalBlockCount: 0,
 | 
			
		||||
      miningUnits: {
 | 
			
		||||
        hashrateDivider: 1,
 | 
			
		||||
        hashrateUnit: '',
 | 
			
		||||
 | 
			
		||||
@ -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];
 | 
			
		||||
              }),
 | 
			
		||||
            );
 | 
			
		||||
 | 
			
		||||
@ -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);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -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">
 | 
			
		||||
 | 
			
		||||
@ -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> {
 | 
			
		||||
    return this.httpClient.get<PoolsStats>(
 | 
			
		||||
  listPools$(interval: string | undefined) : Observable<any> {
 | 
			
		||||
    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}` : '')
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -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),
 | 
			
		||||
    };
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1,10 +1,9 @@
 | 
			
		||||
export const formatterXAxis = (
 | 
			
		||||
  locale: string,
 | 
			
		||||
  windowPreference: string,
 | 
			
		||||
  value: string
 | 
			
		||||
  value: string | number
 | 
			
		||||
) => {
 | 
			
		||||
 | 
			
		||||
  if(value.length === 0){
 | 
			
		||||
  if (typeof value === 'string' && 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' });
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										25
									
								
								frontend/src/resources/profile/mercury.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										25
									
								
								frontend/src/resources/profile/mercury.svg
									
									
									
									
									
										Normal file
									
								
							@ -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>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 1.0 KiB  | 
@ -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
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user