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

Merge branch 'master' into simon/remove-sponsor

Browse Source
This commit is contained in:
wiz
2022-08-13 20:16:17 +09:00
committed by GitHub
parent 1008ab6222 927a54e4d9
commit 8200d54c20
50 changed files with 7177 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/address/address-preview.component.html
View File

@@ -44,7 +44,7 @@
<div class="w-100 d-block d-md-none"></div>
<div class="col-md qrcode-col">
<div class="qr-wrapper">
<app-qrcode [data]="address.address" [size]="370"></app-qrcode>
<app-qrcode [data]="address.address" [size]="448"></app-qrcode>
</div>
</div>
</div>

17
frontend/src/app/components/address/address-preview.component.scss
View File

@@ -1,5 +1,5 @@
h1 {
font-size: 42px;
font-size: 52px;
margin: 0;
}
@@ -11,23 +11,26 @@ h1 {
}
.qrcode-col {
width: 420px;
min-width: 420px;
width: 468px;
min-width: 468px;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
padding: 0;
margin-left: 2px;
margin-right: 15px;
}
.table {
font-size: 24px;
font-size: 32px;
::ng-deep .symbol {
font-size: 18px;
font-size: 24px;
}
}
.address-link {
font-size: 20px;
font-size: 24px;
margin-bottom: 0.5em;
display: flex;
flex-direction: row;
@@ -35,7 +38,7 @@ h1 {
.truncated-address {
text-overflow: ellipsis;
overflow: hidden;
max-width: calc(505px - 4em);
max-width: calc(640px - 4em);
display: inline-block;
white-space: nowrap;
}

6
frontend/src/app/components/address/address-preview.component.ts
View File

@@ -44,7 +44,6 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
) { }
ngOnInit() {
this.openGraphService.setPreviewLoading();
this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.addressLoadingStatus$ = this.route.paramMap
@@ -56,6 +55,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
this.mainSubscription = this.route.paramMap
.pipe(
switchMap((params: ParamMap) => {
this.openGraphService.waitFor('address-data');
this.error = undefined;
this.isLoadingAddress = true;
this.loadedConfirmedTxCount = 0;
@@ -73,6 +73,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
this.isLoadingAddress = false;
this.error = err;
console.log(err);
this.openGraphService.fail('address-data');
return of(null);
})
);
@@ -90,7 +91,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
this.address = address;
this.updateChainStats();
this.isLoadingAddress = false;
this.openGraphService.setPreviewReady();
this.openGraphService.waitOver('address-data');
})
)
.subscribe(() => {},
@@ -98,6 +99,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
console.log(error);
this.error = error;
this.isLoadingAddress = false;
this.openGraphService.fail('address-data');
}
);
}

2
frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts
View File

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service';
import { Observable } from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
import { EnterpriseService } from 'src/app/services/enterprise.service';
@Component({
selector: 'app-bisq-master-page',
@@ -18,6 +19,7 @@ export class BisqMasterPageComponent implements OnInit {
constructor(
private stateService: StateService,
private languageService: LanguageService,
private enterpriseService: EnterpriseService,
) { }
ngOnInit() {

9
frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
View File

@@ -18,6 +18,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
@Input() orientation = 'left';
@Input() flip = true;
@Output() txClickEvent = new EventEmitter<TransactionStripped>();
@Output() readyEvent = new EventEmitter();
@ViewChild('blockCanvas')
canvas: ElementRef<HTMLCanvasElement>;
@@ -37,6 +38,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
selectedTx: TxView | void;
tooltipPosition: Position;
readyNextFrame = false;
constructor(
readonly ngZone: NgZone,
readonly elRef: ElementRef,
@@ -78,6 +81,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
setup(transactions: TransactionStripped[]): void {
if (this.scene) {
this.scene.setup(transactions);
this.readyNextFrame = true;
this.start();
}
}
@@ -258,6 +262,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize);
}
}
if (this.readyNextFrame) {
this.readyNextFrame = false;
this.readyEvent.emit();
}
}
/* LOOP */

64
frontend/src/app/components/block/block-preview.component.html
View File

@@ -30,44 +30,42 @@
<td i18n="block.weight">Weight</td>
<td [innerHTML]="'&lrm;' + (block?.weight | wuBytes: 2)"></td>
</tr>
<ng-template [ngIf]="webGlEnabled">
<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></td>
</tr>
<ng-template [ngIf]="fees !== undefined">
<tr>
<td i18n="block.total-fees|Total fees in a block">Total fees</td>
<td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
<app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
<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></td>
</tr>
<ng-template [ngIf]="fees !== undefined">
<tr>
<td i18n="block.total-fees|Total fees in a block">Total fees</td>
<td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
<app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
</td>
<ng-template #liquidTotalFees>
<td>
<app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
</td>
<ng-template #liquidTotalFees>
<td>
<app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
</td>
</ng-template>
</tr>
</ng-template>
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
<td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD">
<a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</a>
</td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
<span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</span>
</td>
</ng-template>
</tr>
</ng-template>
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
<td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD">
<a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</a>
</td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
<span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm chart-container" *ngIf="webGlEnabled">
<div class="col-sm chart-container">
<app-block-overview-graph
#blockGraph
[isLoading]="false"
@@ -75,7 +73,7 @@
[blockLimit]="stateService.blockVSize"
[orientation]="'top'"
[flip]="false"
(txClickEvent)="onTxClick($event)"
(readyEvent)="onGraphReady()"
></app-block-overview-graph>
</div>
</div>

16
frontend/src/app/components/block/block-preview.component.scss
View File

@@ -1,23 +1,25 @@
.block-title {
margin-bottom: 0.75em;
font-size: 42px;
margin-bottom: 48px;
font-size: 52px;
::ng-deep .next-previous-blocks {
font-size: 42px;
font-size: 52px;
}
}
.table {
font-size: 24px;
font-size: 32px;
}
.chart-container {
flex-grow: 0;
flex-shrink: 0;
width: 420px;
min-width: 420px;
width: 470px;
min-width: 470px;
padding: 0;
margin-right: 15px;
}
::ng-deep .symbol {
font-size: 18px;
font-size: 24px;
}

167
frontend/src/app/components/block/block-preview.component.ts
View File

@@ -1,11 +1,168 @@
import { Component } from '@angular/core';
import { BlockComponent } from './block.component';
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
import { of, Subscription, asyncScheduler } from 'rxjs';
import { StateService } from '../../services/state.service';
import { SeoService } from 'src/app/services/seo.service';
import { OpenGraphService } from 'src/app/services/opengraph.service';
import { BlockExtended, TransactionStripped } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service';
import { BlockOverviewGraphComponent } from 'src/app/components/block-overview-graph/block-overview-graph.component';
@Component({
selector: 'app-block-preview',
templateUrl: './block-preview.component.html',
styleUrls: ['./block.component.scss', './block-preview.component.scss']
styleUrls: ['./block-preview.component.scss']
})
export class BlockPreviewComponent extends BlockComponent {
export class BlockPreviewComponent implements OnInit, OnDestroy {
network = '';
block: BlockExtended;
blockHeight: number;
blockHash: string;
isLoadingBlock = true;
strippedTransactions: TransactionStripped[];
overviewTransitionDirection: string;
isLoadingOverview = true;
error: any;
blockSubsidy: number;
fees: number;
overviewError: any = null;
overviewSubscription: Subscription;
networkChangedSubscription: Subscription;
@ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
constructor(
private route: ActivatedRoute,
private electrsApiService: ElectrsApiService,
public stateService: StateService,
private seoService: SeoService,
private openGraphService: OpenGraphService,
private apiService: ApiService
) { }
ngOnInit() {
this.network = this.stateService.network;
const block$ = this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.openGraphService.waitFor('block-viz');
this.openGraphService.waitFor('block-data');
const blockHash: string = params.get('id') || '';
this.block = undefined;
this.error = undefined;
this.overviewError = undefined;
this.fees = undefined;
let isBlockHeight = false;
if (/^[0-9]+$/.test(blockHash)) {
isBlockHeight = true;
} else {
this.blockHash = blockHash;
}
this.isLoadingBlock = true;
this.isLoadingOverview = true;
if (isBlockHeight) {
return this.electrsApiService.getBlockHashFromHeight$(parseInt(blockHash, 10))
.pipe(
switchMap((hash) => {
if (hash) {
this.blockHash = hash;
return this.apiService.getBlock$(hash);
} else {
return null;
}
}),
catchError((err) => {
this.error = err;
this.openGraphService.fail('block-data');
this.openGraphService.fail('block-viz');
return of(null);
}),
);
}
return this.apiService.getBlock$(blockHash);
}),
filter((block: BlockExtended | void) => block != null),
tap((block: BlockExtended) => {
this.block = block;
this.blockHeight = block.height;
this.seoService.setTitle($localize`:@@block.component.browser-title:Block ${block.height}:BLOCK_HEIGHT:: ${block.id}:BLOCK_ID:`);
this.isLoadingBlock = false;
this.setBlockSubsidy();
if (block?.extras?.reward !== undefined) {
this.fees = block.extras.reward / 100000000 - this.blockSubsidy;
}
this.stateService.markBlock$.next({ blockHeight: this.blockHeight });
this.isLoadingOverview = true;
this.overviewError = null;
this.openGraphService.waitOver('block-data');
}),
throttleTime(50, asyncScheduler, { leading: true, trailing: true }),
shareReplay(1)
);
this.overviewSubscription = block$.pipe(
startWith(null),
pairwise(),
switchMap(([prevBlock, block]) => this.apiService.getStrippedBlockTransactions$(block.id)
.pipe(
catchError((err) => {
this.overviewError = err;
this.openGraphService.fail('block-viz');
return of([]);
}),
switchMap((transactions) => {
return of({ transactions, direction: 'down' });
})
)
),
)
.subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => {
this.strippedTransactions = transactions;
this.isLoadingOverview = false;
if (this.blockGraph) {
this.blockGraph.destroy();
this.blockGraph.setup(this.strippedTransactions);
}
},
(error) => {
this.error = error;
this.isLoadingOverview = false;
this.openGraphService.fail('block-viz');
this.openGraphService.fail('block-data');
if (this.blockGraph) {
this.blockGraph.destroy();
}
});
this.networkChangedSubscription = this.stateService.networkChanged$
.subscribe((network) => this.network = network);
}
ngOnDestroy() {
if (this.overviewSubscription) {
this.overviewSubscription.unsubscribe();
}
if (this.networkChangedSubscription) {
this.networkChangedSubscription.unsubscribe();
}
}
// TODO - Refactor this.fees/this.reward for liquid because it is not
// used anymore on Bitcoin networks (we use block.extras directly)
setBlockSubsidy() {
this.blockSubsidy = 0;
}
onGraphReady(): void {
this.openGraphService.waitOver('block-viz');
}
}

2
frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
View File

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service';
import { merge, Observable, of} from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
import { EnterpriseService } from 'src/app/services/enterprise.service';
@Component({
selector: 'app-liquid-master-page',
@@ -20,6 +21,7 @@ export class LiquidMasterPageComponent implements OnInit {
constructor(
private stateService: StateService,
private languageService: LanguageService,
private enterpriseService: EnterpriseService,
) { }
ngOnInit() {

25
frontend/src/app/components/master-page-preview/master-page-preview.component.html
View File

@@ -1,21 +1,20 @@
<ng-container *ngIf="{ val: network$ | async } as network">
<div class="preview-wrapper">
<router-outlet></router-outlet>
<footer>
<span class="footer-brand" style="position: relative;">
<img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
<header>
<span class="header-brand" style="position: relative;">
<img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="50" width="200" class="logo">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
</span>
<div [ngSwitch]="network.val">
<span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="signet mr-1" alt="logo"> Signet</span>
<span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1" alt="testnet logo"> Testnet</span>
<span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1" alt="bisq logo"> Bisq</span>
<span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 30px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
<span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
<span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
<span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 45px;" class="signet mr-1" alt="logo"> Signet</span>
<span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 45px;" class="mr-1" alt="testnet logo"> Testnet</span>
<span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 45px;" class="mr-1" alt="bisq logo"> Bisq</span>
<span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 45px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
<span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 45px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
<span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 45px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
</div>
</footer>
</header>
<router-outlet></router-outlet>
</div>
</ng-container>

18
frontend/src/app/components/master-page-preview/master-page-preview.component.scss
View File

@@ -2,28 +2,28 @@
position: relative;
display: block;
margin: auto;
max-width: 1024px;
max-height: 512px;
padding-bottom: 64px;
max-width: 1200px;
max-height: 600px;
padding-top: 80px;
footer {
header {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 100;
min-height: 64px;
padding: 0rem 2rem;
min-height: 80px;
padding: 0rem 3rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #11131f;
text-align: start;
font-size: 1.2em;
font-size: 1.8em;
}
.footer-brand {
.header-brand {
width: 60%;
}

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

@@ -12,6 +12,7 @@ import { StateService } from '../../services/state.service';
import { chartColors, poolsColor } from 'src/app/app.constants';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { download } from 'src/app/shared/graphs.utils';
import { isMobile } from 'src/app/shared/common.utils';
@Component({
selector: 'app-pool-ranking',
@@ -108,21 +109,23 @@ export class PoolRankingComponent implements OnInit {
return pool;
}
isMobile() {
return (window.innerWidth <= 767.98);
}
generatePoolsChartSerieData(miningStats) {
const poolShareThreshold = this.isMobile() ? 2 : 1; // Do not draw pools which hashrate share is lower than that
let poolShareThreshold = 0.5;
if (isMobile()) {
poolShareThreshold = 2;
} else if (this.widget) {
poolShareThreshold = 1;
}
const data: object[] = [];
let totalShareOther = 0;
let totalBlockOther = 0;
let totalEstimatedHashrateOther = 0;
let edgeDistance: any = '20%';
if (this.isMobile() && this.widget) {
if (isMobile() && this.widget) {
edgeDistance = 0;
} else if (this.isMobile() && !this.widget || this.widget) {
} else if (isMobile() && !this.widget || this.widget) {
edgeDistance = 10;
}
@@ -138,7 +141,7 @@ export class PoolRankingComponent implements OnInit {
color: poolsColor[pool.name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()],
},
value: pool.share,
name: pool.name + ((this.isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
label: {
overflow: 'none',
color: '#b1b1b1',
@@ -146,7 +149,7 @@ export class PoolRankingComponent implements OnInit {
edgeDistance: edgeDistance,
},
tooltip: {
show: !this.isMobile() || !this.widget,
show: !isMobile() || !this.widget,
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
@@ -176,7 +179,7 @@ export class PoolRankingComponent implements OnInit {
color: 'grey',
},
value: totalShareOther,
name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
label: {
overflow: 'none',
color: '#b1b1b1',
@@ -210,7 +213,7 @@ export class PoolRankingComponent implements OnInit {
prepareChartOptions(miningStats) {
let pieSize = ['20%', '80%']; // Desktop
if (this.isMobile() && !this.widget) {
if (isMobile() && !this.widget) {
pieSize = ['15%', '60%'];
}
@@ -226,7 +229,7 @@ export class PoolRankingComponent implements OnInit {
series: [
{
zlevel: 0,
minShowLabelAngle: 3.6,
minShowLabelAngle: 1.8,
name: 'Mining pool',
type: 'pie',
radius: pieSize,

6
frontend/src/app/docs/api-docs/api-docs.component.html
View File

@@ -46,12 +46,14 @@
</ng-container>
<ng-template #liquid_link_example>
<ng-container *ngIf="item.httpRequestMethod === 'GET' && network.val === 'liquid' && item.codeExample.hasOwnProperty('liquid');else default_link_example">
<a [href]="wrapUrl(network.val, item.codeExample.liquid)" target="_blank" rel="nofollow">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
<a [href]="wrapUrl(network.val, item.codeExample.liquid)" target="_blank" rel="nofollow" *ngIf="item.fragment !== 'get-cpfp'">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
<p *ngIf="item.fragment === 'get-cpfp'">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</p>
</ng-container>
</ng-template>
<ng-template #default_link_example>
<ng-container *ngIf="item.httpRequestMethod === 'GET'">
<a [href]="wrapUrl(network.val, item.codeExample.default)" target="_blank" rel="nofollow">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
<a [href]="wrapUrl(network.val, item.codeExample.default)" target="_blank" rel="nofollow" *ngIf="item.fragment !== 'get-cpfp'">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
<p *ngIf="item.fragment === 'get-cpfp'">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</p>
</ng-container>
</ng-template>
<div *ngIf="item.httpRequestMethod === 'POST'">{{ item.httpRequestMethod }} {{ item.urlString }}</div>

17
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
View File

@@ -37,25 +37,18 @@
<div class="card graph-card">
<div class="card-body pl-2 pr-2">
<app-nodes-per-isp-chart [widget]="true"></app-nodes-per-isp-chart>
<div class="mt-1"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
<div class="mt-2"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
</div>
</div>
</div>
<!-- <div class="col">
<div class="card">
<div class="card-body">
<app-nodes-networks-chart [widget]=true></app-nodes-networks-chart>
<div class="mt-1"><a [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
</div>
</div>
</div> -->
<div class="col">
<div class="card graph-card">
<div class="card-body pl-2 pr-2">
<div class="card-body pl-2 pr-2 pt-1">
<h5 class="card-title mt-3" i18n="lightning.network-history">Lightning network history</h5>
<app-lightning-statistics-chart [widget]=true></app-lightning-statistics-chart>
<div class="mt-1"><a [routerLink]="['/graphs/lightning/capacity' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
<app-nodes-networks-chart [widget]=true></app-nodes-networks-chart>
<div class="mt-1"><a [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
</div>
</div>
</div>

3
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
View File

@@ -51,8 +51,7 @@
}
.chart-widget {
width: 100%;
height: 100%;
max-height: 270px;
height: 145px;
}
.formRadioGroup {

111
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
View File

@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
import { EChartsOption} from 'echarts';
import { EChartsOption, graphic} from 'echarts';
import { Observable } from 'rxjs';
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
import { formatNumber } from '@angular/common';
@@ -9,6 +9,7 @@ import { MiningService } from 'src/app/services/mining.service';
import { download } from 'src/app/shared/graphs.utils';
import { SeoService } from 'src/app/services/seo.service';
import { LightningApiService } from '../lightning-api.service';
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
@Component({
selector: 'app-nodes-networks-chart',
@@ -26,7 +27,7 @@ import { LightningApiService } from '../lightning-api.service';
})
export class NodesNetworksChartComponent implements OnInit {
@Input() right: number | string = 45;
@Input() left: number | string = 55;
@Input() left: number | string = 45;
@Input() widget = false;
miningWindowPreference: string;
@@ -51,7 +52,8 @@ export class NodesNetworksChartComponent implements OnInit {
private lightningApiService: LightningApiService,
private formBuilder: FormBuilder,
private storageService: StorageService,
private miningService: MiningService
private miningService: MiningService,
private amountShortenerPipe: AmountShortenerPipe,
) {
}
@@ -82,11 +84,17 @@ export class NodesNetworksChartComponent implements OnInit {
.pipe(
tap((response) => {
const data = response.body;
this.prepareChartOptions({
const chartData = {
tor_nodes: data.map(val => [val.added * 1000, val.tor_nodes]),
clearnet_nodes: data.map(val => [val.added * 1000, val.clearnet_nodes]),
unannounced_nodes: data.map(val => [val.added * 1000, val.unannounced_nodes]),
});
};
let maxYAxis = 0;
for (const day of data) {
maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes);
}
maxYAxis = Math.ceil(maxYAxis / 3000) * 3000;
this.prepareChartOptions(chartData, maxYAxis);
this.isLoading = false;
}),
map((response) => {
@@ -100,7 +108,7 @@ export class NodesNetworksChartComponent implements OnInit {
);
}
prepareChartOptions(data) {
prepareChartOptions(data, maxYAxis) {
let title: object;
if (data.tor_nodes.length === 0) {
title = {
@@ -110,24 +118,30 @@ export class NodesNetworksChartComponent implements OnInit {
},
text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
left: 'center',
top: 'center'
top: 'top',
};
} else if (this.widget) {
title = {
textStyle: {
color: 'grey',
fontSize: 11
},
text: $localize`Nodes per network`,
left: 'center',
top: 11,
zlevel: 10,
};
}
this.chartOptions = {
title: title,
animation: false,
color: [
'#D81B60',
'#039BE5',
'#7CB342',
'#FFB300',
],
grid: {
top: 40,
bottom: this.widget ? 30 : 70,
right: this.right,
left: this.left,
height: this.widget ? 100 : undefined,
top: this.widget ? 10 : 40,
bottom: this.widget ? 0 : 70,
right: (this.isMobile() && this.widget) ? 35 : this.right,
left: (this.isMobile() && this.widget) ? 40 :this.left,
},
tooltip: {
show: !this.isMobile() || !this.widget,
@@ -171,7 +185,7 @@ export class NodesNetworksChartComponent implements OnInit {
hideOverlap: true,
}
},
legend: data.tor_nodes.length === 0 ? undefined : {
legend: this.widget || data.tor_nodes.length === 0 ? undefined : {
padding: 10,
data: [
{
@@ -207,7 +221,7 @@ export class NodesNetworksChartComponent implements OnInit {
icon: 'roundRect',
},
],
selected: JSON.parse(this.storageService.getValue('nodes_networks_legend')) ?? {
selected: this.widget ? undefined : JSON.parse(this.storageService.getValue('nodes_networks_legend')) ?? {
'Total': true,
'Tor': true,
'Clearnet': true,
@@ -218,13 +232,14 @@ export class NodesNetworksChartComponent implements OnInit {
{
type: 'value',
position: 'left',
min: (value) => {
return value.min * 0.9;
},
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
return `${formatNumber(Math.round(val * 100) / 100, this.locale, '1.0-0')}`;
formatter: (val: number): string => {
if (this.widget) {
return `${this.amountShortenerPipe.transform(val, 0)}`;
} else {
return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`;
}
}
},
splitLine: {
@@ -232,8 +247,35 @@ export class NodesNetworksChartComponent implements OnInit {
type: 'dotted',
color: '#ffffff66',
opacity: 0.25,
},
},
max: maxYAxis,
min: 0,
interval: 3000,
},
{
type: 'value',
position: 'right',
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val: number): string => {
if (this.widget) {
return `${this.amountShortenerPipe.transform(val, 0)}`;
} else {
return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`;
}
}
},
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
opacity: 0.25,
},
},
max: maxYAxis,
min: 0,
interval: 3000,
}
],
series: data.tor_nodes.length === 0 ? [] : [
@@ -252,7 +294,12 @@ export class NodesNetworksChartComponent implements OnInit {
opacity: 0.5,
},
stack: 'Total',
color: '#FDD835',
color: new graphic.LinearGradient(0, 0.75, 0, 1, [
{ offset: 0, color: '#D81B60' },
{ offset: 1, color: '#D81B60AA' },
]),
smooth: true,
},
{
zlevel: 1,
@@ -269,11 +316,15 @@ export class NodesNetworksChartComponent implements OnInit {
opacity: 0.5,
},
stack: 'Total',
color: '#00ACC1',
color: new graphic.LinearGradient(0, 0.75, 0, 1, [
{ offset: 0, color: '#FFB300' },
{ offset: 1, color: '#FFB300AA' },
]),
smooth: true,
},
{
zlevel: 1,
yAxisIndex: 0,
yAxisIndex: 1,
name: $localize`Tor`,
showSymbol: false,
symbol: 'none',
@@ -286,7 +337,11 @@ export class NodesNetworksChartComponent implements OnInit {
opacity: 0.5,
},
stack: 'Total',
color: '#7D4698',
color: new graphic.LinearGradient(0, 0.75, 0, 1, [
{ offset: 0, color: '#7D4698' },
{ offset: 1, color: '#7D4698AA' },
]),
smooth: true,
},
],
dataZoom: this.widget ? null : [{

12
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
View File

@@ -8,18 +8,18 @@
{{ stats.taggedISP }}
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tagged-capacity">Tagged capacity</h5>
<p class="card-text" i18n-ngbTooltip="mining.blocks-count-desc">
<app-amount [satoshis]="stats.taggedCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tagged-nodes">Tagged nodes</h5>
<p class="card-text" i18n-ngbTooltip="mining.pools-count-desc">
{{ stats.taggedNodeCount }}
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tagged-capacity">Tagged capacity</h5>
<p class="card-text" i18n-ngbTooltip="mining.blocks-count-desc">
<app-amount [satoshis]="stats.taggedCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
</div>
</div>

2
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
View File

@@ -51,7 +51,7 @@
}
.chart-widget {
width: 100%;
height: 320px;
height: 145px;
}
.formRadioGroup {

92
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
View File

@@ -9,6 +9,7 @@ import { StorageService } from 'src/app/services/storage.service';
import { MiningService } from 'src/app/services/mining.service';
import { download } from 'src/app/shared/graphs.utils';
import { LightningApiService } from '../lightning-api.service';
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
@Component({
selector: 'app-lightning-statistics-chart',
@@ -25,7 +26,7 @@ import { LightningApiService } from '../lightning-api.service';
})
export class LightningStatisticsChartComponent implements OnInit {
@Input() right: number | string = 45;
@Input() left: number | string = 55;
@Input() left: number | string = 45;
@Input() widget = false;
miningWindowPreference: string;
@@ -51,6 +52,7 @@ export class LightningStatisticsChartComponent implements OnInit {
private formBuilder: FormBuilder,
private storageService: StorageService,
private miningService: MiningService,
private amountShortenerPipe: AmountShortenerPipe,
) {
}
@@ -105,24 +107,39 @@ export class LightningStatisticsChartComponent implements OnInit {
color: 'grey',
fontSize: 15
},
text: `Indexing in progess`,
text: $localize`Indexing in progess`,
left: 'center',
top: 'center'
};
} else if (this.widget) {
title = {
textStyle: {
color: 'grey',
fontSize: 11
},
text: $localize`Channels & Capacity`,
left: 'center',
top: 11,
zlevel: 10,
};
}
this.chartOptions = {
title: title,
animation: false,
color: [
'#FDD835',
'#D81B60',
'#FFB300',
new graphic.LinearGradient(0, 0.75, 0, 1, [
{ offset: 0, color: '#D81B60' },
{ offset: 1, color: '#D81B60AA' },
]),
],
grid: {
top: 40,
bottom: this.widget ? 30 : 70,
right: this.right,
left: this.left,
height: this.widget ? 100 : undefined,
top: this.widget ? 10 : 40,
bottom: this.widget ? 0 : 70,
right: (this.isMobile() && this.widget) ? 35 : this.right,
left: (this.isMobile() && this.widget) ? 40 :this.left,
},
tooltip: {
show: !this.isMobile(),
@@ -166,7 +183,7 @@ export class LightningStatisticsChartComponent implements OnInit {
hideOverlap: true,
}
},
legend: data.channel_count.length === 0 ? undefined : {
legend: this.widget || data.channel_count.length === 0 ? undefined : {
padding: 10,
data: [
{
@@ -178,7 +195,7 @@ export class LightningStatisticsChartComponent implements OnInit {
icon: 'roundRect',
},
{
name: 'Capacity (BTC)',
name: 'Capacity',
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
@@ -188,17 +205,20 @@ export class LightningStatisticsChartComponent implements OnInit {
],
selected: JSON.parse(this.storageService.getValue('sizes_ln_legend')) ?? {
'Channels': true,
'Capacity (BTC)': true,
'Capacity': true,
}
},
yAxis: data.channel_count.length === 0 ? undefined : [
{
min: 0,
type: 'value',
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`;
formatter: (val: number): string => {
if (this.widget) {
return `${this.amountShortenerPipe.transform(val, 0)}`;
} else {
return `${formatNumber(Math.round(val), this.locale, '1.0-0')}`;
}
}
},
splitLine: {
@@ -208,6 +228,7 @@ export class LightningStatisticsChartComponent implements OnInit {
opacity: 0.25,
}
},
minInterval: this.widget ? 20000 : undefined,
},
{
min: 0,
@@ -215,8 +236,12 @@ export class LightningStatisticsChartComponent implements OnInit {
position: 'right',
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
return `${formatNumber(Math.round(val / 100000000), this.locale, '1.0-0')}`;
formatter: (val: number): string => {
if (this.widget) {
return `${this.amountShortenerPipe.transform(Math.round(val / 100000000), 0)}`;
} else {
return `${formatNumber(Math.round(val / 100000000), this.locale, '1.0-0')}`;
}
}
},
splitLine: {
@@ -244,20 +269,49 @@ export class LightningStatisticsChartComponent implements OnInit {
opacity: 1,
width: 1,
},
}
},
smooth: true,
},
{
zlevel: 0,
yAxisIndex: 1,
name: 'Capacity (BTC)',
name: $localize`Capacity`,
showSymbol: false,
symbol: 'none',
stack: 'Total',
data: data.capacity,
areaStyle: {},
areaStyle: {
opacity: 0.5,
},
type: 'line',
smooth: true,
}
],
dataZoom: this.widget ? null : [{
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,
}
},
}],
};
}

46
frontend/src/app/services/enterprise.service.ts
View File

@@ -24,16 +24,16 @@ export class EnterpriseService {
this.subdomain = subdomain;
this.fetchSubdomainInfo();
this.disableSubnetworks();
} else if (document.location.hostname === 'mempool.space') {
} else {
this.insertMatomo();
}
}
getSubdomain() {
getSubdomain(): string {
return this.subdomain;
}
disableSubnetworks() {
disableSubnetworks(): void {
this.stateService.env.TESTNET_ENABLED = false;
this.stateService.env.LIQUID_ENABLED = false;
this.stateService.env.LIQUID_TESTNET_ENABLED = false;
@@ -41,7 +41,7 @@ export class EnterpriseService {
this.stateService.env.BISQ_ENABLED = false;
}
fetchSubdomainInfo() {
fetchSubdomainInfo(): void {
this.apiService.getEnterpriseInfo$(this.subdomain).subscribe((info) => {
this.info = info;
this.insertMatomo(info.site_id);
@@ -54,14 +54,38 @@ export class EnterpriseService {
});
}
insertMatomo(siteId = 5) {
insertMatomo(siteId?: number): void {
let statsUrl = '//stats.mempool.space/';
if (this.document.location.hostname === 'liquid.network') {
statsUrl = '//stats.liquid.network/';
siteId = 8;
} else if (this.document.location.hostname === 'bisq.markets') {
statsUrl = '//stats.bisq.markets/';
siteId = 7;
if (!siteId) {
switch (this.document.location.hostname) {
case 'mempool.space':
statsUrl = '//stats.mempool.space/';
siteId = 5;
break;
case 'mempool.ninja':
statsUrl = '//stats.mempool.space/';
siteId = 4;
break;
case 'liquid.network':
siteId = 8;
statsUrl = '//stats.liquid.network/';
break;
case 'liquid.place':
siteId = 10;
statsUrl = '//stats.liquid.network/';
break;
case 'bisq.markets':
siteId = 7;
statsUrl = '//stats.bisq.markets/';
break;
case 'bisq.ninja':
statsUrl = '//stats.bisq.markets/';
siteId = 11;
break;
default:
return;
}
}
// @ts-ignore

66
frontend/src/app/services/opengraph.service.ts
View File

@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, NgZone } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map, switchMap } from 'rxjs/operators';
@@ -12,8 +12,11 @@ import { LanguageService } from './language.service';
export class OpenGraphService {
network = '';
defaultImageUrl = '';
previewLoadingEvents = {};
previewLoadingCount = 0;
constructor(
private ngZone: NgZone,
private metaService: Meta,
private stateService: StateService,
private LanguageService: LanguageService,
@@ -39,6 +42,11 @@ export class OpenGraphService {
this.clearOgImage();
}
});
// expose routing method to global scope, so we can access it from the unfurler
window['ogService'] = {
loadPage: (path) => { return this.loadPage(path) }
};
}
setOgImage() {
@@ -47,8 +55,8 @@ export class OpenGraphService {
this.metaService.updateTag({ property: 'og:image', content: ogImageUrl });
this.metaService.updateTag({ property: 'twitter:image:src', content: ogImageUrl });
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });
this.metaService.updateTag({ property: 'og:image:width', content: '1024' });
this.metaService.updateTag({ property: 'og:image:height', content: '512' });
this.metaService.updateTag({ property: 'og:image:width', content: '1200' });
this.metaService.updateTag({ property: 'og:image:height', content: '600' });
}
clearOgImage() {
@@ -59,13 +67,53 @@ export class OpenGraphService {
this.metaService.updateTag({ property: 'og:image:height', content: '500' });
}
/// signal that the unfurler should wait for a 'ready' signal before taking a screenshot
setPreviewLoading() {
this.metaService.updateTag({ property: 'og:loading', content: 'loading'});
/// register an event that needs to resolve before we can take a screenshot
waitFor(event) {
if (!this.previewLoadingEvents[event]) {
this.previewLoadingEvents[event] = 1;
this.previewLoadingCount++;
} else {
this.previewLoadingEvents[event]++;
}
this.metaService.updateTag({ property: 'og:preview:loading', content: 'loading'});
}
// signal to the unfurler that the page is ready for a screenshot
setPreviewReady() {
this.metaService.updateTag({ property: 'og:ready', content: 'ready'});
// mark an event as resolved
// if all registered events have resolved, signal we are ready for a screenshot
waitOver(event) {
if (this.previewLoadingEvents[event]) {
this.previewLoadingEvents[event]--;
if (this.previewLoadingEvents[event] === 0) {
delete this.previewLoadingEvents[event]
this.previewLoadingCount--;
}
}
if (this.previewLoadingCount === 0) {
this.metaService.updateTag({ property: 'og:preview:ready', content: 'ready'});
}
}
fail(event) {
if (this.previewLoadingEvents[event]) {
this.metaService.updateTag({ property: 'og:preview:fail', content: 'fail'});
}
}
resetLoading() {
this.previewLoadingEvents = {};
this.previewLoadingCount = 0;
this.metaService.removeTag("property='og:preview:loading'");
this.metaService.removeTag("property='og:preview:ready'");
this.metaService.removeTag("property='og:preview:fail'");
this.metaService.removeTag("property='og:meta:ready'");
}
loadPage(path) {
if (path !== this.router.url) {
this.resetLoading();
this.ngZone.run(() => {
this.router.navigateByUrl(path);
})
}
}
}

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

@@ -21,12 +21,14 @@ export class SeoService {
this.titleService.setTitle(newTitle + ' - ' + this.getTitle());
this.metaService.updateTag({ property: 'og:title', content: newTitle});
this.metaService.updateTag({ property: 'twitter:title', content: newTitle});
this.metaService.updateTag({ property: 'og:meta:ready', content: 'ready'});
}
resetTitle(): void {
this.titleService.setTitle(this.getTitle());
this.metaService.updateTag({ property: 'og:title', content: this.getTitle()});
this.metaService.updateTag({ property: 'twitter:title', content: this.getTitle()});
this.metaService.updateTag({ property: 'og:meta:ready', content: 'ready'});
}
setEnterpriseTitle(title: string) {

2
frontend/src/app/shared/pipes/amount-shortener.pipe.ts
View File

@@ -5,7 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core';
})
export class AmountShortenerPipe implements PipeTransform {
transform(num: number, ...args: any[]): unknown {
const digits = args[0] || 1;
const digits = args[0] ?? 1;
const unit = args[1] || undefined;
if (num < 1000) {