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

Merge branch 'master' into nymkappa/feature/channel-map-color

Browse Source
This commit is contained in:
wiz
2022-08-30 15:35:18 +02:00
committed by GitHub
parent 6b248fb46d 2f42dc9898
commit 56ec8b900c
47 changed files with 570 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@
</div>
</form>
<table class="table table-borderless" *ngIf="response.channels.length > 0">
<table class="table table-borderless" *ngIf="response.channels.length > 0" [style]="isLoading ? 'opacity: 0.75' : ''">
<ng-container *ngTemplateOutlet="tableHeader"></ng-container>
<tbody>
<tr *ngFor="let channel of response.channels; let i = index;">

10
frontend/src/app/lightning/channels-list/channels-list.component.ts
View File

@@ -14,6 +14,7 @@ import { LightningApiService } from '../lightning-api.service';
export class ChannelsListComponent implements OnInit, OnChanges {
@Input() publicKey: string;
@Output() channelsStatusChangedEvent = new EventEmitter<string>();
@Output() loadingEvent = new EventEmitter<boolean>(false);
channels$: Observable<any>;
// @ts-ignore
@@ -26,6 +27,7 @@ export class ChannelsListComponent implements OnInit, OnChanges {
defaultStatus = 'open';
status = 'open';
publicKeySize = 25;
isLoading = false;
constructor(
private lightningApiService: LightningApiService,
@@ -56,6 +58,8 @@ export class ChannelsListComponent implements OnInit, OnChanges {
)
.pipe(
tap((val) => {
this.isLoading = true;
this.loadingEvent.emit(true);
if (typeof val === 'string') {
this.status = val;
this.page = 1;
@@ -64,10 +68,12 @@ export class ChannelsListComponent implements OnInit, OnChanges {
}
}),
switchMap(() => {
this.channelsStatusChangedEvent.emit(this.status);
return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
this.channelsStatusChangedEvent.emit(this.status);
return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
}),
map((response) => {
this.isLoading = false;
this.loadingEvent.emit(false);
return {
channels: response.body,
totalItems: parseInt(response.headers.get('x-total-count'), 10)

40
frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
View File

@@ -9,44 +9,44 @@
<div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
<div class="fee-estimation-container" *ngIf="mode === 'avg'">
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
<div class="card-text">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_capacity || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">sats</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_capacity" [previous]="statistics.previous?.avg_capacity"></app-change>
</span>
</div>
</div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
<div class="card-text" i18n-ngbTooltip="ln.average-feerate-desc"
ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
placement="bottom">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_fee_rate || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">ppm</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_fee_rate" [previous]="statistics.previous?.avg_fee_rate"></app-change>
</span>
</div>
</div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
<div class="card-text" i18n-ngbTooltip="ln.average-basefee-desc"
ngbTooltip="The average base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
<div class="card-text">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.avg_base_fee_mtokens || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">msats</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.avg_base_fee_mtokens" [previous]="statistics.previous?.avg_base_fee_mtokens"></app-change>
</span>
</div>
@@ -55,43 +55,45 @@
</div>
<div class="fee-estimation-container" *ngIf="mode === 'med'">
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.median-capacity">Med Capacity</h5>
<div class="card-text">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_capacity || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">sats</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_capacity" [previous]="statistics.previous?.med_capacity"></app-change>
</span>
</div>
</div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.average-feerate">Med Fee Rate</h5>
<div class="card-text" i18n-ngbTooltip="ln.median-feerate-desc"
ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
ngbTooltip="The median fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
placement="bottom">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_fee_rate || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">ppm</span>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_fee_rate" [previous]="statistics.previous?.med_fee_rate"></app-change>
</span>
</div>
</div>
<div class="item">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="ln.median-basefee">Med Base Fee</h5>
<div class="card-text" i18n-ngbTooltip="ln.median-basefee-desc"
ngbTooltip="The median base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
<div class="card-text">
<div class="fee-text">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.med_base_fee_mtokens || 0 | number: '1.0-0' }}
<span i18n="shared.sat-vbyte|sat/vB">msats</span>
</div>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.med_base_fee_mtokens" [previous]="statistics.previous?.med_base_fee_mtokens"></app-change>
</span>
</div>

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

@@ -18,6 +18,10 @@
}
}
.fee-estimation-wrapper {
min-height: 77px;
}
.fee-estimation-container {
display: flex;
justify-content: space-between;
@@ -30,7 +34,10 @@
width: -webkit-fill-available;
@media (min-width: 376px) {
margin: 0 auto 0px;
}
}
&.more-padding {
padding-top: 10px;
}
&:first-child{
display: none;
@media (min-width: 485px) {
@@ -57,6 +64,9 @@
margin: auto;
line-height: 1.45;
padding: 0px 2px;
&.no-border {
border-bottom: none;
}
}
.fiat {
display: block;

54
frontend/src/app/lightning/node-statistics/node-statistics.component.html
View File

@@ -1,76 +1,64 @@
<div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
<div class="fee-estimation-container">
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Capacity</h5>
<div class="card-text" i18n-ngbTooltip="mining.average-fee" ngbTooltip="Percentage change past week"
placement="bottom">
<div class="fee-text">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="lightning.capacity">Capacity</h5>
<div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
[disableTooltip]="!statistics.previous" placement="bottom">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
<app-amount [satoshis]="statistics.latest?.total_capacity" digitsInfo="1.2-2"></app-amount>
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.total_capacity" [previous]="statistics.previous?.total_capacity">
</app-change>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Nodes</h5>
<div class="card-text" i18n-ngbTooltip="mining.rewards-desc" ngbTooltip="Percentage change past week"
placement="bottom">
<div class="fee-text">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
<div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
[disableTooltip]="!statistics.previous">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.node_count || 0 | number }}
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.node_count" [previous]="statistics.previous?.node_count"></app-change>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
<div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc" ngbTooltip="Percentage change past week"
placement="bottom">
<div class="fee-text">
<div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
<h5 class="card-title" i18n="lightning.channels">Channels</h5>
<div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
[disableTooltip]="!statistics.previous">
<div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
{{ statistics.latest?.channel_count || 0 | number }}
</div>
<span class="fiat">
<span class="fiat" *ngIf="statistics.previous">
<app-change [current]="statistics.latest?.channel_count" [previous]="statistics.previous?.channel_count">
</app-change>
</span>
</div>
</div>
<!--
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
<div class="card-text" i18n-ngbTooltip="mining.average-fee"
ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
<app-amount [satoshis]="statistics.latest.average_channel_size" digitsInfo="1.2-3"></app-amount>
<span class="fiat">
<app-change [current]="statistics.latest.average_channel_size" [previous]="statistics.previous.average_channel_size"></app-change>
</span>
</div>
</div>
-->
</div>
</div>
<ng-template #loadingReward>
<div class="fee-estimation-container loading-container">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Nodes</h5>
<h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
<h5 class="card-title" i18n="lightning.channels">Channels</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
<h5 class="card-title" i18n="lightning.average-channels">Average Channel</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>

12
frontend/src/app/lightning/node-statistics/node-statistics.component.scss
View File

@@ -18,6 +18,10 @@
}
}
.fee-estimation-wrapper {
min-height: 77px;
}
.fee-estimation-container {
display: flex;
justify-content: space-between;
@@ -30,7 +34,10 @@
width: -webkit-fill-available;
@media (min-width: 376px) {
margin: 0 auto 0px;
}
}
&.more-padding {
padding-top: 10px;
}
&:first-child{
display: none;
@media (min-width: 485px) {
@@ -57,6 +64,9 @@
margin: auto;
line-height: 1.45;
padding: 0px 2px;
&.no-border {
border-bottom: none;
}
}
.fiat {
display: block;

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

@@ -133,7 +133,7 @@
<app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
<div class="d-flex justify-content-between">
<div class="d-flex">
<h2 *ngIf="channelsListStatus === 'open'">
<span i18n="lightning.open-channels">Open channels</span>
<span> ({{ node.opened_channel_count }})</span>
@@ -142,10 +142,13 @@
<span i18n="lightning.open-channels">Closed channels</span>
<span> ({{ node.closed_channel_count }})</span>
</h2>
<div *ngIf="channelListLoading" class="spinner-border ml-3" role="status"></div>
</div>
<app-channels-list [publicKey]="node.public_key"
(channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"></app-channels-list>
(channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"
(loadingEvent)="onLoadingEvent($event)"
></app-channels-list>
</div>
</div>

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

@@ -56,4 +56,17 @@ app-fiat {
display: inline-block;
margin-left: 10px;
}
}
.spinner-border {
@media (min-width: 768px) {
margin-top: 6.5px;
width: 1.75rem;
height: 1.75rem;
}
@media (max-width: 768px) {
margin-top: 2.3px;
width: 1.5rem;
height: 1.5rem;
}
}

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

@@ -22,7 +22,7 @@ export class NodeComponent implements OnInit {
channelsListStatus: string;
error: Error;
publicKey: string;
channelListLoading = false;
publicKeySize = 99;
constructor(
@@ -97,4 +97,8 @@ export class NodeComponent implements OnInit {
onChannelsListStatusChanged(e) {
this.channelsListStatus = e;
}
onLoadingEvent(e) {
this.channelListLoading = e;
}
}

6
frontend/src/app/lightning/nodes-channels/node-channels.component.ts
View File

@@ -44,13 +44,13 @@ export class NodeChannels implements OnChanges {
switchMap((response) => {
this.isLoading = true;
if ((response.body?.length ?? 0) <= 0) {
return [];
this.isLoading = false;
return [''];
}
return [response.body];
}),
tap((body: any[]) => {
if (body.length === 0) {
this.isLoading = false;
if (body.length === 0 || body[0].length === 0) {
return;
}
const biggestCapacity = body[0].capacity;

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

@@ -60,7 +60,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

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

@@ -28,7 +28,7 @@
<div class="card-header" *ngIf="!widget">
<div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
<span i18n="lightning.top-100-isp-ln">Top 100 ISP hosting LN nodes</span>
<span i18n="lightning.top-100-isp-ln">Top 100 ISPs hosting LN nodes</span>
<button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>

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

@@ -40,7 +40,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;

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

@@ -60,7 +60,7 @@
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;