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

Merge remote-tracking branch 'origin/master' into mononaut/seo-ssr

Browse Source
This commit is contained in:
wiz
2023-08-05 18:23:12 +09:00
parent 105cccf9b0 c1c69d7272
commit cf4f779e59
476 changed files with 57113 additions and 27203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.html
View File

@@ -1,19 +1,43 @@
<div class="box">
<table class="table table-borderless table-striped">
<tbody>
<tr></tr>
<tr>
<td i18n="lightning.starting-balance|Channel starting balance">Starting balance</td>
<td *ngIf="showStartingBalance && minStartingBalance === maxStartingBalance"><app-sats [satoshis]="minStartingBalance"></app-sats></td>
<td *ngIf="showStartingBalance && minStartingBalance !== maxStartingBalance">{{ minStartingBalance | number : '1.0-0' }} - {{ maxStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></td>
<td *ngIf="!showStartingBalance">?</td>
</tr>
<tr *ngIf="channel.status === 2">
<td i18n="lightning.closing-balance|Channel closing balance">Closing balance</td>
<td *ngIf="showClosingBalance && minClosingBalance === maxClosingBalance"><app-sats [satoshis]="minClosingBalance"></app-sats></td>
<td *ngIf="showClosingBalance && minClosingBalance !== maxClosingBalance">{{ minClosingBalance | number : '1.0-0' }} - {{ maxClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></td>
<td *ngIf="!showClosingBalance">?</td>
</tr>
</tbody>
</table>
<div class="starting-balance" *ngIf="showStartingBalance">
<h5 i18n="lightning.starting-balance|Channel starting balance">Starting balance</h5>
<div class="nodes">
<h5 class="alias">{{ left.alias }}</h5>
<h5 class="alias">{{ right.alias }}</h5>
</div>
<div class="balances">
<div class="balance left">
<span class="value" *ngIf="minStartingBalance !== maxStartingBalance">{{ minStartingBalance | number : '1.0-0' }} - {{ maxStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
<span class="value" *ngIf="minStartingBalance === maxStartingBalance">{{ minStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
</div>
<div class="balance right">
<span class="value" *ngIf="minStartingBalance !== maxStartingBalance">{{ channel.capacity - maxStartingBalance | number : '1.0-0' }} - {{ channel.capacity - minStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
<span class="value" *ngIf="minStartingBalance === maxStartingBalance">{{ channel.capacity - maxStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
</div>
</div>
<div class="balance-bar">
<div class="bar left" [class.hide-value]="hideStartingLeft" [style]="startingBalanceStyle.left"></div>
<div class="bar center" [style]="startingBalanceStyle.center"></div>
<div class="bar right" [class.hide-value]="hideStartingRight" [style]="startingBalanceStyle.right"></div>
</div>
</div>
<br>
<div class="closing-balance" *ngIf="showClosingBalance">
<h5 i18n="lightning.closing-balance|Channel closing balance">Closing balance</h5>
<div class="balances">
<div class="balance left">
<span class="value" *ngIf="minClosingBalance !== maxClosingBalance">{{ minClosingBalance | number : '1.0-0' }} - {{ maxClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
<span class="value" *ngIf="minClosingBalance === maxClosingBalance">{{ minClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
</div>
<div class="balance right">
<span class="value" *ngIf="minClosingBalance !== maxClosingBalance">{{ channel.capacity - maxClosingBalance | number : '1.0-0' }} - {{ channel.capacity - minClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
<span class="value" *ngIf="minClosingBalance === maxClosingBalance">{{ channel.capacity - maxClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
</div>
</div>
<div class="balance-bar">
<div class="bar left" [class.hide-value]="hideClosingLeft" [style]="closingBalanceStyle.left"></div>
<div class="bar center" [style]="closingBalanceStyle.center"></div>
<div class="bar right" [class.hide-value]="hideClosingRight" [style]="closingBalanceStyle.right"></div>
</div>
</div>
</div>

94
frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
View File

@@ -6,4 +6,98 @@
.box {
margin-bottom: 20px;
}
}
.starting-balance, .closing-balance {
width: 100%;
h5 {
text-align: center;
}
}
.nodes {
display: none;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
@media (max-width: 768px) {
display: flex;
}
}
.balances {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
margin-bottom: 8px;
.balance {
&.left {
text-align: start;
}
&.right {
text-align: end;
}
}
}
.balance-bar {
width: 100%;
height: 2em;
position: relative;
.bar {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
&.left {
background: #105fb0;
}
&.center {
background: repeating-linear-gradient(
60deg,
#105fb0 0,
#105fb0 12px,
#1a9436 12px,
#1a9436 24px
);
}
&.right {
background: #1a9436;
}
.value {
flex: 0;
white-space: nowrap;
}
&.hide-value {
.value {
display: none;
}
}
}
@media (max-width: 768px) {
height: 1em;
.bar.center {
background: repeating-linear-gradient(
60deg,
#105fb0 0,
#105fb0 8px,
#1a9436 8px,
#1a9436 16px
)
}
}
}

70
frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.ts
View File

@@ -8,8 +8,8 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f
})
export class ChannelCloseBoxComponent implements OnChanges {
@Input() channel: any;
@Input() local: any;
@Input() remote: any;
@Input() left: any;
@Input() right: any;
showStartingBalance: boolean = false;
showClosingBalance: boolean = false;
@@ -18,29 +18,55 @@ export class ChannelCloseBoxComponent implements OnChanges {
minClosingBalance: number;
maxClosingBalance: number;
startingBalanceStyle: {
left: string,
center: string,
right: string,
} = {
left: '',
center: '',
right: '',
};
closingBalanceStyle: {
left: string,
center: string,
right: string,
} = {
left: '',
center: '',
right: '',
};
hideStartingLeft: boolean = false;
hideStartingRight: boolean = false;
hideClosingLeft: boolean = false;
hideClosingRight: boolean = false;
constructor() { }
ngOnChanges(changes: SimpleChanges): void {
if (this.channel && this.local && this.remote) {
this.showStartingBalance = (this.local.funding_balance || this.remote.funding_balance) && this.channel.funding_ratio;
this.showClosingBalance = this.local.closing_balance || this.remote.closing_balance;
let closingCapacity;
if (this.channel && this.left && this.right) {
this.showStartingBalance = (this.left.funding_balance || this.right.funding_balance) && this.channel.funding_ratio;
this.showClosingBalance = this.left.closing_balance || this.right.closing_balance;
if (this.channel.single_funded) {
if (this.local.funding_balance) {
if (this.left.funding_balance) {
this.minStartingBalance = this.channel.capacity;
this.maxStartingBalance = this.channel.capacity;
} else if (this.remote.funding_balance) {
} else if (this.right.funding_balance) {
this.minStartingBalance = 0;
this.maxStartingBalance = 0;
}
} else {
this.minStartingBalance = clampRound(0, this.channel.capacity, this.local.funding_balance * this.channel.funding_ratio);
this.maxStartingBalance = clampRound(0, this.channel.capacity, this.channel.capacity - (this.remote.funding_balance * this.channel.funding_ratio));
this.minStartingBalance = clampRound(0, this.channel.capacity, this.left.funding_balance * this.channel.funding_ratio);
this.maxStartingBalance = clampRound(0, this.channel.capacity, this.channel.capacity - (this.right.funding_balance * this.channel.funding_ratio));
}
const closingCapacity = this.channel.capacity - this.channel.closing_fee;
this.minClosingBalance = clampRound(0, closingCapacity, this.local.closing_balance);
this.maxClosingBalance = clampRound(0, closingCapacity, closingCapacity - this.remote.closing_balance);
closingCapacity = this.channel.capacity - this.channel.closing_fee;
this.minClosingBalance = clampRound(0, closingCapacity, this.left.closing_balance);
this.maxClosingBalance = clampRound(0, closingCapacity, closingCapacity - this.right.closing_balance);
// margin of error to account for 2 x 330 sat anchor outputs
if (Math.abs(this.minClosingBalance - this.maxClosingBalance) <= 660) {
@@ -50,6 +76,26 @@ export class ChannelCloseBoxComponent implements OnChanges {
this.showStartingBalance = false;
this.showClosingBalance = false;
}
const startingMinPc = (this.minStartingBalance / this.channel.capacity) * 100;
const startingMaxPc = (this.maxStartingBalance / this.channel.capacity) * 100;
this.startingBalanceStyle = {
left: `left: 0%; right: ${100 - startingMinPc}%;`,
center: `left: ${startingMinPc}%; right: ${100 -startingMaxPc}%;`,
right: `left: ${startingMaxPc}%; right: 0%;`,
};
this.hideStartingLeft = startingMinPc < 15;
this.hideStartingRight = startingMaxPc > 85;
const closingMinPc = (this.minClosingBalance / closingCapacity) * 100;
const closingMaxPc = (this.maxClosingBalance / closingCapacity) * 100;
this.closingBalanceStyle = {
left: `left: 0%; right: ${100 - closingMinPc}%;`,
center: `left: ${closingMinPc}%; right: ${100 - closingMaxPc}%;`,
right: `left: ${closingMaxPc}%; right: 0%;`,
};
this.hideClosingLeft = closingMinPc < 15;
this.hideClosingRight = closingMaxPc > 85;
}
}

2
frontend/src/app/lightning/channel/channel-preview.component.html
View File

@@ -15,7 +15,7 @@
</div>
</div>
<div class="row">
<div class="col-md">
<div class="col-md table-col">
<a class="subtitle" [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
<table class="table table-borderless table-striped">
<tbody>

5
frontend/src/app/lightning/channel/channel-preview.component.scss
View File

@@ -1,3 +1,8 @@
.table-col {
max-width: calc(100% - 470px);
overflow: hidden;
}
.table {
font-size: 32px;
margin-top: 10px;

4
frontend/src/app/lightning/channel/channel.component.html
View File

@@ -75,14 +75,14 @@
<div class="row row-cols-1 row-cols-md-2" *ngIf="!error">
<div class="col">
<app-channel-box [channel]="channel.node_left"></app-channel-box>
<app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_left" [remote]="channel.node_right"></app-channel-close-box>
</div>
<div class="col">
<app-channel-box [channel]="channel.node_right"></app-channel-box>
<app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_right" [remote]="channel.node_left"></app-channel-close-box>
</div>
</div>
<app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [left]="channel.node_left" [right]="channel.node_right"></app-channel-close-box>
<br>
<ng-container *ngIf="transactions$ | async as transactions">

38
frontend/src/app/lightning/channels-list/channels-list.component.html
View File

@@ -36,25 +36,25 @@
<ng-template #tableHeader>
<thead>
<th class="alias text-left" i18n="lightning.alias">Alias</th>
<th class="alias text-left d-none d-md-table-cell">&nbsp;</th>
<th class="alias text-left d-none d-md-table-cell" i18n="status">Status</th>
<th *ngIf="status !== 'closed'" class="channels text-left d-none d-md-table-cell" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
<th *ngIf="status === 'closed'" class="channels text-left d-none d-md-table-cell" i18n="channels.closing_date">Closing date</th>
<th class="capacity text-right d-none d-md-table-cell" i18n="lightning.capacity">Capacity</th>
<th class="capacity text-right" i18n="channels.id">Channel ID</th>
<th class="nodedetails text-left">&nbsp;</th>
<th class="status text-left" i18n="status">Status</th>
<th class="feerate text-left" *ngIf="status !== 'closed'" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
<th class="feerate text-left" *ngIf="status === 'closed'" i18n="channels.closing_date">Closing date</th>
<th class="liquidity text-right" i18n="lightning.capacity">Capacity</th>
<th class="channelid text-right" i18n="channels.id">Channel ID</th>
</thead>
</ng-template>
<ng-template #tableTemplate let-channel let-node="node">
<td class="alias text-left">
<div>{{ node.alias || '?' }}</div>
<app-truncate [text]="node.alias || '?'" [maxWidth]="200" [lastChars]="6"></app-truncate>
<div class="second-line">
<app-truncate [text]="node.public_key" [maxWidth]="200" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, node.public_key]">
<app-clipboard [text]="node.public_key" size="small"></app-clipboard>
</app-truncate>
</div>
</td>
<td class="alias text-left d-none d-md-table-cell">
<td class="nodedetails text-left">
<div class="second-line"><ng-container *ngTemplateOutlet="xChannels; context: {$implicit: node.channels }"></ng-container></div>
<div class="second-line">
<app-amount *ngIf="node.capacity > 100000000; else smallnode" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
@@ -64,7 +64,7 @@
</ng-template>
</div>
</td>
<td class="d-none d-md-table-cell">
<td class="status">
<span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
<span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
<ng-template [ngIf]="channel.status === 2">
@@ -74,20 +74,20 @@
</ng-template>
</ng-template>
</td>
<td *ngIf="status !== 'closed'" class="capacity text-left d-none d-md-table-cell">
<td *ngIf="status !== 'closed'" class="feerate text-left">
{{ channel.fee_rate }} <span class="symbol">ppm ({{ channel.fee_rate / 10000 | number }}%)</span>
</td>
<td *ngIf="status === 'closed'" class="capacity text-left d-none d-md-table-cell">
<td *ngIf="status === 'closed'" class="feerate text-left">
<app-timestamp [unixTime]="channel.closing_date"></app-timestamp>
</td>
<td class="capacity text-right d-none d-md-table-cell">
<td class="liquidity text-right">
<app-amount *ngIf="channel.capacity > 100000000; else smallchannel" [satoshis]="channel.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
<ng-template #smallchannel>
{{ channel.capacity | amountShortener: 1 }}
<span class="sats" i18n="shared.sats">sats</span>
</ng-template>
</td>
<td class="capacity text-right">
</td>
<td class="channelid text-right">
<a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.short_id }}</a>
</td>
</ng-template>
@@ -100,19 +100,19 @@
<td class="alias text-left" style="width: 370px;">
<span class="skeleton-loader"></span>
</td>
<td class="alias text-left">
<td class="nodedetails text-left">
<span class="skeleton-loader"></span>
</td>
<td class="capacity text-left d-none d-md-table-cell">
<td class="status text-left">
<span class="skeleton-loader"></span>
</td>
<td class="channels text-left d-none d-md-table-cell">
<td class="feerate text-left">
<span class="skeleton-loader"></span>
</td>
<td class="channels text-right d-none d-md-table-cell">
<td class="liquidity text-right">
<span class="skeleton-loader"></span>
</td>
<td class="channels text-left">
<td class="channelid text-left">
<span class="skeleton-loader"></span>
</td>
</tr>

32
frontend/src/app/lightning/channels-list/channels-list.component.scss
View File

@@ -31,4 +31,36 @@
@media (max-width: 435px) {
flex-grow: 1;
}
}
.alias {
padding-left: 0;
}
.feerate {
@media (max-width: 815px) {
display: none;
}
}
.status {
@media (max-width: 710px) {
display: none;
}
}
.nodedetails {
@media (max-width: 600px) {
display: none;
}
}
.liquidity {
@media (max-width: 500px) {
display: none;
}
}
.channelid {
padding-right: 0;
}

5
frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
View File

@@ -2,7 +2,10 @@
color: #4a68b9;
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-text {

83
frontend/src/app/lightning/justice-list/justice-list.component.html Normal file
View File

@@ -0,0 +1,83 @@
<div class="container-xl full-height" style="min-height: 335px">
<h1 class="float-left" i18n="lightning.liquidity-ranking">Penalties</h1>
<div class="clearfix"></div>
<div style="min-height: 295px">
<table class="table table-borderless">
<thead>
<th class="timestamp" i18n="lightning.closed-at">Closed</th>
<th class="channels text-right" i18n="lightning.capacity">Capacity</th>
<th class="node text-right"></th>
<th class="node text-right" i18n="lightning.node">Nodes</th>
<th class="channelid text-right" i18n="channels.id">Channel ID</th>
<th></th>
</thead>
<tbody *ngIf="justiceChannels$ | async as channels">
<ng-container *ngFor="let channel of channels;">
<tr>
<td class="timestamp">
&lrm;{{ channel.closing_date | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="capacity text-right">
<app-amount *ngIf="channel.capacity > 100000000; else smallnode" [satoshis]="channel.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
<ng-template #smallnode>
{{ channel.capacity | amountShortener: 1 }}
<span class="sats" i18n="shared.sats">sats</span>
</ng-template>
</td>
<td class="alias text-right">
<app-truncate [text]="channel.alias_left || '?'" [maxWidth]="200" [lastChars]="6" textAlign="end" [inline]="true"></app-truncate>
</td>
<td class="alias text-right">
<app-truncate [text]="channel.alias_right || '?'" [maxWidth]="200" [lastChars]="6" textAlign="end" [inline]="true"></app-truncate>
</td>
<td class="channelid text-right">
<a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.short_id }}</a>
</td>
<td class="text-right">
<button type="button" class="btn btn-outline-info details-button btn-sm" (click)="toggleDetails(channel)"
i18n="transaction.details|Transaction Details">Details</button>
</td>
</tr>
<tr *ngIf="channel.short_id === expanded">
<ng-container *ngTemplateOutlet="channelTransactions"></ng-container>
</tr>
</ng-container>
</tbody>
</table>
<div class="clearfix"></div>
<br>
</div>
</div>
<ng-template #channelTransactions>
<td colspan="6" *ngIf="transactions && !loadingTransactions else loadingTemplate;">
<ng-template [ngIf]="transactions[0]">
<div class="d-flex">
<h5 i18n="lightning.opening-transaction">Opening transaction</h5>
</div>
<app-transactions-list #txList1 [transactions]="[transactions[0]]" [showConfirmations]="true" [rowLimit]="5">
</app-transactions-list>
</ng-template>
<ng-template [ngIf]="transactions[1]">
<div class="closing-header d-flex">
<h5 style="margin: 0;" i18n="lightning.closing-transaction">Closing transaction</h5>&nbsp;&nbsp;<app-closing-type [type]="3"></app-closing-type>
</div>
<app-transactions-list #txList2 [transactions]="[transactions[1]]" [showConfirmations]="true" [rowLimit]="5">
</app-transactions-list>
</ng-template>
</td>
</ng-template>
<ng-template #loadingTemplate>
<td colspan="6">
<div class="text-center">
<div class="spinner-border text-light"></div>
</div>
</td>
</ng-template>

52
frontend/src/app/lightning/justice-list/justice-list.component.scss Normal file
View File

@@ -0,0 +1,52 @@
.container-xl {
max-width: 1400px;
}
.container-xl.widget {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
}
tr, td, th {
border: 0px;
padding-top: 0.65rem !important;
padding-bottom: 0.7rem !important;
}
.clear-link {
color: white;
}
.pool {
width: 15%;
@media (max-width: 575px) {
width: 75%;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.pool-name {
display: inline-block;
vertical-align: text-top;
text-overflow: ellipsis;
overflow: hidden;
}
.liquidity {
width: 10%;
@media (max-width: 575px) {
width: 25%;
}
}
.fiat {
width: 15%;
@media (min-width: 768px) and (max-width: 991px) {
display: none !important;
}
@media (max-width: 575px) {
display: none !important;
}
}

60
frontend/src/app/lightning/justice-list/justice-list.component.ts Normal file
View File

@@ -0,0 +1,60 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { map, Observable, of, Subject, Subscription, switchMap, tap, zip } from 'rxjs';
import { IChannel } from '../../interfaces/node-api.interface';
import { LightningApiService } from '../lightning-api.service';
import { Transaction } from '../../interfaces/electrs.interface';
import { ElectrsApiService } from '../../services/electrs-api.service';
@Component({
selector: 'app-justice-list',
templateUrl: './justice-list.component.html',
styleUrls: ['./justice-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class JusticeList implements OnInit, OnDestroy {
justiceChannels$: Observable<any[]>;
fetchTransactions$: Subject<IChannel> = new Subject();
transactionsSubscription: Subscription;
transactions: Transaction[];
expanded: string = null;
loadingTransactions: boolean = true;
constructor(
private apiService: LightningApiService,
private electrsApiService: ElectrsApiService,
private cd: ChangeDetectorRef,
) {}
ngOnInit(): void {
this.justiceChannels$ = this.apiService.getPenaltyClosedChannels$();
this.transactionsSubscription = this.fetchTransactions$.pipe(
tap(() => {
this.loadingTransactions = true;
}),
switchMap((channel: IChannel) => {
return zip([
channel.transaction_id ? this.electrsApiService.getTransaction$(channel.transaction_id) : of(null),
channel.closing_transaction_id ? this.electrsApiService.getTransaction$(channel.closing_transaction_id) : of(null),
]);
}),
).subscribe((transactions) => {
this.transactions = transactions;
this.loadingTransactions = false;
this.cd.markForCheck();
});
}
toggleDetails(channel: any): void {
if (this.expanded === channel.short_id) {
this.expanded = null;
} else {
this.expanded = channel.short_id;
this.fetchTransactions$.next(channel);
}
}
ngOnDestroy(): void {
this.transactionsSubscription.unsubscribe();
}
}

8
frontend/src/app/lightning/lightning-api.service.ts
View File

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { StateService } from '../services/state.service';
import { INodesRanking, IOldestNodes, ITopNodesPerCapacity, ITopNodesPerChannels } from '../interfaces/node-api.interface';
import { IChannel, INodesRanking, IOldestNodes, ITopNodesPerCapacity, ITopNodesPerChannels } from '../interfaces/node-api.interface';
@Injectable({
providedIn: 'root'
@@ -84,6 +84,12 @@ export class LightningApiService {
);
}
getPenaltyClosedChannels$(): Observable<IChannel[]> {
return this.httpClient.get<IChannel[]>(
this.apiBasePath + '/api/v1/lightning/penalties'
);
}
getOldestNodes$(): Observable<IOldestNodes[]> {
return this.httpClient.get<IOldestNodes[]>(
this.apiBasePath + '/api/v1/lightning/nodes/rankings/age'

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

@@ -61,7 +61,7 @@
<a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]">
<h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
<span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
</a>
<app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
</div>
@@ -75,7 +75,7 @@
<a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
<h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
<span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
</a>
<app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
</div>
@@ -84,24 +84,4 @@
</div>
<div class="pref-selectors">
<div class="selector">
<app-language-selector></app-language-selector>
</div>
<div class="selector">
<app-fiat-selector></app-fiat-selector>
</div>
</div>
<div class="terms-of-service">
<a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
|
<a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
|
<a *ngIf="officialMempoolSpace" [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]">Connect to our nodes</a>
<a *ngIf="!officialMempoolSpace" [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a>
</div>
<br>
</div>

20
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
View File

@@ -1,5 +1,4 @@
.dashboard-container {
padding-bottom: 60px;
text-align: center;
margin-top: 0.5rem;
@media (min-width: 992px) {
@@ -104,22 +103,3 @@
text-decoration: none;
color: inherit;
}
.terms-of-service {
margin-top: 1rem;
}
.pref-selectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
.selector {
margin-left: .5em;
margin-bottom: .5em;
&:first {
margin-left: 0;
}
}
}

7
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { share } from 'rxjs/operators';
import { INodesRanking } from '../../interfaces/node-api.interface';
@@ -12,7 +12,7 @@ import { LightningApiService } from '../lightning-api.service';
styleUrls: ['./lightning-dashboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LightningDashboardComponent implements OnInit {
export class LightningDashboardComponent implements OnInit, AfterViewInit {
statistics$: Observable<any>;
nodesRanking$: Observable<INodesRanking>;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
@@ -30,4 +30,7 @@ export class LightningDashboardComponent implements OnInit {
this.statistics$ = this.lightningApiService.getLatestStatistics$().pipe(share());
}
ngAfterViewInit(): void {
this.stateService.focusSearchInputDesktop();
}
}

6
frontend/src/app/lightning/lightning.module.ts
View File

@@ -29,10 +29,12 @@ import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels
import { NodesRanking } from '../lightning/nodes-ranking/nodes-ranking.component';
import { TopNodesPerChannels } from '../lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component';
import { TopNodesPerCapacity } from '../lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component';
import { JusticeList } from '../lightning/justice-list/justice-list.component';
import { OldestNodes } from '../lightning/nodes-ranking/oldest-nodes/oldest-nodes.component';
import { NodesRankingsDashboard } from '../lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component';
import { NodeChannels } from '../lightning/nodes-channels/node-channels.component';
import { GroupComponent } from './group/group.component';
import { NodeOwnerComponent } from './node-owner/node-owner.component';
@NgModule({
declarations: [
@@ -60,10 +62,12 @@ import { GroupComponent } from './group/group.component';
NodesRanking,
TopNodesPerChannels,
TopNodesPerCapacity,
JusticeList,
OldestNodes,
NodesRankingsDashboard,
NodeChannels,
GroupComponent,
NodeOwnerComponent,
],
imports: [
CommonModule,
@@ -97,9 +101,11 @@ import { GroupComponent } from './group/group.component';
NodesRanking,
TopNodesPerChannels,
TopNodesPerCapacity,
JusticeList,
OldestNodes,
NodesRankingsDashboard,
NodeChannels,
NodeOwnerComponent,
],
providers: [
LightningApiService,

5
frontend/src/app/lightning/lightning.routing.module.ts
View File

@@ -9,6 +9,7 @@ import { NodesPerISP } from './nodes-per-isp/nodes-per-isp.component';
import { NodesRanking } from './nodes-ranking/nodes-ranking.component';
import { NodesRankingsDashboard } from './nodes-rankings-dashboard/nodes-rankings-dashboard.component';
import { GroupComponent } from './group/group.component';
import { JusticeList } from './justice-list/justice-list.component';
const routes: Routes = [
{
@@ -66,6 +67,10 @@ const routes: Routes = [
type: 'oldest'
},
},
{
path: 'penalties',
component: JusticeList,
},
{
path: '**',
redirectTo: ''

2
frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html
View File

@@ -2,6 +2,6 @@
<h2 i18n="lightning.node-fee-distribution">Fee distribution</h2>
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>d
<div class="spinner-border text-light"></div>
</div>
</div>

35
frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
View File

@@ -101,8 +101,15 @@ export class NodeFeeChartComponent implements OnInit {
}
prepareChartOptions(outgoingData, incomingData): void {
let sum = outgoingData.reduce((accumulator, object) => {
return accumulator + object.count;
}, 0);
sum += incomingData.reduce((accumulator, object) => {
return accumulator + object.count;
}, 0);
let title: object;
if (outgoingData.length === 0) {
if (sum === 0) {
title = {
textStyle: {
color: 'grey',
@@ -115,7 +122,7 @@ export class NodeFeeChartComponent implements OnInit {
}
this.chartOptions = {
title: outgoingData.length === 0 ? title : undefined,
title: sum === 0 ? title : undefined,
animation: false,
grid: {
top: 30,
@@ -151,7 +158,7 @@ export class NodeFeeChartComponent implements OnInit {
`;
}
},
xAxis: outgoingData.length === 0 ? undefined : {
xAxis: sum === 0 ? undefined : {
type: 'category',
axisLine: { onZero: true },
axisLabel: {
@@ -163,7 +170,7 @@ export class NodeFeeChartComponent implements OnInit {
},
data: outgoingData.map(bucket => bucket.label)
},
legend: outgoingData.length === 0 ? undefined : {
legend: sum === 0 ? undefined : {
padding: 10,
data: [
{
@@ -184,7 +191,7 @@ export class NodeFeeChartComponent implements OnInit {
},
],
},
yAxis: outgoingData.length === 0 ? undefined : [
yAxis: sum === 0 ? undefined : [
{
type: 'value',
axisLabel: {
@@ -202,7 +209,7 @@ export class NodeFeeChartComponent implements OnInit {
},
},
],
series: outgoingData.length === 0 ? undefined : [
series: sum === 0 ? undefined : [
{
zlevel: 0,
name: $localize`Outgoing Fees`,
@@ -246,20 +253,4 @@ export class NodeFeeChartComponent implements OnInit {
isMobile() {
return (window.innerWidth <= 767.98);
}
onSaveChart() {
// @ts-ignore
const prevBottom = this.chartOptions.grid.bottom;
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartOptions.backgroundColor = '#11131f';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
}), `node-fee-chart.svg`);
// @ts-ignore
this.chartOptions.grid.bottom = prevBottom;
this.chartOptions.backgroundColor = 'none';
this.chartInstance.setOption(this.chartOptions);
}
}

17
frontend/src/app/lightning/node-owner/node-owner.component.html Normal file
View File

@@ -0,0 +1,17 @@
<div *ngIf="stateService.env.OFFICIAL_MEMPOOL_SPACE === true">
<div *ngIf="{ value: (nodeOwner$ | async) } as nodeOwner">
<div *ngIf="nodeOwner.value && nodeOwner.value.sns_id">
<a target="_blank" [href]="'https://twitter.com/' + nodeOwner.value.username">
<img class="profile-photo" [src]="'data:' + nodeOwner.value.image_mime + ';base64,' + nodeOwner.value.image">
</a>
</div>
<div *ngIf="nodeOwner.value === false">
<a [href]="'/login/lnnode?type=signup&pubkey=' + publicKey + '&alias=' + alias" class="btn btn-primary btn-sm">Claim</a>
<div>
</div>
</div>

4
frontend/src/app/lightning/node-owner/node-owner.component.scss Normal file
View File

@@ -0,0 +1,4 @@
.profile-photo {
width: 31px;
height: 31px;
}

20
frontend/src/app/lightning/node-owner/node-owner.component.ts Normal file
View File

@@ -0,0 +1,20 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { StateService } from '../../services/state.service';
@Component({
selector: 'app-node-owner',
templateUrl: './node-owner.component.html',
styleUrls: ['./node-owner.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NodeOwnerComponent{
@Input() publicKey: string = '';
@Input() alias: string = '';
@Input() nodeOwner$: Observable<any>;
constructor(
public stateService: StateService
) {
}
}

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

@@ -75,13 +75,13 @@ export class NodeStatisticsChartComponent implements OnInit {
prepareChartOptions(data) {
let title: object;
if (data.channels.length === 0) {
if (data.channels.length < 2) {
title = {
textStyle: {
color: 'grey',
fontSize: 15
},
text: `Loading`,
text: $localize`No data to display yet. Try again later.`,
left: 'center',
top: 'center'
};
@@ -135,18 +135,18 @@ export class NodeStatisticsChartComponent implements OnInit {
return tooltip;
}
},
xAxis: data.channels.length === 0 ? undefined : {
xAxis: data.channels.length < 2 ? undefined : {
type: 'time',
splitNumber: this.isMobile() ? 5 : 10,
axisLabel: {
hideOverlap: true,
}
},
legend: data.channels.length === 0 ? undefined : {
legend: data.channels.length < 2 ? undefined : {
padding: 10,
data: [
{
name: 'Channels',
name: $localize`:@@807cf11e6ac1cde912496f764c176bdfdd6b7e19:Channels`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
@@ -154,7 +154,7 @@ export class NodeStatisticsChartComponent implements OnInit {
icon: 'roundRect',
},
{
name: 'Capacity',
name: $localize`:@@ce9dfdc6dccb28dc75a78c704e09dc18fb02dcfa:Capacity`,
inactiveColor: 'rgb(110, 112, 121)',
textStyle: {
color: 'white',
@@ -167,7 +167,7 @@ export class NodeStatisticsChartComponent implements OnInit {
'Capacity': true,
}
},
yAxis: data.channels.length === 0 ? undefined : [
yAxis: data.channels.length < 2 ? undefined : [
{
type: 'value',
axisLabel: {
@@ -198,10 +198,10 @@ export class NodeStatisticsChartComponent implements OnInit {
}
}
],
series: data.channels.length === 0 ? [] : [
series: data.channels.length < 2 ? [] : [
{
zlevel: 1,
name: 'Channels',
name: $localize`:@@807cf11e6ac1cde912496f764c176bdfdd6b7e19:Channels`,
showSymbol: false,
symbol: 'none',
data: data.channels,
@@ -224,7 +224,7 @@ export class NodeStatisticsChartComponent implements OnInit {
{
zlevel: 0,
yAxisIndex: 1,
name: 'Capacity',
name: $localize`:@@ce9dfdc6dccb28dc75a78c704e09dc18fb02dcfa:Capacity`,
showSymbol: false,
symbol: 'none',
stack: 'Total',
@@ -252,21 +252,4 @@ export class NodeStatisticsChartComponent implements OnInit {
isMobile() {
return (window.innerWidth <= 767.98);
}
onSaveChart() {
// @ts-ignore
const prevBottom = this.chartOptions.grid.bottom;
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartOptions.backgroundColor = '#11131f';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
}), `block-sizes-weights-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
// @ts-ignore
this.chartOptions.grid.bottom = prevBottom;
this.chartOptions.backgroundColor = 'none';
this.chartInstance.setOption(this.chartOptions);
}
}

2
frontend/src/app/lightning/node/node-preview.component.html
View File

@@ -12,7 +12,7 @@
</div>
</div>
<div class="row">
<div class="col-md">
<div class="col-md table-col">
<a class="subtitle" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">{{ node.public_key }}</a>
<table class="table table-borderless table-striped">
<tbody>

5
frontend/src/app/lightning/node/node-preview.component.scss
View File

@@ -1,3 +1,8 @@
.table-col {
max-width: calc(100% - 470px);
overflow: hidden;
}
.table {
margin-top: 6px;
font-size: 32px;

55
frontend/src/app/lightning/node/node.component.html
View File

@@ -3,13 +3,17 @@
<ng-container *ngIf="!error">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<div class="title-container mb-2">
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
<span class="tx-link">
<div class="d-flex justify-content-between align-items-center">
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
<!-- <app-node-owner [nodeOwner$]="nodeOwner$" [publicKey]="node.public_key" [alias]="node.alias" class="claim-btn"></app-node-owner> -->
</div>
<span class="tx-link justify-content-between align-items-center">
<span class="node-id">
<app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
<app-clipboard [text]="node.public_key"></app-clipboard>
</app-truncate>
</span>
<!-- <app-node-owner [nodeOwner$]="nodeOwner$" [publicKey]="node.public_key" [alias]="node.alias" class="claim-btn-mobile"></app-node-owner> -->
</span>
</div>
</ng-container>
@@ -21,7 +25,6 @@
</div>
<div class="box" *ngIf="!error">
<div class="row">
<div class="col-md">
<table class="table table-borderless table-striped table-fixed">
@@ -57,7 +60,10 @@
</tr>
<tr *ngIf="(avgChannelDistance$ | async) as avgDistance;">
<td i18n="lightning.avg-distance" class="text-truncate">Avg channel distance</td>
<td class="direction-ltr">{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
<td class="direction-ltr">{{ avgDistance | amountShortener: 1 }} <span class="symbol">km</span> <span class="separator">·</span>{{ kmToMiles(avgDistance) | amountShortener: 1 }} <span class="symbol">mi</span></td>
</tr>
<tr *ngIf="!node.geolocation" class="d-none d-md-table-row">
<ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
</tr>
</tbody>
</table>
@@ -100,11 +106,50 @@
</td>
</ng-template>
</tr>
<tr *ngIf="node.geolocation && node.featuresBits">
<ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
</tr>
<tr *ngIf="!node.geolocation && node.featuresBits" class="d-table-row d-md-none">
<ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<ng-template #featurebits let-bits="bits">
<td i18n="lightning.features" class="text-truncate label">Features</td>
<td class="d-flex justify-content-between">
<span class="text-truncate w-90">{{ bits }}</span>
<button type="button" class="btn btn-outline-info btn-xs" (click)="toggleFeatures()" i18n="transaction.details|Transaction Details">Details</button>
</td>
</ng-template>
<div class="box mt-2" *ngIf="!error && showFeatures">
<div class="row">
<div class="col-md">
<div class="mb-3">
<h5>Raw bits</h5>
<span class="text-wrap w-100"><small>{{ node.featuresBits }}</small></span>
</div>
<h5>Decoded</h5>
<table class="table table-borderless table-striped table-fixed">
<thead>
<th style="width: 13%">Bit</th>
<th>Name</th>
<th style="width: 25%; text-align: right">Required</th>
</thead>
<tbody>
<tr *ngFor="let feature of node.features">
<td style="width: 13%">{{ feature.bit }}</td>
<td>{{ feature.name }}</td>
<td style="width: 25%; text-align: right">{{ feature.is_required }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="input-group mt-3" *ngIf="!error && node.socketsObject.length">
@@ -352,5 +397,3 @@
</div>
</ng-template>
<br>

17
frontend/src/app/lightning/node/node.component.scss
View File

@@ -108,5 +108,20 @@ app-fiat {
}
.separator {
margin: 0 1em;
margin: 0 0.25em;
color: slategrey;
}
.claim-btn {
max-height: 32px;
@media (min-width: 850px) {
display: none;
}
}
.claim-btn-mobile {
max-height: 32px;
@media (max-width: 850px) {
display: none;
}
}

33
frontend/src/app/lightning/node/node.component.ts
View File

@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { catchError, map, switchMap, tap } from 'rxjs/operators';
import { Observable, of, EMPTY } from 'rxjs';
import { catchError, map, switchMap, tap, share } from 'rxjs/operators';
import { SeoService } from '../../services/seo.service';
import { ApiService } from '../../services/api.service';
import { LightningApiService } from '../lightning-api.service';
@@ -37,7 +37,8 @@ export class NodeComponent implements OnInit {
liquidityAd: ILiquidityAd;
tlvRecords: CustomRecord[];
avgChannelDistance$: Observable<number | null>;
showFeatures = false;
nodeOwner$: Observable<any>;
kmToMiles = kmToMiles;
constructor(
@@ -45,6 +46,7 @@ export class NodeComponent implements OnInit {
private lightningApiService: LightningApiService,
private activatedRoute: ActivatedRoute,
private seoService: SeoService,
private cd: ChangeDetectorRef,
) { }
ngOnInit(): void {
@@ -148,6 +150,24 @@ export class NodeComponent implements OnInit {
return null;
})
) as Observable<number | null>;
this.nodeOwner$ = this.activatedRoute.paramMap
.pipe(
switchMap((params: ParamMap) => {
return this.apiService.getNodeOwner$(params.get('public_key')).pipe(
switchMap((response) => {
if (response.status === 204) {
return of(false);
}
return of(response.body);
}),
catchError(() => {
return of(false);
})
)
}),
share(),
);
}
toggleShowDetails(): void {
@@ -165,4 +185,9 @@ export class NodeComponent implements OnInit {
onLoadingEvent(e) {
this.channelListLoading = e;
}
toggleFeatures() {
this.showFeatures = !this.showFeatures;
return false;
}
}

2
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
View File

@@ -19,4 +19,4 @@
<div class="spinner-border text-light"></div>
</div>
</ng-container>
</div>
</div>

10
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
View File

@@ -4,6 +4,9 @@
&.widget {
height: 250px;
}
&.graph {
margin-bottom: 20px;
}
}
.card-header {
@@ -133,3 +136,10 @@
top: 450px;
}
}
.indexing-message {
position: absolute;
width: 100%;
text-align: center;
margin-top: 100px;
}

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

@@ -204,24 +204,33 @@ export class NodesChannelsMap implements OnInit {
prepareChartOptions(nodes, channels) {
let title: object;
if (channels.length === 0 && !this.placeholder) {
this.chartOptions = null;
return;
}
// empty map fallback
if (channels.length === 0 && this.placeholder) {
title = {
textStyle: {
color: 'white',
fontSize: 18
},
text: $localize`No geolocation data available`,
left: 'center',
top: 'center'
};
this.zoom = 1.5;
this.center = [0, 20];
if (channels.length === 0) {
if (!this.placeholder) {
this.isLoading = false;
title = {
textStyle: {
color: 'white',
fontSize: 18
},
text: $localize`No data to display yet. Try again later.`,
left: 'center',
top: 'center'
};
this.zoom = 1.5;
this.center = [0, 20];
} else { // used for Node and Channel preview components
title = {
textStyle: {
color: 'white',
fontSize: 18
},
text: $localize`No geolocation data available`,
left: 'center',
top: 'center'
};
this.zoom = 1.5;
this.center = [0, 20];
}
}
this.chartOptions = {

20
frontend/src/app/lightning/nodes-map/nodes-map.component.scss
View File

@@ -4,17 +4,21 @@
@media (min-width: 465px) {
font-size: 20px;
}
@media (min-width: 992px) {
height: 40px;
}
}
.full-container {
display: flex;
flex-direction: column;
padding: 0px 15px;
width: 100%;
min-height: 500px;
height: calc(100% - 150px);
@media (max-width: 992px) {
height: 100%;
padding-bottom: 100px;
};
height: calc(100vh - 225px);
min-height: 400px;
@media (min-width: 992px) {
height: calc(100vh - 150px);
}
}
.full-container.widget {
min-height: 240px;
@@ -34,8 +38,10 @@
}
.chart {
width: 100%;
display: flex;
flex: 1;
height: 100%;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 10px;
@media (max-width: 992px) {

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

@@ -207,8 +207,8 @@ export class NodesMap implements OnInit, OnChanges {
return `
<b style="color: white">${alias}</b><br>
${liquidity}<br>
${data[5]} channels<br>
${liquidity}<br>` +
$localize`:@@205c1b86ac1cc419c4d0cca51fdde418c4ffdc20:${data[5]}:INTERPOLATION: channels` + `<br>
${getFlagEmoji(data[7])} ${data[6]}
`;
}

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

@@ -4,6 +4,9 @@
@media (min-width: 465px) {
font-size: 20px;
}
@media (min-width: 992px) {
height: 40px;
}
}
.main-title {
@@ -18,17 +21,20 @@
}
.full-container {
display: flex;
flex-direction: column;
padding: 0px 15px;
width: 100%;
min-height: 500px;
height: calc(100% - 150px);
@media (max-width: 992px) {
padding-bottom: 100px;
};
height: calc(100vh - 225px);
min-height: 400px;
@media (min-width: 992px) {
height: calc(100vh - 150px);
}
}
.chart {
width: 100%;
display: flex;
flex: 1;
height: 100%;
padding-bottom: 20px;
padding-right: 10px;

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

@@ -442,7 +442,7 @@ export class NodesNetworksChartComponent implements OnInit {
download(this.chartInstance.getDataURL({
pixelRatio: 2,
excludeComponents: ['dataZoom'],
}), `block-sizes-weights-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
}), `lightning-nodes-per-network-${Math.round(now.getTime() / 1000)}.svg`);
// @ts-ignore
this.chartOptions.grid.bottom = prevBottom;
this.chartOptions.backgroundColor = 'none';

3
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
View File

@@ -10,7 +10,7 @@
<small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
</div>
<div class="container pb-lg-0 bottom-padding">
<div class="container pb-lg-0">
<div class="pb-lg-5">
<div class="chart w-100" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
@@ -54,5 +54,4 @@
</tbody>
</table>
</div>
</div>

9
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
View File

@@ -32,15 +32,6 @@
}
}
.bottom-padding {
@media (max-width: 992px) {
padding-bottom: 65px
};
@media (max-width: 576px) {
padding-bottom: 65px
};
}
.rank {
width: 8%;
@media (max-width: 576px) {

10
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
View File

@@ -99,8 +99,9 @@ export class NodesPerCountryChartComponent implements OnInit {
},
borderColor: '#000',
formatter: () => {
const nodeCount = country.count.toString();
return `<b style="color: white">${country.name.en} (${country.share}%)</b><br>` +
$localize`${country.count.toString()} nodes` + `<br>` +
$localize`${nodeCount} nodes` + `<br>` +
$localize`${this.amountShortenerPipe.transform(country.capacity / 100000000, 2)} BTC capacity`
;
}
@@ -115,7 +116,7 @@ export class NodesPerCountryChartComponent implements OnInit {
color: 'grey',
},
value: totalShareOther,
name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
label: {
overflow: 'truncate',
color: '#b1b1b1',
@@ -131,8 +132,9 @@ export class NodesPerCountryChartComponent implements OnInit {
},
borderColor: '#000',
formatter: () => {
return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
totalNodeOther.toString() + ` nodes`;
const nodeCount = totalNodeOther.toString();
return `<b style="color: white">` + $localize`Other (${totalShareOther.toFixed(2) + '%'})` + `</b><br>` +
$localize`${nodeCount} nodes`;
},
},
data: 9999 as any

1
frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
View File

@@ -117,5 +117,4 @@
</table>
</div>
</div>

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

@@ -3,21 +3,21 @@
<div *ngIf="widget">
<div class="pool-distribution" *ngIf="(nodesPerAsObservable$ | async) as stats; else loadingReward">
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
<h5 class="card-title" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.clearnet-capacity-desc"
ngbTooltip="How much liquidity is running on nodes advertising at least one clearnet IP address" placement="bottom">
<app-amount [satoshis]="stats.clearnetCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
<h5 class="card-title" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.unknown-capacity-desc"
ngbTooltip="How much liquidity is running on nodes which ISP was not identifiable" placement="bottom">
<app-amount [satoshis]="stats.unknownCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tor-capacity">Tor Capacity</h5>
<h5 class="card-title" i18n="lightning.tor-capacity">Tor Capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.tor-capacity-desc"
ngbTooltip="How much liquidity is running on nodes advertising only Tor addresses" placement="bottom">
<app-amount [satoshis]="stats.torCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
@@ -38,7 +38,7 @@
</small>
</div>
<div [class]="!widget ? 'bottom-padding' : 'pb-0'" class="container pb-lg-0">
<div *ngIf="!indexingInProgress else indexing" [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
<div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
</div>
@@ -74,28 +74,31 @@
</tbody>
</table>
</div>
</div>
<ng-template #loadingReward>
<div class="pool-distribution">
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
<h5 class="card-title" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
<h5 class="card-title" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tor-capacity">Tor Capacity</h5>
<h5 class="card-title" i18n="lightning.tor-capacity">Tor Capacity</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
</div>
</ng-template>
<ng-template #indexing>
<div class="indexing-message" i18n="lightning.indexing-in-progress">Indexing in progress</div>
</ng-template>

27
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
View File

@@ -16,6 +16,7 @@
@media (max-width: 575px) {
height: calc(100% - 230px);
};
margin-bottom: 25px;
}
.chart {
@@ -34,15 +35,6 @@
}
}
.bottom-padding {
@media (max-width: 992px) {
padding-bottom: 65px
};
@media (max-width: 576px) {
padding-bottom: 65px
};
}
@media (max-width: 767.98px) {
.pools-table th,
.pools-table td {
@@ -68,10 +60,13 @@
margin-bottom: 5px;
}
.item {
max-width: 160px;
max-width: 150px;
width: 50%;
display: inline-block;
margin: 0px auto 20px;
@media (min-width: 485px) {
max-width: 160px;
}
&:nth-child(2) {
order: 2;
@media (min-width: 485px) {
@@ -164,4 +159,14 @@
padding-left: 105px;
padding-right: 105px;
}
}
}
.indexing-message {
font-size: 15px;
color: grey;
font-weight: bold;
width: 100%;
padding-top: 100px;
text-align: center;
height: 240px;
}

13
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
View File

@@ -29,6 +29,7 @@ export class NodesPerISPChartComponent implements OnInit {
sortBy = 'capacity';
showUnknown = false;
chartInstance = undefined;
indexingInProgress = false;
@HostBinding('attr.dir') dir = 'ltr';
@@ -88,6 +89,8 @@ export class NodesPerISPChartComponent implements OnInit {
this.prepareChartOptions(data.ispRanking);
this.indexingInProgress = !data.ispRanking.length;
return {
taggedISP: data.ispRanking.length,
clearnetCapacity: data.clearnetCapacity,
@@ -153,8 +156,9 @@ export class NodesPerISPChartComponent implements OnInit {
},
borderColor: '#000',
formatter: () => {
const nodeCount = isp[4].toString();
return `<b style="color: white">${isp[1]} (${this.sortBy === 'capacity' ? isp[7] : isp[6]}%)</b><br>` +
$localize`${isp[4].toString()} nodes` + `<br>` +
$localize`${nodeCount} nodes` + `<br>` +
$localize`${this.amountShortenerPipe.transform(isp[2] / 100000000, 2)} BTC`
;
}
@@ -169,7 +173,7 @@ export class NodesPerISPChartComponent implements OnInit {
color: 'grey',
},
value: totalShareOther,
name: 'Other' + (isMobile() || this.widget ? `` : ` (${totalShareOther.toFixed(2)}%)`),
name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
label: {
overflow: 'truncate',
color: '#b1b1b1',
@@ -185,8 +189,9 @@ export class NodesPerISPChartComponent implements OnInit {
},
borderColor: '#000',
formatter: () => {
return `<b style="color: white">Other (${totalShareOther.toFixed(2)}%)</b><br>` +
$localize`${nodeCountOther.toString()} nodes` + `<br>` +
const nodeCount = nodeCountOther.toString();
return `<b style="color: white">` + $localize`Other (${totalShareOther.toFixed(2) + '%'})` + `</b><br>` +
$localize`${nodeCount} nodes` + `<br>` +
$localize`${this.amountShortenerPipe.transform(capacityOther / 100000000, 2)} BTC`;
}
},

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

@@ -114,5 +114,4 @@
</table>
</div>
</div>

2
frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
View File

@@ -1,7 +1,7 @@
<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
<h1 *ngIf="!widget" class="float-left" i18n="lightning.liquidity-ranking">Liquidity Ranking</h1>
<h1 *ngIf="!widget" class="float-left" i18n="lightning.connectivity-ranking">Connectivity Ranking</h1>
<div class="clearfix"></div>

4
frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
View File

@@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { map, Observable } from 'rxjs';
import { INodesRanking, ITopNodesPerChannels } from '../../../interfaces/node-api.interface';
import { SeoService } from '../../../services/seo.service';
import { StateService } from '../../../services/state.service';
import { GeolocationData } from '../../../shared/components/geolocation/geolocation.component';
import { LightningApiService } from '../../lightning-api.service';
@@ -22,6 +23,7 @@ export class TopNodesPerChannels implements OnInit {
constructor(
private apiService: LightningApiService,
private stateService: StateService,
private seoService: SeoService,
) {}
ngOnInit(): void {
@@ -32,6 +34,8 @@ export class TopNodesPerChannels implements OnInit {
}
if (this.widget === false) {
this.seoService.setTitle($localize`:@@c50bf442cf99f6fc5f8b687c460f33234b879869:Connectivity Ranking`);
this.topNodesPerChannels$ = this.apiService.getTopNodesByChannels$().pipe(
map((ranking) => {
for (const i in ranking) {

6
frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html
View File

@@ -8,7 +8,7 @@
<h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
<span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
</a>
<app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
</div>
@@ -22,7 +22,7 @@
<h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
<span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
</a>
<app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
</div>
@@ -36,7 +36,7 @@
<h5 class="card-title d-inline" i18n="lightning.top-channels-age">Oldest nodes</h5>
<span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
</a>
<app-oldest-nodes [widget]="true"></app-oldest-nodes>
</div>

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

@@ -4,6 +4,9 @@
@media (min-width: 465px) {
font-size: 20px;
}
@media (min-width: 992px) {
height: 40px;
}
}
.main-title {
@@ -18,17 +21,20 @@
}
.full-container {
display: flex;
flex-direction: column;
padding: 0px 15px;
width: 100%;
min-height: 500px;
height: calc(100% - 150px);
@media (max-width: 992px) {
padding-bottom: 100px;
};
height: calc(100vh - 225px);
min-height: 400px;
@media (min-width: 992px) {
height: calc(100vh - 150px);
}
}
.chart {
width: 100%;
display: flex;
flex: 1;
height: 100%;
padding-bottom: 20px;
padding-right: 10px;

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

@@ -256,7 +256,7 @@ export class LightningStatisticsChartComponent implements OnInit {
series: data.channel_count.length === 0 ? [] : [
{
zlevel: 1,
name: 'Channels',
name: $localize`:@@807cf11e6ac1cde912496f764c176bdfdd6b7e19:Channels`,
showSymbol: false,
symbol: 'none',
data: data.channel_count,