machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into mononaut/mobile-chain-jumping

Browse Source
This commit is contained in:
softsimon
2023-02-23 14:55:41 +04:00
committed by GitHub
parent 1a22ec572e 54a1e58894
commit 29660df1e8
52 changed files with 432 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app.constants.ts
View File

@@ -72,7 +72,7 @@ export const chartColors = [
];
export const poolsColor = {
'unknown': '#9C9C9C',
'unknown': '#FDD835',
};
export const feeLevels = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,

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

@@ -7,6 +7,7 @@ import { AppComponent } from './components/app/app.component';
import { ElectrsApiService } from './services/electrs-api.service';
import { StateService } from './services/state.service';
import { CacheService } from './services/cache.service';
import { PriceService } from './services/price.service';
import { EnterpriseService } from './services/enterprise.service';
import { WebsocketService } from './services/websocket.service';
import { AudioService } from './services/audio.service';
@@ -26,6 +27,7 @@ const providers = [
ElectrsApiService,
StateService,
CacheService,
PriceService,
WebsocketService,
AudioService,
SeoService,

16
frontend/src/app/components/amount/amount.component.html
View File

@@ -1,7 +1,19 @@
<ng-container *ngIf="!noFiat && (viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin">
<span class="fiat">{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ (conversions ? conversions[currency] : 0) * satoshis / 100000000 | fiatCurrency : digitsInfo : currency }}</span>
<span class="fiat" *ngIf="blockConversion; else noblockconversion">
{{ addPlus && satoshis >= 0 ? '+' : '' }}
{{
(
(blockConversion.price[currency] > 0 ? blockConversion.price[currency] : null) ??
(blockConversion.price['USD'] * blockConversion.exchangeRates['USD' + currency]) ?? 0
) * satoshis / 100000000 | fiatCurrency : digitsInfo : currency
}}
</span>
<ng-template #noblockconversion>
<span class="fiat">{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ (conversions ? conversions[currency] : 0) * satoshis / 100000000 | fiatCurrency : digitsInfo : currency }}</span>
</ng-template>
</ng-container>
<ng-template #viewFiatVin>
<ng-template #viewFiatVin>
<ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
<span i18n="shared.confidential">Confidential</span>
</ng-template>

2
frontend/src/app/components/amount/amount.component.ts
View File

@@ -1,6 +1,7 @@
import { Component, OnInit, OnDestroy, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Observable, Subscription } from 'rxjs';
import { Price } from 'src/app/services/price.service';
@Component({
selector: 'app-amount',
@@ -21,6 +22,7 @@ export class AmountComponent implements OnInit, OnDestroy {
@Input() digitsInfo = '1.8-8';
@Input() noFiat = false;
@Input() addPlus = false;
@Input() blockConversion: Price;
constructor(
private stateService: StateService,

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

@@ -10,7 +10,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" formControlName="dateSpan"> 24h
</label>

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

@@ -78,3 +78,8 @@
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

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

@@ -10,7 +10,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
<input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]" formControlName="dateSpan"> 1M
</label>

5
frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
View File

@@ -78,3 +78,8 @@
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

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

@@ -1,19 +1,17 @@
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
import { EChartsOption, graphic } from 'echarts';
import { Observable, Subscription } from 'rxjs';
import { Observable } from 'rxjs';
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
import { formatNumber } from '@angular/common';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
import { StateService } from '../../services/state.service';
import { download, formatterXAxis } from '../../shared/graphs.utils';
import { StorageService } from '../../services/storage.service';
import { MiningService } from '../../services/mining.service';
import { ActivatedRoute } from '@angular/router';
import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
import { fiatCurrencies } from '../../app.constants';
@Component({
selector: 'app-block-fees-graph',
@@ -47,7 +45,6 @@ export class BlockFeesGraphComponent implements OnInit {
timespan = '';
chartInstance: any = undefined;
currencySubscription: Subscription;
currency: string;
constructor(
@@ -57,21 +54,13 @@ export class BlockFeesGraphComponent implements OnInit {
private formBuilder: UntypedFormBuilder,
private storageService: StorageService,
private miningService: MiningService,
private stateService: StateService,
private route: ActivatedRoute,
private fiatShortenerPipe: FiatShortenerPipe,
private fiatCurrencyPipe: FiatCurrencyPipe,
) {
this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
this.radioGroupForm.controls.dateSpan.setValue('1y');
this.currencySubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
if (fiat && fiatCurrencies[fiat]?.indexed) {
this.currency = fiat;
} else {
this.currency = 'USD';
}
});
this.currency = 'USD';
}
ngOnInit(): void {
@@ -92,6 +81,7 @@ export class BlockFeesGraphComponent implements OnInit {
.pipe(
startWith(this.radioGroupForm.controls.dateSpan.value),
switchMap((timespan) => {
this.isLoading = true;
this.storageService.setValue('miningWindowPreference', timespan);
this.timespan = timespan;
this.isLoading = true;

2
frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html
View File

@@ -10,7 +10,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 24h
</label>

5
frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
View File

@@ -78,3 +78,8 @@
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

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

@@ -11,7 +11,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
<input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> 1M
</label>
@@ -31,7 +31,7 @@
<input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> 3Y
</label>
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
<input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"> ALL
<input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> ALL
</label>
</div>
</form>

5
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
View File

@@ -78,3 +78,8 @@
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

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

@@ -1,19 +1,17 @@
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
import { EChartsOption, graphic } from 'echarts';
import { Observable, Subscription } from 'rxjs';
import { Observable } from 'rxjs';
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
import { formatNumber } from '@angular/common';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
import { download, formatterXAxis } from '../../shared/graphs.utils';
import { MiningService } from '../../services/mining.service';
import { StateService } from '../../services/state.service';
import { StorageService } from '../../services/storage.service';
import { ActivatedRoute } from '@angular/router';
import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
import { fiatCurrencies } from '../../app.constants';
@Component({
selector: 'app-block-rewards-graph',
@@ -47,7 +45,6 @@ export class BlockRewardsGraphComponent implements OnInit {
timespan = '';
chartInstance: any = undefined;
currencySubscription: Subscription;
currency: string;
constructor(
@@ -56,19 +53,12 @@ export class BlockRewardsGraphComponent implements OnInit {
private apiService: ApiService,
private formBuilder: UntypedFormBuilder,
private miningService: MiningService,
private stateService: StateService,
private storageService: StorageService,
private route: ActivatedRoute,
private fiatShortenerPipe: FiatShortenerPipe,
private fiatCurrencyPipe: FiatCurrencyPipe,
) {
this.currencySubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
if (fiat && fiatCurrencies[fiat]?.indexed) {
this.currency = fiat;
} else {
this.currency = 'USD';
}
});
this.currency = 'USD';
}
ngOnInit(): void {
@@ -80,7 +70,7 @@ export class BlockRewardsGraphComponent implements OnInit {
this.route
.fragment
.subscribe((fragment) => {
if (['3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
if (['1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
}
});

2
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
View File

@@ -9,7 +9,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-sizes-weights' | relativeUrl]" formControlName="dateSpan"> 24h
</label>

5
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
View File

@@ -78,3 +78,8 @@
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

14
frontend/src/app/components/block/block.component.html
View File

@@ -124,7 +124,13 @@
</tr>
<tr *ngIf="block?.extras?.medianFee != undefined">
<td class="td-width" i18n="block.median-fee">Median fee</td>
<td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
<td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
<span class="fiat">
<app-fiat [blockConversion]="blockConversion" [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2"
i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes"
placement="bottom"></app-fiat>
</span>
</td>
</tr>
<ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
<tr>
@@ -132,13 +138,13 @@
<td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
<app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
<span class="fiat">
<app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
<app-fiat [blockConversion]="blockConversion" [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
</span>
</td>
<ng-template #liquidTotalFees>
<td>
<app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
[value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
[blockConversion]="blockConversion" [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
</td>
</ng-template>
</tr>
@@ -147,7 +153,7 @@
<td>
<app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
<span class="fiat">
<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
<app-fiat [blockConversion]="blockConversion" [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
</span>
</td>
</tr>

20
frontend/src/app/components/block/block.component.ts
View File

@@ -13,6 +13,7 @@ import { BlockAudit, BlockExtended, TransactionStripped } from '../../interfaces
import { ApiService } from '../../services/api.service';
import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
import { detectWebGL } from '../../shared/graphs.utils';
import { PriceService, Price } from 'src/app/services/price.service';
@Component({
selector: 'app-block',
@@ -81,6 +82,9 @@ export class BlockComponent implements OnInit, OnDestroy {
timeLtr: boolean;
childChangeSubscription: Subscription;
auditPrefSubscription: Subscription;
priceSubscription: Subscription;
blockConversion: Price;
@ViewChildren('blockGraphProjected') blockGraphProjected: QueryList<BlockOverviewGraphComponent>;
@ViewChildren('blockGraphActual') blockGraphActual: QueryList<BlockOverviewGraphComponent>;
@@ -94,7 +98,8 @@ export class BlockComponent implements OnInit, OnDestroy {
private seoService: SeoService,
private websocketService: WebsocketService,
private relativeUrlPipe: RelativeUrlPipe,
private apiService: ApiService
private apiService: ApiService,
private priceService: PriceService,
) {
this.webGlEnabled = detectWebGL();
}
@@ -432,6 +437,19 @@ export class BlockComponent implements OnInit, OnDestroy {
}
}
});
if (this.priceSubscription) {
this.priceSubscription.unsubscribe();
}
this.priceSubscription = block$.pipe(
switchMap((block) => {
return this.priceService.getPrices().pipe(
tap(() => {
this.blockConversion = this.priceService.getPriceForTimestamp(block.timestamp);
})
);
})
).subscribe();
}
ngAfterViewInit(): void {

18
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@@ -14,20 +14,26 @@
}}</a>
</div>
<div class="block-body">
<div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
<div *ngIf="block?.extras; else emptyfees" [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container
i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
</div>
<ng-template #emptyfees>
<div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
&nbsp;
</div>
</ng-template>
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
*ngIf="block?.extras?.feeRange">
*ngIf="block?.extras?.feeRange; else emptyfeespan">
{{ block?.extras?.feeRange?.[1] | number:feeRounding }} - {{
block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container
i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
</div>
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
*ngIf="!block?.extras?.feeRange">
&nbsp;
</div>
<ng-template #emptyfeespan>
<div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fee-span">
&nbsp;
</div>
</ng-template>
<div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
class="block-size">
<app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>

2
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@@ -31,7 +31,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 12960" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
<input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" [attr.data-cy]="'3m'" formControlName="dateSpan"> 3M
</label>

5
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

@@ -131,4 +131,9 @@
display: block;
max-width: 80px;
margin: 15px auto 3px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

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

@@ -11,7 +11,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 25920" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
<input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" [attr.data-cy]="'6m'" formControlName="dateSpan"> 6M
</label>

5
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
View File

@@ -82,3 +82,8 @@
.loadingGraphs.widget {
top: 75%;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

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

@@ -5,7 +5,7 @@ import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/op
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { poolsColor } from '../../app.constants';
import { chartColors, poolsColor } from '../../app.constants';
import { StorageService } from '../../services/storage.service';
import { MiningService } from '../../services/mining.service';
import { download } from '../../shared/graphs.utils';
@@ -173,6 +173,7 @@ export class HashrateChartPoolsComponent implements OnInit {
this.chartOptions = {
title: title,
animation: false,
color: chartColors.filter(color => color !== '#FDD835'),
grid: {
right: this.right,
left: this.left,

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

@@ -40,7 +40,7 @@
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup"
*ngIf="!widget && (miningStatsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
<input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/pools' | relativeUrl]" [attr.data-cy]="'24h'" formControlName="dateSpan"> 24h
</label>
@@ -92,6 +92,8 @@
<th class="" i18n="mining.pool-name">Pool</th>
<th class="" *ngIf="this.miningWindowPreference === '24h'" i18n="mining.hashrate">Hashrate</th>
<th class="" i18n="master-page.blocks">Blocks</th>
<th *ngIf="auditAvailable" class="health text-right widget" i18n="latest-blocks.avg_health"
i18n-ngbTooltip="latest-blocks.avg_health" ngbTooltip="Avg Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Avg Health</th>
<th class="d-none d-md-block" i18n="mining.empty-blocks">Empty blocks</th>
</tr>
</thead>
@@ -102,9 +104,23 @@
<img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.src = '/resources/mining-pools/default.svg'">
</td>
<td class=""><a [routerLink]="[('/mining/pool/' + pool.slug) | relativeUrl]">{{ pool.name }}</a></td>
<td class="" *ngIf="this.miningWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{
<td class="" *ngIf="this.miningWindowPreference === '24h'">{{ pool.lastEstimatedHashrate }} {{
miningStats.miningUnits.hashrateUnit }}</td>
<td class="">{{ pool['blockText'] }}</td>
<td class="d-flex justify-content-center">
{{ pool.blockCount }}<span class="d-none d-md-block">&nbsp;({{ pool.share }}%)</span>
</td>
<td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<a
class="health-badge badge"
[class.badge-success]="pool.avgMatchRate >= 99"
[class.badge-warning]="pool.avgMatchRate >= 75 && pool.avgMatchRate < 99"
[class.badge-danger]="pool.avgMatchRate < 75"
*ngIf="pool.avgMatchRate != null; else nullHealth"
>{{ pool.avgMatchRate }}%</a>
<ng-template #nullHealth>
<span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
</ng-template>
</td>
<td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
</tr>
<tr style="border-top: 1px solid #555">

5
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@@ -139,3 +139,8 @@
max-width: 80px;
margin: 15px auto 3px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}

16
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View File

@@ -4,7 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router';
import { EChartsOption, PieSeriesOption } from 'echarts';
import { concat, Observable } from 'rxjs';
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
import { SinglePoolStats } from '../../interfaces/node-api.interface';
import { SeoService } from '../../services/seo.service';
import { StorageService } from '../..//services/storage.service';
import { MiningService, MiningStats } from '../../services/mining.service';
@@ -26,6 +25,8 @@ export class PoolRankingComponent implements OnInit {
miningWindowPreference: string;
radioGroupForm: UntypedFormGroup;
auditAvailable = false;
indexingAvailable = false;
isLoading = true;
chartOptions: EChartsOption = {};
chartInitOptions = {
@@ -60,6 +61,10 @@ export class PoolRankingComponent implements OnInit {
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
this.indexingAvailable = (this.stateService.env.BASE_MODULE === 'mempool' &&
this.stateService.env.MINING_DASHBOARD === true);
this.auditAvailable = this.indexingAvailable && this.stateService.env.AUDIT;
this.route
.fragment
.subscribe((fragment) => {
@@ -73,6 +78,7 @@ export class PoolRankingComponent implements OnInit {
.pipe(
startWith(this.radioGroupForm.controls.dateSpan.value), // (trigger when the page loads)
tap((value) => {
this.isLoading = true;
this.timespan = value;
if (!this.widget) {
this.storageService.setValue('miningWindowPreference', value);
@@ -92,7 +98,6 @@ export class PoolRankingComponent implements OnInit {
)
.pipe(
map(data => {
data.pools = data.pools.map((pool: SinglePoolStats) => this.formatPoolUI(pool));
data['minersLuck'] = (100 * (data.blockCount / 1008)).toFixed(2); // luck 1w
return data;
}),
@@ -104,11 +109,6 @@ export class PoolRankingComponent implements OnInit {
);
}
formatPoolUI(pool: SinglePoolStats) {
pool['blockText'] = pool.blockCount.toString() + ` (${pool.share}%)`;
return pool;
}
generatePoolsChartSerieData(miningStats) {
let poolShareThreshold = 0.5;
if (isMobile()) {
@@ -219,7 +219,7 @@ export class PoolRankingComponent implements OnInit {
this.chartOptions = {
animation: false,
color: chartColors,
color: chartColors.filter(color => color !== '#FDD835'),
tooltip: {
trigger: 'item',
textStyle: {

8
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -61,12 +61,6 @@
</div>
</td>
</tr>
<tr *ngIf="latestBlock && tx.status.block_height <= latestBlock.height - 8">
<td class="td-width" i18n="transaction.included-in-block|Transaction included in block">Included in block</td>
<td>
<a [routerLink]="['/block/' | relativeUrl, tx.status.block_hash]" [state]="{ data: { blockHeight: tx.status.block_height } }">{{ tx.status.block_height }}</a>
</td>
</tr>
<ng-template [ngIf]="transactionTime > 0">
<tr>
<td i18n="transaction.confirmed|Transaction Confirmed state">Confirmed</td>
@@ -475,7 +469,7 @@
<tbody>
<tr>
<td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></td>
<td>{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="tx.fee"></app-fiat></span></td>
</tr>
<tr>
<td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>

18
frontend/src/app/components/transaction/transaction.component.ts
View File

@@ -8,10 +8,11 @@ import {
retryWhen,
delay,
map,
mergeMap
mergeMap,
tap
} from 'rxjs/operators';
import { Transaction } from '../../interfaces/electrs.interface';
import { of, merge, Subscription, Observable, Subject, timer, combineLatest, from, throwError } from 'rxjs';
import { of, merge, Subscription, Observable, Subject, timer, from, throwError } from 'rxjs';
import { StateService } from '../../services/state.service';
import { CacheService } from '../../services/cache.service';
import { WebsocketService } from '../../services/websocket.service';
@@ -21,6 +22,7 @@ import { SeoService } from '../../services/seo.service';
import { BlockExtended, CpfpInfo } from '../../interfaces/node-api.interface';
import { LiquidUnblinding } from './liquid-ublinding';
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
import { Price, PriceService } from 'src/app/services/price.service';
@Component({
selector: 'app-transaction',
@@ -69,7 +71,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
hideFlow: boolean = this.stateService.hideFlow.value;
overrideFlowPreference: boolean = null;
flowEnabled: boolean;
blockConversion: Price;
tooltipPosition: { x: number, y: number };
@ViewChild('graphContainer')
@@ -85,7 +87,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
private websocketService: WebsocketService,
private audioService: AudioService,
private apiService: ApiService,
private seoService: SeoService
private seoService: SeoService,
private priceService: PriceService,
) {}
ngOnInit() {
@@ -323,6 +326,13 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
}
this.fetchRbfHistory$.next(this.tx.txid);
}
this.priceService.getPrices().pipe(
tap(() => {
this.blockConversion = this.priceService.getPriceForTimestamp(tx.status.block_time);
})
).subscribe();
setTimeout(() => { this.applyFragment(); }, 0);
},
(error) => {

12
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@@ -88,7 +88,7 @@
</ng-template>
<ng-template #defaultOutput>
<span *ngIf="vin.lazy" class="skeleton-loader"></span>
<app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
<app-amount [blockConversion]="tx.price" *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
</ng-template>
</td>
</tr>
@@ -216,7 +216,7 @@
</ng-template>
</ng-template>
<ng-template #defaultOutput>
<app-amount [satoshis]="vout.value"></app-amount>
<app-amount [blockConversion]="tx.price" [satoshis]="vout.value"></app-amount>
</ng-template>
</td>
<td class="arrow-td">
@@ -283,7 +283,9 @@
<div class="summary">
<div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase && tx.fee !== -1">
{{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></span>
{{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span
class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol"
i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee"></app-fiat></span></span>
</div>
<div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show more inputs to reveal fee data</div>
@@ -301,12 +303,12 @@
<button *ngIf="address === ''; else viewingAddress" type="button" class="btn btn-sm btn-primary mt-2 ml-2" (click)="switchCurrency()">
<ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>
<ng-template #defaultAmount>
<app-amount [satoshis]="getTotalTxOutput(tx)"></app-amount>
<app-amount [blockConversion]="tx.price" [satoshis]="getTotalTxOutput(tx)"></app-amount>
</ng-template>
</button>
<ng-template #viewingAddress>
<button type="button" class="btn btn-sm mt-2 ml-2" (click)="switchCurrency()" [ngClass]="{'btn-success': tx['addressValue'] >= 0, 'btn-danger': tx['addressValue'] < 0}">
<app-amount [satoshis]="tx['addressValue']" [addPlus]="true"></app-amount>
<app-amount [blockConversion]="tx.price" [satoshis]="tx['addressValue']" [addPlus]="true"></app-amount>
</button>
</ng-template>
</div>

8
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@@ -9,6 +9,7 @@ import { AssetsService } from '../../services/assets.service';
import { filter, map, tap, switchMap } from 'rxjs/operators';
import { BlockExtended } from '../../interfaces/node-api.interface';
import { ApiService } from '../../services/api.service';
import { PriceService } from 'src/app/services/price.service';
@Component({
selector: 'app-transactions-list',
@@ -50,6 +51,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
private apiService: ApiService,
private assetsService: AssetsService,
private ref: ChangeDetectorRef,
private priceService: PriceService,
) { }
ngOnInit(): void {
@@ -147,6 +149,12 @@ export class TransactionsListComponent implements OnInit, OnChanges {
tx['addressValue'] = addressIn - addressOut;
}
this.priceService.getPrices().pipe(
tap(() => {
tx['price'] = this.priceService.getPriceForTimestamp(tx.status.block_time);
})
).subscribe();
});
const txIds = this.transactions.filter((tx) => !tx._outspends).map((tx) => tx.txid);
if (txIds.length) {

10
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
View File

@@ -196,8 +196,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
this.outputs = this.initLines('out', voutWithFee, totalValue, this.maxStrands);
this.middle = {
path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`,
style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}`
path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.25} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.25}`,
style: `stroke-width: ${this.combinedWeight + 0.5}; stroke: ${this.gradient[1]}`
};
this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false)
@@ -254,7 +254,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
const lineParams = weights.map((w, i) => {
return {
weight: w,
thickness: xputs[i].value === 0 ? this.zeroValueThickness : Math.max(this.minWeight - 1, w) + 1,
thickness: xputs[i].value === 0 ? this.zeroValueThickness : Math.min(this.combinedWeight + 0.5, Math.max(this.minWeight - 1, w) + 1),
offset: 0,
innerY: 0,
outerY: 0,
@@ -266,7 +266,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
// bounds of the middle segment
const innerTop = (this.height / 2) - (this.combinedWeight / 2);
const innerBottom = innerTop + this.combinedWeight;
const innerBottom = innerTop + this.combinedWeight + 0.5;
// tracks the visual bottom of the endpoints of the previous line
let lastOuter = 0;
let lastInner = innerTop;
@@ -291,7 +291,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
// set the vertical position of the (center of the) outer side of the line
line.outerY = lastOuter + (line.thickness / 2);
line.innerY = Math.min(innerBottom + (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2)));
line.innerY = Math.min(innerBottom - (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2)));
// special case to center single input/outputs
if (xputs.length === 1) {

15
frontend/src/app/fiat/fiat.component.html
View File

@@ -1 +1,14 @@
<span class="green-color" *ngIf="(conversions$ | async) as conversions">{{ (conversions ? conversions[currency] : 0) * value / 100000000 | fiatCurrency : digitsInfo : currency }}</span>
<span class="green-color" *ngIf="blockConversion; else noblockconversion">
{{
(
(blockConversion.price[currency] > 0 ? blockConversion.price[currency] : null) ??
(blockConversion.price['USD'] * blockConversion.exchangeRates['USD' + currency]) ?? 0
) * value / 100000000 | fiatCurrency : digitsInfo : currency
}}
</span>
<ng-template #noblockconversion>
<span class="green-color" *ngIf="(conversions$ | async) as conversions">
{{ (conversions[currency] ?? conversions['USD'] ?? 0) * value / 100000000 | fiatCurrency : digitsInfo : currency }}
</span>
</ng-template>

2
frontend/src/app/fiat/fiat.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Price } from '../services/price.service';
import { StateService } from '../services/state.service';
@Component({
@@ -15,6 +16,7 @@ export class FiatComponent implements OnInit, OnDestroy {
@Input() value: number;
@Input() digitsInfo = '1.2-2';
@Input() blockConversion: Price;
constructor(
private stateService: StateService,

2
frontend/src/app/interfaces/electrs.interface.ts
View File

@@ -1,3 +1,4 @@
import { Price } from '../services/price.service';
import { IChannel } from './node-api.interface';
export interface Transaction {
@@ -23,6 +24,7 @@ export interface Transaction {
_deduced?: boolean;
_outspends?: Outspend[];
_channels?: TransactionChannels;
price?: Price;
}
export interface TransactionChannels {

1
frontend/src/app/interfaces/node-api.interface.ts
View File

@@ -73,6 +73,7 @@ export interface SinglePoolStats {
emptyBlockRatio: string;
logo: string;
slug: string;
avgMatchRate: number;
}
export interface PoolsStats {
blockCount: number;

3
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
View File

@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, NgZone, OnInit } from '@angular/core';
import { SeoService } from '../../services/seo.service';
import { ApiService } from '../../services/api.service';
import { Observable, switchMap, tap, zip } from 'rxjs';
import { delay, Observable, switchMap, tap, zip } from 'rxjs';
import { AssetsService } from '../../services/assets.service';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@@ -75,6 +75,7 @@ export class NodesChannelsMap implements OnInit {
this.channelsObservable = this.activatedRoute.paramMap
.pipe(
delay(100),
switchMap((params: ParamMap) => {
this.isLoading = true;
if (this.style === 'channelpage' && this.channel.length === 0 || !this.hasLocation) {

5
frontend/src/app/services/api.service.ts
View File

@@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
import { StateService } from './state.service';
import { WebsocketResponse } from '../interfaces/websocket.interface';
import { Outspend, Transaction } from '../interfaces/electrs.interface';
import { Conversion } from './price.service';
@Injectable({
providedIn: 'root'
@@ -303,4 +304,8 @@ export class ApiService {
(style !== undefined ? `?style=${style}` : '')
);
}
getHistoricalPrice$(): Observable<Conversion> {
return this.httpClient.get<Conversion>( this.apiBaseUrl + this.apiBasePath + '/api/v1/historical-price');
}
}

125
frontend/src/app/services/price.service.ts Normal file
View File

@@ -0,0 +1,125 @@
import { Injectable } from '@angular/core';
import { map, Observable, of, shareReplay } from 'rxjs';
import { ApiService } from './api.service';
// nodejs backend interfaces
export interface ApiPrice {
time?: number,
USD: number,
EUR: number,
GBP: number,
CAD: number,
CHF: number,
AUD: number,
JPY: number,
}
export interface ExchangeRates {
USDEUR: number,
USDGBP: number,
USDCAD: number,
USDCHF: number,
USDAUD: number,
USDJPY: number,
}
export interface Conversion {
prices: ApiPrice[],
exchangeRates: ExchangeRates;
}
// frontend interface
export interface Price {
price: ApiPrice,
exchangeRates: ExchangeRates,
}
export interface ConversionDict {
prices: { [timestamp: number]: ApiPrice }
exchangeRates: ExchangeRates;
}
@Injectable({
providedIn: 'root'
})
export class PriceService {
historicalPrice: ConversionDict = {
prices: null,
exchangeRates: null,
};
constructor(
private apiService: ApiService
) {
}
getEmptyPrice(): Price {
return {
price: {
USD: 0, EUR: 0, GBP: 0, CAD: 0, CHF: 0, AUD: 0, JPY: 0,
},
exchangeRates: {
USDEUR: 0, USDGBP: 0, USDCAD: 0, USDCHF: 0, USDAUD: 0, USDJPY: 0,
},
};
}
/**
* Fetch prices from the nodejs backend only once
*/
getPrices(): Observable<void> {
if (this.historicalPrice.prices) {
return of(null);
}
return this.apiService.getHistoricalPrice$().pipe(
map((conversion: Conversion) => {
if (!this.historicalPrice.prices) {
this.historicalPrice.prices = Object();
}
for (const price of conversion.prices) {
this.historicalPrice.prices[price.time] = {
USD: price.USD, EUR: price.EUR, GBP: price.GBP, CAD: price.CAD,
CHF: price.CHF, AUD: price.AUD, JPY: price.JPY
};
}
this.historicalPrice.exchangeRates = conversion.exchangeRates;
return;
}),
shareReplay(),
);
}
/**
* Note: The first block with a price we have is block 68952 (using MtGox price history)
*
* @param blockTimestamp
*/
getPriceForTimestamp(blockTimestamp: number): Price | null {
if (!blockTimestamp) {
return undefined;
}
const priceTimestamps = Object.keys(this.historicalPrice.prices);
priceTimestamps.push(Number.MAX_SAFE_INTEGER.toString());
priceTimestamps.sort().reverse();
// Small trick here. Because latest blocks have higher timestamps than our
// latest price timestamp (we only insert once every hour), we have no price for them.
// Therefore we want to fallback to the websocket price by returning an undefined `price` field.
// Since this.historicalPrice.prices[Number.MAX_SAFE_INTEGER] does not exists
// it will return `undefined` and automatically use the websocket price.
// This way we can differenciate blocks without prices like the genesis block
// vs ones without a price (yet) like the latest blocks
for (const t of priceTimestamps) {
const priceTimestamp = parseInt(t, 10);
if (blockTimestamp > priceTimestamp) {
return {
price: this.historicalPrice.prices[priceTimestamp],
exchangeRates: this.historicalPrice.exchangeRates,
};
}
}
return this.getEmptyPrice();
}
}