mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 06:47:52 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
wiz 2022-04-24 03:52:18 +00:00 • committed by GitHub
commit 97bd7ebbdd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 836 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/src/api/common.ts
View file

@ -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();

9
backend/src/api/database-migration.ts
View file

@ -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
backend/src/api/liquid/icons.ts
View file

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

12
backend/src/api/mining.ts
View file

@ -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
*/

7
backend/src/index.ts
View file

@ -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)
;
}

39
backend/src/repositories/BlocksRepository.ts
View file

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

48
backend/src/routes.ts
View file

@ -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();

32
backend/src/sync-assets.ts
View file

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

19
frontend/src/app/app-routing.module.ts
View file

@ -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,
},
]
},
{

2
frontend/src/app/app.module.ts
View file

@ -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' }),

4
frontend/src/app/bitcoin.utils.ts
View file

@ -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) {

4
frontend/src/app/components/about/about.component.html
View file

@ -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>

2
frontend/src/app/components/about/about.component.scss
View file

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

2
frontend/src/app/components/asset/asset.component.html
View file

@ -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>

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

@ -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>

4
frontend/src/app/components/assets/assets-featured/assets-featured.component.html
View file

@ -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>

47
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html Normal file
View file

@ -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>

135
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss Normal file
View file

@ -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;
}

300
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts Normal file
View file

@ -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);
}
}

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

@ -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>

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

@ -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,9 +145,13 @@ 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,

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

@ -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>
@ -45,20 +45,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>

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

@ -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,9 +145,13 @@ 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,

3
frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.components.ts
View file

@ -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;

4
frontend/src/app/components/graphs/graphs.component.html
View file

@ -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

14
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View file

@ -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>

21
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View file

@ -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,

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

@ -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>

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

@ -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)

22
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View file

@ -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>

2
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View file

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

2
frontend/src/app/components/pool/pool.component.ts
View file

@ -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];
}),
);

2
frontend/src/app/components/statistics/statistics.component.ts
View file

@ -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);
}

2
frontend/src/app/dashboard/dashboard.component.html
View file

@ -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">

19
frontend/src/app/services/api.service.ts
View file

@ -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}` : '')
);
}

13
frontend/src/app/services/mining.service.ts
View file

@ -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),
};
}
}

36
frontend/src/app/shared/graphs.utils.ts
View file

@ -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
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

10
production/nginx-cache-warmer
View file

@ -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