diff --git a/backend/src/api/common.ts b/backend/src/api/common.ts index f9ae196b3..45ef5f576 100644 --- a/backend/src/api/common.ts +++ b/backend/src/api/common.ts @@ -77,7 +77,7 @@ export class Common { }; } - static sleep(ms: number): Promise { + static sleep$(ms: number): Promise { return new Promise((resolve) => { setTimeout(() => { resolve(); diff --git a/backend/src/api/database-migration.ts b/backend/src/api/database-migration.ts index 0e9a18220..45b82a3a5 100644 --- a/backend/src/api/database-migration.ts +++ b/backend/src/api/database-migration.ts @@ -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); } diff --git a/backend/src/api/liquid/icons.ts b/backend/src/api/liquid/icons.ts index 1c7c658af..ee08757d0 100644 --- a/backend/src/api/liquid/icons.ts +++ b/backend/src/api/liquid/icons.ts @@ -1,5 +1,4 @@ import * as fs from 'fs'; -import config from '../../config'; import logger from '../../logger'; class Icons { diff --git a/backend/src/api/mining.ts b/backend/src/api/mining.ts index 201813899..94191a09f 100644 --- a/backend/src/api/mining.ts +++ b/backend/src/api/mining.ts @@ -15,7 +15,7 @@ class Mining { } /** - * Get historical block reward and total fee + * Get historical block total fee */ public async $getHistoricalBlockFees(interval: string | null = null): Promise { return await BlocksRepository.$getHistoricalBlockFees( @@ -34,6 +34,16 @@ class Mining { ); } + /** + * Get historical block fee rates percentiles + */ + public async $getHistoricalBlockFeeRates(interval: string | null = null): Promise { + return await BlocksRepository.$getHistoricalBlockFeeRates( + this.getTimeRange(interval), + Common.getSqlInterval(interval) + ); + } + /** * Generate high level overview of the pool ranks and general stats */ diff --git a/backend/src/index.ts b/backend/src/index.ts index 943448e3a..db78b0cc8 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -85,16 +85,16 @@ class Server { this.setUpWebsocketHandling(); - await syncAssets.syncAssets(); + await syncAssets.syncAssets$(); diskCache.loadMempoolCache(); if (config.DATABASE.ENABLED) { await DB.checkDbConnection(); try { - if (process.env.npm_config_reindex != undefined) { // Re-index requests + if (process.env.npm_config_reindex !== undefined) { // Re-index requests const tables = process.env.npm_config_reindex.split(','); logger.warn(`Indexed data for "${process.env.npm_config_reindex}" tables will be erased in 5 seconds (using '--reindex')`); - await Common.sleep(5000); + await Common.sleep$(5000); await databaseMigration.$truncateIndexedData(tables); } await databaseMigration.$initializeOrMigrateDatabase(); @@ -326,6 +326,7 @@ class Server { .get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', routes.$getRewardStats) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees/:interval', routes.$getHistoricalBlockFees) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/rewards/:interval', routes.$getHistoricalBlockRewards) + .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', routes.$getHistoricalBlockFeeRates) ; } diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts index 8e96a0c38..78a17eb71 100644 --- a/backend/src/repositories/BlocksRepository.ts +++ b/backend/src/repositories/BlocksRepository.ts @@ -387,7 +387,9 @@ class BlocksRepository { */ public async $getHistoricalBlockFees(div: number, interval: string | null): Promise { try { - let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, + let query = `SELECT + CAST(AVG(height) as INT) as avg_height, + CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, CAST(AVG(fees) as INT) as avg_fees FROM blocks`; @@ -410,7 +412,9 @@ class BlocksRepository { */ public async $getHistoricalBlockRewards(div: number, interval: string | null): Promise { try { - let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, + let query = `SELECT + CAST(AVG(height) as INT) as avg_height, + CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, CAST(AVG(reward) as INT) as avg_rewards FROM blocks`; @@ -427,6 +431,37 @@ class BlocksRepository { throw e; } } + + /** + * Get the historical averaged block fee rate percentiles + */ + public async $getHistoricalBlockFeeRates(div: number, interval: string | null): Promise { + 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(); diff --git a/backend/src/routes.ts b/backend/src/routes.ts index e1ffad61f..db5b4f05f 100644 --- a/backend/src/routes.ts +++ b/backend/src/routes.ts @@ -664,6 +664,22 @@ class Routes { } } + 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, + blockFeeRates: blockFeeRates, + }); + } catch (e) { + res.status(500).send(e instanceof Error ? e.message : e); + } + } + public async getBlock(req: Request, res: Response) { try { const result = await bitcoinApi.$getBlock(req.params.hash); diff --git a/backend/src/sync-assets.ts b/backend/src/sync-assets.ts index d7644e24b..032e71ee2 100644 --- a/backend/src/sync-assets.ts +++ b/backend/src/sync-assets.ts @@ -9,55 +9,69 @@ const PATH = './'; class SyncAssets { constructor() { } - public async syncAssets() { + public async syncAssets$() { for (const url of config.MEMPOOL.EXTERNAL_ASSETS) { - await this.downloadFile(url); + try { + await this.downloadFile$(url); + } catch (e) { + throw new Error(`Failed to download external asset. ` + (e instanceof Error ? e.message : e)); + } } } - private async downloadFile(url: string) { - 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); - } + }); } } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 64d906b77..a9485f823 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -35,6 +35,7 @@ import { GraphsComponent } from './components/graphs/graphs.component'; import { BlocksList } from './components/blocks-list/blocks-list.component'; import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component'; import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component'; +import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component'; let routes: Routes = [ { @@ -126,7 +127,11 @@ let routes: Routes = [ { path: 'mining/block-rewards', component: BlockRewardsGraphComponent, - } + }, + { + path: 'mining/block-fee-rates', + component: BlockFeeRatesGraphComponent, + }, ], }, { @@ -264,7 +269,11 @@ let routes: Routes = [ { path: 'mining/block-rewards', component: BlockRewardsGraphComponent, - } + }, + { + path: 'mining/block-fee-rates', + component: BlockFeeRatesGraphComponent, + }, ] }, { @@ -400,7 +409,11 @@ let routes: Routes = [ { path: 'mining/block-rewards', component: BlockRewardsGraphComponent, - } + }, + { + path: 'mining/block-fee-rates', + component: BlockFeeRatesGraphComponent, + }, ] }, { diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 8d7253fdf..27a637efc 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -83,6 +83,7 @@ import { RewardStatsComponent } from './components/reward-stats/reward-stats.com import { DataCyDirective } from './data-cy.directive'; import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component'; import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component'; +import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component'; @NgModule({ declarations: [ @@ -147,6 +148,7 @@ import { BlockRewardsGraphComponent } from './components/block-rewards-graph/blo RewardStatsComponent, BlockFeesGraphComponent, BlockRewardsGraphComponent, + BlockFeeRatesGraphComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), diff --git a/frontend/src/app/bitcoin.utils.ts b/frontend/src/app/bitcoin.utils.ts index 72fde7471..82b929f93 100644 --- a/frontend/src/app/bitcoin.utils.ts +++ b/frontend/src/app/bitcoin.utils.ts @@ -143,8 +143,10 @@ export function selectPowerOfTen(val: number) { }; let selectedPowerOfTen; - if (val < powerOfTen.mega) { + if (val < powerOfTen.kilo) { selectedPowerOfTen = { divider: 1, unit: '' }; // no scaling + } else if (val < powerOfTen.mega) { + selectedPowerOfTen = { divider: powerOfTen.kilo, unit: 'k' }; } else if (val < powerOfTen.giga) { selectedPowerOfTen = { divider: powerOfTen.mega, unit: 'M' }; } else if (val < powerOfTen.terra) { diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index 74203ab81..27892626c 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -226,6 +226,10 @@ Phoenix + + + Mercury + Muun diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss index 222c14944..a373683c6 100644 --- a/frontend/src/app/components/about/about.component.scss +++ b/frontend/src/app/components/about/about.component.scss @@ -185,6 +185,6 @@ } .community-integrations-sponsor { - max-width: 750px; + max-width: 830px; margin: auto; } diff --git a/frontend/src/app/components/asset/asset.component.html b/frontend/src/app/components/asset/asset.component.html index b1728a0ff..800e0a8f6 100644 --- a/frontend/src/app/components/asset/asset.component.html +++ b/frontend/src/app/components/asset/asset.component.html @@ -64,7 +64,7 @@
- + diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.html b/frontend/src/app/components/assets/asset-group/asset-group.component.html index ac0ed4327..df3f90abd 100644 --- a/frontend/src/app/components/assets/asset-group/asset-group.component.html +++ b/frontend/src/app/components/assets/asset-group/asset-group.component.html @@ -15,7 +15,7 @@
- +
{{ asset.name }} diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html index b87713ceb..7893fda2c 100644 --- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html +++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html @@ -3,14 +3,14 @@
- +
{{ group.name }}
Group of {{ group.assets.length | number }} assets
 - +
{{ group.name }} diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html new file mode 100644 index 000000000..1fb97407b --- /dev/null +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html @@ -0,0 +1,47 @@ +
+
+ Block fee rates +
+
+ + + + + + + + + + +
+
+
+ +
+
+
+ +
+ +
\ No newline at end of file diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss new file mode 100644 index 000000000..54dbe5fad --- /dev/null +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss @@ -0,0 +1,135 @@ +.card-header { + border-bottom: 0; + font-size: 18px; + @media (min-width: 465px) { + font-size: 20px; + } +} + +.main-title { + position: relative; + color: #ffffff91; + margin-top: -13px; + font-size: 10px; + text-transform: uppercase; + font-weight: 500; + text-align: center; + padding-bottom: 3px; +} + +.full-container { + padding: 0px 15px; + width: 100%; + min-height: 500px; + height: calc(100% - 150px); + @media (max-width: 992px) { + height: 100%; + padding-bottom: 100px; + }; +} + +.chart { + width: 100%; + height: 100%; + padding-bottom: 20px; + padding-right: 10px; + @media (max-width: 992px) { + padding-bottom: 25px; + } + @media (max-width: 829px) { + padding-bottom: 50px; + } + @media (max-width: 767px) { + padding-bottom: 25px; + } + @media (max-width: 629px) { + padding-bottom: 55px; + } + @media (max-width: 567px) { + padding-bottom: 55px; + } +} +.chart-widget { + width: 100%; + height: 100%; + max-height: 270px; +} + +.formRadioGroup { + margin-top: 6px; + display: flex; + flex-direction: column; + @media (min-width: 1130px) { + position: relative; + top: -65px; + } + @media (min-width: 830px) and (max-width: 1130px) { + position: relative; + top: 0px; + } + @media (min-width: 830px) { + flex-direction: row; + float: right; + margin-top: 0px; + } + .btn-sm { + font-size: 9px; + @media (min-width: 830px) { + font-size: 14px; + } + } +} + +.pool-distribution { + min-height: 56px; + display: block; + @media (min-width: 485px) { + display: flex; + flex-direction: row; + } + h5 { + margin-bottom: 10px; + } + .item { + width: 50%; + display: inline-block; + margin: 0px auto 20px; + &:nth-child(2) { + order: 2; + @media (min-width: 485px) { + order: 3; + } + } + &:nth-child(3) { + order: 3; + @media (min-width: 485px) { + order: 2; + display: block; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: block; + } + } + .card-title { + font-size: 1rem; + color: #4a68b9; + } + .card-text { + font-size: 18px; + span { + color: #ffffff66; + font-size: 12px; + } + } + } +} + +.skeleton-loader { + width: 100%; + display: block; + max-width: 80px; + margin: 15px auto 3px; +} diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts new file mode 100644 index 000000000..9b4363fd8 --- /dev/null +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts @@ -0,0 +1,300 @@ +import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core'; +import { EChartsOption } from 'echarts'; +import { Observable } from 'rxjs'; +import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; +import { ApiService } from 'src/app/services/api.service'; +import { SeoService } from 'src/app/services/seo.service'; +import { formatNumber } from '@angular/common'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils'; +import { StorageService } from 'src/app/services/storage.service'; +import { MiningService } from 'src/app/services/mining.service'; +import { selectPowerOfTen } from 'src/app/bitcoin.utils'; +import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe'; +import { StateService } from 'src/app/services/state.service'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-block-fee-rates-graph', + templateUrl: './block-fee-rates-graph.component.html', + styleUrls: ['./block-fee-rates-graph.component.scss'], + styles: [` + .loadingGraphs { + position: absolute; + top: 50%; + left: calc(50% - 15px); + z-index: 100; + } + `], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BlockFeeRatesGraphComponent implements OnInit { + @Input() right: number | string = 45; + @Input() left: number | string = 75; + + miningWindowPreference: string; + radioGroupForm: FormGroup; + + chartOptions: EChartsOption = {}; + chartInitOptions = { + renderer: 'svg', + }; + + statsObservable$: Observable; + 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 = ` + ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}
`; + + for (const pool of data.reverse()) { + tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]} sats/vByte
`; + } + + if (['24h', '3d'].includes(this.timespan)) { + tooltip += `At block: ${data[0].data[2]}`; + } else { + tooltip += `Around block ${data[0].data[2]}`; + } + + 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); + } +} diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html index 8f1e017d7..eaf30ef17 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html @@ -44,20 +44,3 @@
- - -
-
-
Hashrate
-

- -

-
-
-
Difficulty
-

- -

-
-
- \ No newline at end of file diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts index 9b542e010..e6aeaa61c 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts @@ -25,7 +25,6 @@ import { MiningService } from 'src/app/services/mining.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockFeesGraphComponent implements OnInit { - @Input() tableOnly = false; @Input() right: number | string = 45; @Input() left: number | string = 75; @@ -146,8 +145,12 @@ export class BlockFeesGraphComponent implements OnInit { } }, splitLine: { - show: false, - } + lineStyle: { + type: 'dotted', + color: '#ffffff66', + opacity: 0.25, + } + }, }, ], series: [ @@ -168,7 +171,7 @@ export class BlockFeesGraphComponent implements OnInit { realtime: true, zoomLock: true, maxSpan: 100, - minSpan: 10, + minSpan: 5, moveOnMouseMove: false, }, { showDetail: false, diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html index c5824038f..922439e41 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html @@ -44,21 +44,4 @@
-
- - -
-
-
Hashrate
-

- -

-
-
-
Difficulty
-

- -

-
-
- \ No newline at end of file +
\ No newline at end of file diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts index e096ce1ac..f525c0c4b 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts @@ -145,8 +145,12 @@ export class BlockRewardsGraphComponent implements OnInit { } }, splitLine: { - show: false, - } + lineStyle: { + type: 'dotted', + color: '#ffffff66', + opacity: 0.25, + } + }, }, ], series: [ @@ -167,7 +171,7 @@ export class BlockRewardsGraphComponent implements OnInit { realtime: true, zoomLock: true, maxSpan: 100, - minSpan: 10, + minSpan: 5, moveOnMouseMove: false, }, { showDetail: false, diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html index e3bdb0629..dce79ad97 100644 --- a/frontend/src/app/components/graphs/graphs.component.html +++ b/frontend/src/app/components/graphs/graphs.component.html @@ -16,6 +16,10 @@ [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="mining.hashrate-difficulty"> Hashrate & Difficulty + + Block Fee Rates + Block Fees diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts index 838854360..2a8419c24 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -287,8 +287,12 @@ export class HashrateChartComponent implements OnInit { } }, splitLine: { - show: false, - } + lineStyle: { + type: 'dotted', + color: '#ffffff66', + opacity: 0.25, + } + }, } ], series: data.hashrates.length === 0 ? [] : [ @@ -321,7 +325,7 @@ export class HashrateChartComponent implements OnInit { realtime: true, zoomLock: true, maxSpan: 100, - minSpan: 10, + minSpan: 5, moveOnMouseMove: false, }, { showDetail: false, diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts index 1336339bc..252bb13af 100644 --- a/frontend/src/app/components/statistics/statistics.component.ts +++ b/frontend/src/app/components/statistics/statistics.component.ts @@ -179,7 +179,7 @@ export class StatisticsComponent implements OnInit { } // Find median value - const vBytes : number[] = []; + const vBytes: number[] = []; for (const stat of this.mempoolStats) { vBytes.push(stat.vbytes_per_second); } diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 95ff4aa33..80ab9545d 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -79,7 +79,7 @@ - + diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 4c10077d3..b892e16ff 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -182,6 +182,13 @@ export class ApiService { ); } + getHistoricalBlockFeeRates$(interval: string | undefined) : Observable { + return this.httpClient.get( + this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fee-rates` + + (interval !== undefined ? `/${interval}` : '') + ); + } + getRewardStats$(blockCount: number = 144): Observable { return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/reward-stats/${blockCount}`); } diff --git a/frontend/src/app/shared/graphs.utils.ts b/frontend/src/app/shared/graphs.utils.ts index e0ffe841e..cf12f2f94 100644 --- a/frontend/src/app/shared/graphs.utils.ts +++ b/frontend/src/app/shared/graphs.utils.ts @@ -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' }); + } +}; diff --git a/frontend/src/resources/profile/mercury.svg b/frontend/src/resources/profile/mercury.svg new file mode 100644 index 000000000..35af2b8a7 --- /dev/null +++ b/frontend/src/resources/profile/mercury.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + diff --git a/production/nginx-cache-warmer b/production/nginx-cache-warmer index 3c3204493..165a97860 100755 --- a/production/nginx-cache-warmer +++ b/production/nginx-cache-warmer @@ -57,6 +57,16 @@ do for url in / \ '/api/v1/mining/blocks/rewards/2y' \ '/api/v1/mining/blocks/rewards/3y' \ '/api/v1/mining/blocks/rewards/all' \ + '/api/v1/mining/blocks/fee-rates/24h' \ + '/api/v1/mining/blocks/fee-rates/3d' \ + '/api/v1/mining/blocks/fee-rates/1w' \ + '/api/v1/mining/blocks/fee-rates/1m' \ + '/api/v1/mining/blocks/fee-rates/3m' \ + '/api/v1/mining/blocks/fee-rates/6m' \ + '/api/v1/mining/blocks/fee-rates/1y' \ + '/api/v1/mining/blocks/fee-rates/2y' \ + '/api/v1/mining/blocks/fee-rates/3y' \ + '/api/v1/mining/blocks/fee-rates/all' \ do curl -s "https://${hostname}${url}" >/dev/null