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

Merge branch 'master' into regtest-1

Browse Source
This commit is contained in:
Antoni Spaanderman
2022-03-08 19:45:03 +01:00
parent e2ef58c5dd 0cc82bbf1d
commit d179a563e4
42 changed files with 1109 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,6 +74,7 @@ import { HashrateChartComponent } from './components/hashrate-chart/hashrate-cha
import { HashrateChartPoolsComponent } from './components/hashrates-chart-pools/hashrate-chart-pools.component';
import { MiningStartComponent } from './components/mining-start/mining-start.component';
import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
@NgModule({
declarations: [
@@ -154,6 +155,7 @@ import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
SeoService,
StorageService,
LanguageService,
ShortenStringPipe,
{ provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
],
bootstrap: [AppComponent]

4
frontend/src/app/components/difficulty/difficulty.component.html
View File

@@ -1,4 +1,4 @@
<div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
<div *ngIf="showTitle" class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
<div class="card-wrapper">
<div class="card">
<div class="card-body more-padding">
@@ -47,7 +47,7 @@
</div>
</div>
<div class="item" *ngIf="showHalving">
<h5 class="card-title" i18n="difficulty-box.next-halving">Next halving</h5>
<h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
<div class="card-text">
<ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>

7
frontend/src/app/components/difficulty/difficulty.component.ts
View File

@@ -28,8 +28,9 @@ export class DifficultyComponent implements OnInit {
isLoadingWebSocket$: Observable<boolean>;
difficultyEpoch$: Observable<EpochProgress>;
@Input() showProgress: boolean = true;
@Input() showHalving: boolean = false;
@Input() showProgress = true;
@Input() showHalving = false;
@Input() showTitle = true;
constructor(
public stateService: StateService,
@@ -97,7 +98,7 @@ export class DifficultyComponent implements OnInit {
colorPreviousAdjustments = '#ffffff66';
}
const blocksUntilHalving = block.height % 210000;
const blocksUntilHalving = 210000 - (block.height % 210000);
const timeUntilHalving = (blocksUntilHalving * timeAvgMins * 60 * 1000) + (now * 1000);
return {

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

@@ -1,6 +1,6 @@
<div [class]="widget === false ? 'full-container' : ''">
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<div *ngIf="!tableOnly" class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">
@@ -25,34 +25,29 @@
</form>
</div>
<div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
<div *ngIf="!tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
<!-- <div class="mt-3" *ngIf="!widget">
<table class="table table-borderless table-sm text-center">
<thead>
<tr>
<th i18n="mining.rank">Block</th>
<th class="d-none d-md-block" i18n="block.timestamp">Timestamp</th>
<th i18n="mining.adjusted">Adjusted</th>
<th i18n="mining.difficulty">Difficulty</th>
<th i18n="mining.change">Change</th>
</tr>
</thead>
<tbody *ngIf="(hashrateObservable$ | async) as data">
<tr *ngFor="let diffChange of data.difficulty">
<td><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a></td>
<td class="d-none d-md-block">&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
<td><app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since></td>
<td class="d-none d-md-block">{{ formatNumber(diffChange.difficulty, locale, '1.2-2') }}</td>
<td class="d-block d-md-none">{{ diffChange.difficultyShorten }}</td>
<td [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
</tr>
</tbody>
</table>
</div> -->
<table *ngIf="tableOnly" class="table latest-transactions" style="min-height: 295px">
<thead>
<tr>
<th class="d-none d-md-block" i18n="block.height">Height</th>
<th i18n="mining.adjusted" class="text-left">Adjusted</th>
<th i18n="mining.difficulty" class="text-right">Difficulty</th>
<th i18n="mining.change" class="text-right">Change</th>
</tr>
</thead>
<tbody *ngIf="(hashrateObservable$ | async) as data">
<tr *ngFor="let diffChange of data.difficulty">
<td class="d-none d-md-block"><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a></td>
<td class="text-left"><app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since></td>
<td class="text-right">{{ diffChange.difficultyShorten }}</td>
<td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
</tr>
</tbody>
</table>
</div>

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

@@ -29,7 +29,7 @@
.chart-widget {
width: 100%;
height: 100%;
max-height: 275px;
max-height: 293px;
}
.formRadioGroup {
@@ -48,3 +48,44 @@
}
}
}
.latest-transactions {
width: 100%;
text-align: left;
table-layout:fixed;
tr, td, th {
border: 0px;
}
td {
width: 25%;
}
.table-cell-satoshis {
display: none;
text-align: right;
@media (min-width: 576px) {
display: table-cell;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 1100px) {
display: table-cell;
}
}
.table-cell-fiat {
display: none;
text-align: right;
@media (min-width: 485px) {
display: table-cell;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: table-cell;
}
}
.table-cell-fees {
text-align: right;
}
}

8
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View File

@@ -15,14 +15,15 @@ import { selectPowerOfTen } from 'src/app/bitcoin.utils';
styles: [`
.loadingGraphs {
position: absolute;
top: 38%;
top: 50%;
left: calc(50% - 15px);
z-index: 100;
}
`],
})
export class HashrateChartComponent implements OnInit {
@Input() widget: boolean = false;
@Input() tableOnly = false;
@Input() widget = false;
@Input() right: number | string = 45;
@Input() left: number | string = 75;
@@ -114,7 +115,7 @@ export class HashrateChartComponent implements OnInit {
}
return {
availableTimespanDay: availableTimespanDay,
difficulty: tableData
difficulty: this.tableOnly ? tableData.slice(0, 5) : tableData
};
}),
);
@@ -141,6 +142,7 @@ export class HashrateChartComponent implements OnInit {
bottom: this.widget ? 30 : 60,
},
tooltip: {
show: !this.isMobile() || !this.widget,
trigger: 'axis',
axisPointer: {
type: 'line'

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

@@ -25,9 +25,9 @@
</form>
</div>
<div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
<div [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>

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

@@ -29,7 +29,7 @@
.chart-widget {
width: 100%;
height: 100%;
max-height: 275px;
max-height: 293px;
}
.formRadioGroup {

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

@@ -78,7 +78,7 @@ export class HashrateChartPoolsComponent implements OnInit {
name: name,
showSymbol: false,
symbol: 'none',
data: grouped[name].map((val) => [val.timestamp * 1000, (val.share * 100).toFixed(2)]),
data: grouped[name].map((val) => [val.timestamp * 1000, val.share * 100]),
type: 'line',
lineStyle: { width: 0 },
areaStyle: { opacity: 1 },
@@ -132,6 +132,7 @@ export class HashrateChartPoolsComponent implements OnInit {
top: this.widget ? 10 : 40,
},
tooltip: {
show: !this.isMobile() || !this.widget,
trigger: 'axis',
axisPointer: {
type: 'line'
@@ -149,7 +150,7 @@ export class HashrateChartPoolsComponent implements OnInit {
data.sort((a, b) => b.data[1] - a.data[1]);
for (const pool of data) {
if (pool.data[1] > 0) {
tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]}%<br>`
tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1].toFixed(2)}%<br>`;
}
}
return tooltip;

124
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View File

@@ -2,36 +2,124 @@
<div class="row row-cols-1 row-cols-md-2">
<!-- Temporary stuff here - Will be moved to a component once we have more useful data to show -->
<div class="col">
<div class="card double">
<div class="card-body">
<!-- pool distribution -->
<h5 class="card-title">
<a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
Mining Pools Share (1w)
</a>
</h5>
<app-pool-ranking [widget]=true></app-pool-ranking>
<div class="main-title">Reward stats</div>
<div class="card" style="height: 123px">
<div class="card-body more-padding">
<div class="fee-estimation-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="item">
<h5 class="card-title" i18n="">Miners Reward</h5>
<div class="card-text">
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="">Reward Per Tx</h5>
<div class="card-text">
{{ rewardStats.rewardPerTx | amountShortener }}
<span class="symbol">sats/tx</span>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="">Average Fee</h5>
<div class="card-text">
{{ rewardStats.feePerTx | amountShortener}}
<span class="symbol">sats/tx</span>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #loadingReward>
<div class="fee-estimation-container">
<div class="item">
<h5 class="card-title" i18n="">Miners Reward</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="">Reward Per Tx</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="">Average Fee</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template>
<!-- pools hashrate -->
<!-- difficulty adjustment -->
<div class="col">
<div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
<div class="card" style="height: 123px">
<app-difficulty [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty>
</div>
</div>
<!-- pool distribution -->
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<app-pool-ranking [widget]=true></app-pool-ranking>
<div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>
<!-- hashrate -->
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
Hashrate (1y)
</h5>
<app-hashrate-chart [widget]=true></app-hashrate-chart>
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>
<!-- pool dominance -->
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
Mining Pools Dominance (1y)
</h5>
<app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
<div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View
more &raquo;</a></div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card" style="height: 385px">
<div class="card-body">
<!-- hashrate -->
<h5 class="card-title">
<a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate">
Hashrate (1y)
</a>
Adjustments
</h5>
<app-hashrate-chart [widget]=true></app-hashrate-chart>
<app-hashrate-chart [tableOnly]=true [widget]=true></app-hashrate-chart>
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

67
frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
View File

@@ -12,14 +12,11 @@
.card {
background-color: #1d1f31;
height: 340px;
}
.card.double {
height: 620px;
}
.card-title {
font-size: 1rem;
color: #4a68b9;
}
.card-title > a {
color: #4a68b9;
@@ -47,7 +44,7 @@
.fade-border {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%)
}
.main-title {
position: relative;
color: #ffffff91;
@@ -58,3 +55,63 @@
text-align: center;
padding-bottom: 3px;
}
.fee-estimation-container {
display: flex;
justify-content: space-between;
@media (min-width: 376px) {
flex-direction: row;
}
.item {
max-width: 150px;
margin: 0;
width: -webkit-fill-available;
@media (min-width: 376px) {
margin: 0 auto 0px;
}
&:first-child{
display: none;
@media (min-width: 485px) {
display: block;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: block;
}
}
&:last-child {
margin-bottom: 0;
}
.card-text span {
color: #ffffff66;
font-size: 12px;
top: 0px;
}
.fee-text{
border-bottom: 1px solid #ffffff1c;
width: fit-content;
margin: auto;
line-height: 1.45;
padding: 0px 2px;
}
.fiat {
display: block;
font-size: 14px !important;
}
}
}
.skeleton-loader {
width: 100%;
display: block;
&:first-child {
max-width: 90px;
margin: 15px auto 3px;
}
&:last-child {
margin: 10px auto 3px;
max-width: 55px;
}
}

32
frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
View File

@@ -1,5 +1,8 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service';
import { StateService } from 'src/app/services/state.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-mining-dashboard',
@@ -8,12 +11,35 @@ import { SeoService } from 'src/app/services/seo.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MiningDashboardComponent implements OnInit {
private blocks = [];
constructor(private seoService: SeoService) {
public $rewardStats: Observable<any>;
public totalReward = 0;
public rewardPerTx = '~';
public feePerTx = '~';
constructor(private seoService: SeoService,
public stateService: StateService,
@Inject(LOCALE_ID) private locale: string,
) {
this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`);
}
ngOnInit(): void {
}
this.$rewardStats = this.stateService.blocks$.pipe(
map(([block]) => {
this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, 8);
const totalTx = this.blocks.reduce((acc, block) => acc + block.tx_count, 0);
const totalFee = this.blocks.reduce((acc, block) => acc + block.extras?.totalFees ?? 0, 0);
const totalReward = this.blocks.reduce((acc, block) => acc + block.extras?.reward ?? 0, 0);
return {
'totalReward': totalReward,
'rewardPerTx': totalReward / totalTx,
'feePerTx': totalFee / totalTx,
}
})
);
}
}

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

@@ -1,8 +1,31 @@
<div [class]="widget === false ? 'container-xl' : ''">
<div *ngIf="widget">
<div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
<div class="item">
<h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
<p class="card-text">
{{ miningStats['minersLuck'] }}%
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
<p class="card-text">
{{ miningStats.blockCount }}
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
<p class="card-text">
{{ miningStats.pools.length }}
</p>
</div>
</div>
</div>
<div [class]="widget ? 'chart-widget' : 'chart'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
<div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
@@ -59,7 +82,7 @@
<td class="d-none d-md-block">{{ pool.rank }}</td>
<td class="text-right"><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td>
<td class=""><a [routerLink]="[('/mining/pool/' + pool.poolId) | relativeUrl]">{{ pool.name }}</a></td>
<td class="" *ngIf="this.poolsWindowPreference === '24h'">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
<td class="" *ngIf="this.poolsWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
<td class="">{{ pool['blockText'] }}</td>
<td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
</tr>
@@ -75,3 +98,27 @@
</table>
</div>
<ng-template #loadingReward>
<div class="pool-distribution">
<div class="item">
<h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</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">Blocks (1w)</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
</div>
</ng-template>

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

@@ -1,13 +1,16 @@
.chart {
max-height: 400px;
@media (max-width: 767.98px) {
max-height: 300px;
max-height: 270px;
}
}
.chart-widget {
width: 100%;
height: 100%;
max-height: 275px;
max-height: 270px;
@media (max-width: 767.98px) {
max-height: 200px;
}
}
.formRadioGroup {
@@ -44,3 +47,66 @@
.loadingGraphs.widget {
top: 25%;
}
.pool-distribution {
min-height: 56px;
display: block;
@media (min-width: 485px) {
display: flex;
flex-direction: row;
}
h5 {
margin-bottom: 10px;
}
.item {
width: 50%;
margin: 0px auto 10px;
display: inline-block;
@media (min-width: 485px) {
margin: 0px auto 10px;
}
@media (min-width: 785px) {
margin: 0px auto 0px;
}
&:last-child {
margin: 0px auto 0px;
}
&: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;
}

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

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, NgZone, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { EChartsOption, PieSeriesOption } from 'echarts';
@@ -41,6 +41,7 @@ export class PoolRankingComponent implements OnInit {
private miningService: MiningService,
private seoService: SeoService,
private router: Router,
private zone: NgZone,
) {
}
@@ -49,7 +50,7 @@ export class PoolRankingComponent implements OnInit {
this.poolsWindowPreference = '1w';
} else {
this.seoService.setTitle($localize`:@@mining.mining-pools:Mining Pools`);
this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w';
this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w';
}
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.poolsWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.poolsWindowPreference);
@@ -85,6 +86,7 @@ export class PoolRankingComponent implements OnInit {
}),
map(data => {
data.pools = data.pools.map((pool: SinglePoolStats) => this.formatPoolUI(pool));
data['minersLuck'] = (100 * (data.blockCount / 1008)).toFixed(2); // luck 1w
return data;
}),
tap(data => {
@@ -105,24 +107,40 @@ export class PoolRankingComponent implements OnInit {
}
generatePoolsChartSerieData(miningStats) {
const poolShareThreshold = this.isMobile() ? 1 : 0.5; // Do not draw pools which hashrate share is lower than that
const poolShareThreshold = this.isMobile() ? 2 : 1; // Do not draw pools which hashrate share is lower than that
const data: object[] = [];
let totalShareOther = 0;
let totalBlockOther = 0;
let totalEstimatedHashrateOther = 0;
let edgeDistance: any = '20%';
if (this.isMobile() && this.widget) {
edgeDistance = 0;
} else if (this.isMobile() && !this.widget || this.widget) {
edgeDistance = 35;
}
miningStats.pools.forEach((pool) => {
if (parseFloat(pool.share) < poolShareThreshold) {
totalShareOther += parseFloat(pool.share);
totalBlockOther += pool.blockCount;
totalEstimatedHashrateOther += pool.lastEstimatedHashrate;
return;
}
data.push({
itemStyle: {
color: poolsColor[pool.name.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()],
color: poolsColor[pool.name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()],
},
value: pool.share,
name: pool.name + (this.isMobile() ? `` : ` (${pool.share}%)`),
name: pool.name + ((this.isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
label: {
overflow: 'none',
color: '#b1b1b1',
overflow: 'break',
alignTo: 'edge',
edgeDistance: edgeDistance,
},
tooltip: {
show: !this.isMobile() || !this.widget,
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
@@ -144,6 +162,42 @@ export class PoolRankingComponent implements OnInit {
data: pool.poolId,
} as PieSeriesOption);
});
// 'Other'
data.push({
itemStyle: {
color: 'grey',
},
value: totalShareOther,
name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
label: {
overflow: 'none',
color: '#b1b1b1',
alignTo: 'edge',
edgeDistance: edgeDistance
},
tooltip: {
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
},
borderColor: '#000',
formatter: () => {
if (this.poolsWindowPreference === '24h') {
return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
totalEstimatedHashrateOther.toString() + ' PH/s' +
`<br>` + totalBlockOther.toString() + ` blocks`;
} else {
return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
totalBlockOther.toString() + ` blocks`;
}
}
},
data: 9999 as any,
} as PieSeriesOption);
return data;
}
@@ -154,9 +208,22 @@ export class PoolRankingComponent implements OnInit {
}
network = network.charAt(0).toUpperCase() + network.slice(1);
let radius: any[] = ['20%', '70%'];
if (this.isMobile() || this.widget) {
radius = ['20%', '60%'];
let radius: any[] = ['20%', '80%'];
let top: any = undefined; let bottom = undefined; let height = undefined;
if (this.isMobile() && this.widget) {
top = -30;
height = 270;
radius = ['10%', '50%'];
} else if (this.isMobile() && !this.widget) {
top = 0;
height = 300;
radius = ['10%', '50%'];
} else if (this.widget) {
radius = ['15%', '60%'];
top = -20;
height = 330;
} else {
top = 35;
}
this.chartOptions = {
@@ -180,14 +247,15 @@ export class PoolRankingComponent implements OnInit {
},
series: [
{
top: this.widget ? 0 : 35,
minShowLabelAngle: 3.6,
top: top,
bottom: bottom,
height: height,
name: 'Mining pool',
type: 'pie',
radius: radius,
data: this.generatePoolsChartSerieData(miningStats),
labelLine: {
length: this.isMobile() ? 10 : 15,
length2: this.isMobile() ? 0 : 15,
lineStyle: {
width: 2,
},
@@ -223,14 +291,19 @@ export class PoolRankingComponent implements OnInit {
this.chartInstance = ec;
this.chartInstance.on('click', (e) => {
this.router.navigate(['/mining/pool/', e.data.data]);
if (e.data.data === 9999) { // "Other"
return;
}
this.zone.run(() => {
this.router.navigate(['/mining/pool/', e.data.data]);
});
});
}
/**
* Default mining stats if something goes wrong
*/
getEmptyMiningStat() {
getEmptyMiningStat(): MiningStats {
return {
lastEstimatedHashrate: 'Error',
blockCount: 0,

2
frontend/src/app/components/search-form/search-form.component.html
View File

@@ -1,7 +1,7 @@
<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<div class="d-flex">
<div class="search-box-container mr-2">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="TXID, block height, hash or address">
<input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearchFn" [resultFormatter]="formatterFn" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="TXID, block height, hash or address">
</div>
<div>
<button [disabled]="isSearching" type="submit" class="btn btn-block btn-primary"><fa-icon [icon]="['fas', 'search']" [fixedWidth]="true" i18n-title="search-form.search-title" title="Search"></fa-icon></button>

21
frontend/src/app/components/search-form/search-form.component.scss
View File

@@ -1,8 +1,19 @@
:host ::ng-deep .dropdown-item {
white-space: nowrap;
overflow: hidden;
width: 375px;
text-overflow: ellipsis;
:host ::ng-deep {
.dropdown-item {
white-space: nowrap;
width: calc(100% - 34px);
}
.dropdown-menu {
width: calc(100% - 34px);
}
@media (min-width: 768px) {
.dropdown-item {
width: 410px;
}
.dropdown-menu {
width: 410px;
}
}
}
form {

5
frontend/src/app/components/search-form/search-form.component.ts
View File

@@ -8,6 +8,7 @@ import { debounceTime, distinctUntilChanged, switchMap, filter, catchError, map
import { ElectrsApiService } from 'src/app/services/electrs-api.service';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { ShortenStringPipe } from 'src/app/shared/pipes/shorten-string-pipe/shorten-string.pipe';
@Component({
selector: 'app-search-form',
@@ -22,6 +23,7 @@ export class SearchFormComponent implements OnInit {
typeaheadSearchFn: ((text: Observable<string>) => Observable<readonly any[]>);
searchForm: FormGroup;
isMobile = (window.innerWidth <= 767.98);
@Output() searchTriggered = new EventEmitter();
regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100})$/;
@@ -33,6 +35,8 @@ export class SearchFormComponent implements OnInit {
focus$ = new Subject<string>();
click$ = new Subject<string>();
formatterFn = (address: string) => this.shortenStringPipe.transform(address, this.isMobile ? 33 : 40);
constructor(
private formBuilder: FormBuilder,
private router: Router,
@@ -40,6 +44,7 @@ export class SearchFormComponent implements OnInit {
private stateService: StateService,
private electrsApiService: ElectrsApiService,
private relativeUrlPipe: RelativeUrlPipe,
private shortenStringPipe: ShortenStringPipe,
) { }
ngOnInit() {

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

@@ -3,13 +3,13 @@
<div class="title-block">
<div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
<span i18n="transaction.rbf.replacement|RBF replacement">This transaction has been replaced by:</span>
<a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]" [state]="{ data: rbfTransaction }">
<a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]" [state]="{ data: rbfTransaction.size ? rbfTransaction : null }">
<span class="d-inline d-lg-none">{{ rbfTransaction.txid | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ rbfTransaction.txid }}</span>
</a>
</div>
<ng-container>
<ng-container *ngIf="!rbfTransaction || rbfTransaction?.size">
<h1 i18n="shared.transaction">Transaction</h1>
<span class="tx-link float-left">

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

@@ -37,6 +37,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
transactionTime = -1;
subscription: Subscription;
fetchCpfpSubscription: Subscription;
txReplacedSubscription: Subscription;
blocksSubscription: Subscription;
rbfTransaction: undefined | Transaction;
cpfpInfo: CpfpInfo | null;
showCpfpDetails = false;
@@ -185,15 +187,12 @@ export class TransactionComponent implements OnInit, OnDestroy {
this.error = undefined;
this.waitingForTransaction = false;
this.setMempoolBlocksSubscription();
this.websocketService.startTrackTransaction(tx.txid);
if (!tx.status.confirmed) {
this.websocketService.startTrackTransaction(tx.txid);
if (tx.firstSeen) {
this.transactionTime = tx.firstSeen;
} else {
this.getTransactionTime();
}
if (!tx.status.confirmed && tx.firstSeen) {
this.transactionTime = tx.firstSeen;
} else {
this.getTransactionTime();
}
if (this.tx.status.confirmed) {
@@ -220,7 +219,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
}
);
this.stateService.blocks$.subscribe(([block, txConfirmed]) => {
this.blocksSubscription = this.stateService.blocks$.subscribe(([block, txConfirmed]) => {
this.latestBlock = block;
if (txConfirmed && this.tx) {
@@ -235,9 +234,13 @@ export class TransactionComponent implements OnInit, OnDestroy {
}
});
this.stateService.txReplaced$.subscribe(
(rbfTransaction) => (this.rbfTransaction = rbfTransaction)
);
this.txReplacedSubscription = this.stateService.txReplaced$.subscribe((rbfTransaction) => {
if (!this.tx) {
this.error = new Error();
this.waitingForTransaction = false;
}
this.rbfTransaction = rbfTransaction;
});
}
handleLoadElectrsTransactionError(error: any): Observable<any> {
@@ -305,6 +308,8 @@ export class TransactionComponent implements OnInit, OnDestroy {
ngOnDestroy() {
this.subscription.unsubscribe();
this.fetchCpfpSubscription.unsubscribe();
this.txReplacedSubscription.unsubscribe();
this.blocksSubscription.unsubscribe();
this.leaveTransaction();
}
}

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

@@ -73,16 +73,19 @@
</td>
<td class="text-right nowrap amount">
<ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
<div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset]">
<div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset] else assetVinNotFound">
<ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
</div>
<ng-template #assetVinNotFound>
{{ vin.prevout.value }} <a [routerLink]="['/assets/asset/' | relativeUrl, vin.prevout.asset]">{{ vin.prevout.asset | slice : 0 : 7 }}</a>
</ng-template>
</ng-template>
<ng-template #defaultOutput>
<app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
</ng-template>
</td>
</tr>
<tr *ngIf="displayDetails">
<tr *ngIf="(showDetails$ | async) === true">
<td colspan="3" class="details-container" >
<table class="table table-striped table-borderless details-table mb-3">
<tbody>
@@ -204,7 +207,7 @@
</ng-template>
</td>
</tr>
<tr *ngIf="displayDetails">
<tr *ngIf="(showDetails$ | async) === true">
<td colspan="3" class=" details-container" >
<table class="table table-striped table-borderless details-table mb-3">
<tbody>
@@ -240,7 +243,7 @@
</div>
<div>
<div class="float-left mt-2-5" *ngIf="!transactionPage && tx.fee">
<div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase">
{{ 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>
</div>

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

@@ -1,11 +1,11 @@
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Observable, forkJoin } from 'rxjs';
import { Observable, forkJoin, ReplaySubject, BehaviorSubject, merge, of, Subject, Subscription } from 'rxjs';
import { Outspend, Transaction } from '../../interfaces/electrs.interface';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { environment } from 'src/environments/environment';
import { AssetsService } from 'src/app/services/assets.service';
import { map } from 'rxjs/operators';
import { map, share, switchMap, tap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface';
@Component({
@@ -17,7 +17,6 @@ import { BlockExtended } from 'src/app/interfaces/node-api.interface';
export class TransactionsListComponent implements OnInit, OnChanges {
network = '';
nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
displayDetails = false;
@Input() transactions: Transaction[];
@Input() showConfirmations = false;
@@ -28,7 +27,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
@Output() loadMore = new EventEmitter();
latestBlock$: Observable<BlockExtended>;
outspends: Outspend[] = [];
outspendsSubscription: Subscription;
refreshOutspends$: ReplaySubject<object> = new ReplaySubject();
showDetails$ = new BehaviorSubject<boolean>(false);
outspends: Outspend[][] = [];
assetsMinimal: any;
constructor(
@@ -47,6 +49,34 @@ export class TransactionsListComponent implements OnInit, OnChanges {
this.assetsMinimal = assets;
});
}
this.outspendsSubscription = merge(
this.refreshOutspends$
.pipe(
switchMap((observableObject) => forkJoin(observableObject)),
map((outspends: any) => {
const newOutspends: Outspend[] = [];
for (const i in outspends) {
if (outspends.hasOwnProperty(i)) {
newOutspends.push(outspends[i]);
}
}
this.outspends = this.outspends.concat(newOutspends);
}),
),
this.stateService.utxoSpent$
.pipe(
map((utxoSpent) => {
for (const i in utxoSpent) {
this.outspends[0][i] = {
spent: true,
txid: utxoSpent[i].txid,
vin: utxoSpent[i].vin,
};
}
}),
)
).subscribe(() => this.ref.markForCheck());
}
ngOnChanges() {
@@ -70,18 +100,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
}
observableObject[i] = this.electrsApiService.getOutspends$(tx.txid);
});
forkJoin(observableObject)
.subscribe((outspends: any) => {
const newOutspends = [];
for (const i in outspends) {
if (outspends.hasOwnProperty(i)) {
newOutspends.push(outspends[i]);
}
}
this.outspends = this.outspends.concat(newOutspends);
this.ref.markForCheck();
});
this.refreshOutspends$.next(observableObject);
}
onScroll() {
@@ -129,7 +148,14 @@ export class TransactionsListComponent implements OnInit, OnChanges {
}
toggleDetails() {
this.displayDetails = !this.displayDetails;
this.ref.markForCheck();
if (this.showDetails$.value === true) {
this.showDetails$.next(false);
} else {
this.showDetails$.next(true);
}
}
ngOnDestroy() {
this.outspendsSubscription.unsubscribe();
}
}

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

@@ -64,7 +64,7 @@ export interface SinglePoolStats {
blockCount: number;
emptyBlocks: number;
rank: number;
share: string;
share: number;
lastEstimatedHashrate: string;
emptyBlockRatio: string;
logo: string;
@@ -75,13 +75,6 @@ export interface PoolsStats {
oldestIndexedBlockTimestamp: number;
pools: SinglePoolStats[];
}
export interface MiningStats {
lastEstimatedHashrate: string;
blockCount: number;
totalEmptyBlock: number;
totalEmptyBlockRatio: string;
pools: SinglePoolStats[];
}
/**
* Pool component

7
frontend/src/app/interfaces/websocket.interface.ts
View File

@@ -15,7 +15,9 @@ export interface WebsocketResponse {
action?: string;
data?: string[];
tx?: Transaction;
rbfTransaction?: Transaction;
rbfTransaction?: ReplacedTransaction;
txReplaced?: ReplacedTransaction;
utxoSpent?: object;
transactions?: TransactionStripped[];
loadingIndicators?: ILoadingIndicators;
backendInfo?: IBackendInfo;
@@ -26,6 +28,9 @@ export interface WebsocketResponse {
'track-bisq-market'?: string;
}
export interface ReplacedTransaction extends Transaction {
txid: string;
}
export interface MempoolBlock {
blink?: boolean;
height?: number;

2
frontend/src/app/services/mining.service.ts
View File

@@ -73,7 +73,7 @@ export class MiningService {
const totalEmptyBlockRatio = (totalEmptyBlock / stats.blockCount * 100).toFixed(2);
const poolsStats = stats.pools.map((poolStat) => {
return {
share: (poolStat.blockCount / stats.blockCount * 100).toFixed(2),
share: parseFloat((poolStat.blockCount / stats.blockCount * 100).toFixed(2)),
lastEstimatedHashrate: (poolStat.blockCount / stats.blockCount * stats.lastEstimatedHashrate / hashrateDivider).toFixed(2),
emptyBlockRatio: (poolStat.emptyBlocks / poolStat.blockCount * 100).toFixed(2),
logo: `./resources/mining-pools/` + poolStat.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg',

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

@@ -1,7 +1,7 @@
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable } from 'rxjs';
import { Transaction } from '../interfaces/electrs.interface';
import { IBackendInfo, MempoolBlock, MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
import { IBackendInfo, MempoolBlock, MempoolInfo, ReplacedTransaction, TransactionStripped } from '../interfaces/websocket.interface';
import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { Router, NavigationStart } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';
@@ -82,7 +82,8 @@ export class StateService {
bsqPrice$ = new ReplaySubject<number>(1);
mempoolInfo$ = new ReplaySubject<MempoolInfo>(1);
mempoolBlocks$ = new ReplaySubject<MempoolBlock[]>(1);
txReplaced$ = new Subject<Transaction>();
txReplaced$ = new Subject<ReplacedTransaction>();
utxoSpent$ = new Subject<object>();
mempoolTransactions$ = new Subject<Transaction>();
blockTransactions$ = new Subject<Transaction>();
isLoadingWebSocket$ = new ReplaySubject<boolean>(1);

8
frontend/src/app/services/websocket.service.ts
View File

@@ -239,6 +239,10 @@ export class WebsocketService {
this.stateService.txReplaced$.next(response.rbfTransaction);
}
if (response.txReplaced) {
this.stateService.txReplaced$.next(response.txReplaced);
}
if (response['mempool-blocks']) {
this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
}
@@ -251,6 +255,10 @@ export class WebsocketService {
this.stateService.bsqPrice$.next(response['bsq-price']);
}
if (response.utxoSpent) {
this.stateService.utxoSpent$.next(response.utxoSpent);
}
if (response.backendInfo) {
this.stateService.backendInfo$.next(response.backendInfo);

BIN
frontend/src/resources/profile/zeus.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 19 KiB